CODEWITHSUNDEEP
asp.netjqueryasp.net-ajax
Zo Has
Zo Has

Reputation: 13038

Submit form via AJAX with loading progress?

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.

Upvotes: 0

Views: 1574

Answers (4)

RobertPitt
RobertPitt

Reputation: 57268

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

Upvotes: 1

Alpesh
Alpesh

Reputation: 5405

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/

Upvotes: 1

RPM1984
RPM1984

Reputation: 73113

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

Upvotes: 1

Ozzz
Ozzz

Reputation: 300

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"

Upvotes: 3

Related Questions