-1

Am using Ajax to send a request to a web server, but will like to show user with a GIF image indicating them to wait till the request is completed.

Can you please help me modify this code to load GIF image on sending the request.

jQuery(document).submit(function(e){
    var create_acct_form = jQuery(e.target);
    if(create_acct_form .is("#createacctform")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: create_acct_form .attr("action"), 
            data: create_acct_form .serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data);
                if( data.status == 'error' ) {
                    // error handling, show data.message or what you want.
                } else {
                    // same as above but with success
                    $("#createacctform")[0].reset();
                    $("#create_acct-info").html(data)
                }  
             }
        });
    }
});
Tom
  • 7,640
  • 1
  • 23
  • 47
ASM
  • 169
  • 3
  • 12
  • possible duplicate of [How to show loading spinner in jQuery?](http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) – Tom Jun 02 '15 at 18:46
  • @Tom Please am not good at ajax and javascript, please where do I place it in my code above. Thanks – ASM Jun 02 '15 at 18:50

1 Answers1

2

You can add ajaxStart and ajaxEnd handlers and can show your loading image like this:

$(document)
  .ajaxStart(function() {

    $(Some Image).show();
  })
  .ajaxStop(function() {

    $(Some Image).hide();
  });
Abhishekh Gupta
  • 6,206
  • 4
  • 18
  • 46
  • Please am not good at ajax and javascript, please where do I place it in my code above. Thanks – ASM Jun 02 '15 at 18:46
  • Why downvoted?? Refer the [link](http://stackoverflow.com/questions/68485/how-to-show-loading-spinner-in-jquery) @tom suggested. – Abhishekh Gupta Jun 02 '15 at 18:53