Submit form via AJAX with loading progress ?

Question

Hello guys, just need tips on how to make forms where request are submitted via AJAX with a loading progress image. I am using update panels with AJAX framework. I would like to know about the recommended approach. Through JQuery or AJAX toolkit ?

Please advice, examples would be an added bonus for me.

Answer 1

1- Prepare a client side div with "display:none" style property. put your loading image inside.

2 - when the user or page submits a request, change that divs display property to "block".

3- Add some kind of "information received" sign to the response and check this response from the client side and then change that divs display property back to "none"

Answer 2

I find it easier to just use jQuery for my AJAX. You can for example just add a loading images after the submit button while the form is being submitted and remove it after you get response from the server.

$('SelectorForYourForm').submit(function(){
var $this = $(this),
    loadImg = $('<img>').attr({ 
    src: 'path/To/Img',
    alt: 'Loading..'
});
$this.find('input[type=submit]').attr('disabled', 'disabled').after(loadImg);

$.ajax({
    type: "POST",
    url: "/Message.aspx/GetTemplate",
    data: data: $this.serialize(),
    success: function (data) {
        //Do what you need to do with the data.
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert('error geting data');
    },
    complete: function(){
        // remove the ajax loading image and enable the form again.
        $this.attr('disabled', '').next().remove();
    }
});

});

Answer 3

I would like to know about the recommended approach

Well, that depends on what you are doing, what parts of the form are you updating, how big is the form, what values are you sending to the server.

Generally speaking, if you want to update something simple (dropdownlist, listbox, etc), youd generally use JavaScript (or jQuery) to call an AJAX-enabled web service. This way, you're only sending to the server the data it needs, things like ViewState/cookies are not sent over the wire. You also have full control over the pre/post execution events (so you can add your loading images, call the WS, then clear them).

However, if you want to asynchronously update an entire form (which has a lot of controls), you're probably right in using an UpdatePanel. Things like a GridView are a good case for an UpdatePanel (as you usually need to handle editing, binding and paging all asynchronously).

The progress image is made easy with the following code:

<ProgressTemplate>
   <img src="someloadingimage.gif" alt="Loading" />
</ProgressTemplate>

Stick that inside your UpdatePanel, and whenever an AJAX call is made, the loading image will be shown.

HTH

Answer 4

If you use JQuery for AJAX request then you can use the following events -

$.ajax({ url: "test.html",
 type: "GET",
 beforeSend: function(){
             -----load your loader here-----
             });,
 success: function(){
      ------remove your loader here -----------  
      Remaining code
      }});

You can also use POST. in above example i have used GET.

For detailed documentation you can refer - http://api.jquery.com/jQuery.ajax/

Answer 5

Create a small plug-in for your loader like so.

$.fn.ShowLoader = function(on){
    switch(on)
    {
        case true:
            $(this).show();
        break;
        default:
            $(this).hide();
        break;
    }
}

then use the following:

$('form').submit(function(){
    var Form = $(this);

    $('.loader',Form).ShowLoader(true);

    //Gather some params
    Location = Form.attr('src');
    Data = Form.Serialize();

    $.post(Location,Data,function(result){
        result = result || false;
        if(result)
        {
             $('.loader',Form).ShowLoader(false); //Disable the loader
             //Process result
        }
    });
})

html would just be a regular form, with an image / div inside with the class of loader