[jQuery] Re: Form plugin, add loading gif

[Mike Alsup]

> I am trying to add a loading gif to the form plugin, but each time I
> do, it breaks.
>
> I am using:
>
> $(document).ready(function() {
>
> //Create function for ajax asset builder
> $('#page_asset_builder_28031').ajaxForm({
>   iframe: true,
>   success: function(html) {
>   $("#loading").show();
>   $("#ajaxResult").html($(html).find("#ajaxResponse"));
>   $("#loading").hide();
>   }});
>
> });
>
> I need to get the   $("#loading").hide(); statement moved up further
> in the script, so that it gets activated right when the submit button
> is clicked, rather on success, but when I create a function, and do
> this, it seems to not work.
>
> Any ideas?


There are several ways to do this.  For example, to show a loading
indicator anytime an ajax request is running you can do this:

$().ajaxStart(function(){
    $("#loading").show();
}).ajaxStop(function() {
    $("#loading").hide();
});

To show the "loading" indicator for this form submit only, try this:

$('#page_asset_builder_28031').ajaxForm({
    iframe: true,
    beforeSubmit: function() {
        $("#loading").show();
    },
    success: function(html) {
        $("#ajaxResult").html($(html).find("#ajaxResponse"));
    },
    complete: function() {
        $("#loading").hide();
    }
});