Question

We are using the jQuery form plugin on our site. We need to be able to show a loading gif when a submit occurs on all forms. So far I have been able to get this done like the following

    $("#uploadAssetImageForm").ajaxForm({
        dataType: 'json',
        beforeSubmit: function () {Cvrs.SetLoading(true, '#uploadAssetImageForm')},
        success: function(asset) {
            Cvrs.SetLoading(false, '#uploadAssetImageForm');
        $("#uploadAssetImageDiv").dialog("close");
            $(":input", "#uploadAssetImageDiv").not(':button, :submit, :reset').val('').removeAttr('checked').removeAttr('selected');
            ReplaceAsset(asset);

        }
    });

In particular the parts I’m talking about are the beforeSubmit function and the call again to set it to false on success.

Set loading just shows a loading gif and disabled form buttons

function(isLoading, form) {

isLoading ? $(form + ' input[type="submit"]').attr("disabled", true) :
    $(form + ' input[type="submit"]').removeAttr("disabled");


isLoading ? $(form + ' .loading-animation').show() :
    $(form + ' .loading-animation').hide();

Is there any way I can get any call to ajaxform to run that code on the beforeSubmit and success along with any other code that might be there as well (running the loading stuff first though) or do I have to go through each case and add this in?

I understand I’ll have to put the loading reference in each form but this makes sense as its possible that different forms could need the loading gif in different spots

Answer 1

You may consider using the ajaxSend event. It fires before an AJAX send event is fired:

$(document).bind('ajaxSend', function(e, request, options) {
    Cvrs.SetLoading(true, '#uploadAssetImageForm');
});

I hope it helps!