AJAX framework handle redirect response side-effect

[adrenth]

• OctoberCMS Build: 1.1.1+
• PHP Version: 7.4
• Database Engine: MySQL
• Plugins Installed: not applicable

Description:

This is a follow up on this issue:

• AJAX loading indicator does not properly stop after receiving a redirect response to a file download #5055
• https://github.com/octobercms/october/blame/aa9c209e76c6302a0d772277c7c99c948d72edfa/modules/system/assets/js/framework.js#L291-L295

The addition of this specific code has nasty side-effects:

handleRedirectResponse: function(url) {
    window.location.assign(url)
    // Indicate that the AJAX request is finished if we're still on the current page
    // so that the loading indicator for redirects that cause a browser to download 
    // a file instead of leave the page will properly stop.
    // @see https://github.com/octobercms/october/issues/5055
    $el.trigger('ajaxDone')
},

In quite a lot of our projects we have a following situation as such:

<form data-handler="onPlaceOrder">
    <button type="submit" data-attach-loading>Place Order Now!</button>
</form>

public function onPlaceOrder(): RedirectResponse
{
    $this->placeOrder(...);

    return redirect()->to('/thank-you');
}

Now when the Place Order Now! is clicked, the button will be disabled (because of the data-attach-loading) while processing the request.

When a redirect response has been detected, it will point the browser to the new URL and immediately after that it will trigger the ajaxDone and de disabled-state of all form elements (which have data-attach-loading) will be discarded.

Which enables the user to press the button Place Order Now! again during the redirection process. Which results in a form which is submissed twice (or more).

For now, I have fixed this behavior in my projects using this code:

$(document).on('ajaxSetup', function (event, context) {
    context.options.handleRedirectResponse = function (url) {
        window.location.assign(url);
    }
});

The user who reported the issue with the file download response could have done this:

$(document).on('ajaxSetup', function (event, context) {
    if (context.handler === 'myComponent::downloadFile') {
        context.options.handleRedirectResponse = function (url) {
            window.location.assign(url);
            $(event.target).trigger('ajaxDone');
        }
    }
});

[daftspunk]

Addressed in 99a0861

Thanks @adrenth