How to show Loading message instantly while using jquery ajax?

Question

Below is my Ajax code I have made using jQuery Ajax method.

$(".loading_msg").show();
$.ajax({
    type: "POST",
    url: "submit_ops.php?action=submit_form",
    data: $( "#frmMyForm" ).serialize(),
    success: function(result){
        if(result=='Success'){
            $("#msgContainer").html('<div style="color:#3CA322;font-weight:bold;font-size:14px;padding:10px;">Thank you.</div>');
            $("#msgContainer").fadeIn();
        }
        else{
            $("#msgContainer").html('<div style="color:red;font-size:12px;padding:10px;">' + result + '</div>');
            $("#msgContainer").fadeIn();
        }
    },
    error: function(){
        //console.log('error');
    },
    complete: function(){
        //console.log('complete');
        $(".loading_msg").hide();
        $("#submit").attr("disabled", false);
    }

});

So the logic is, whenever the Ajax request is about to made,

the .login_msg container is displayed first
then ajax call made
and when it is completed, again the .loading_msg is hidden.

Now the problem, it is not working smoothly as it should be. So when the ajax call is made, the browser hangs for a seconds but it doesn't show the loading message. But when the request is completed, the login message appears like for half a second and then it goes away as I have set it hidden on request completion.

So I want that the .login_msg should be shown before the request is made.

Any suggestions for this? Thanks in advance.

amantur · Accepted Answer · 2012-05-09 04:50:40Z

2

try using beforeSend and complete settings of $.ajax:

$.ajax({
    type: "POST",
    url: "submit_ops.php?action=submit_form",
    data: $( "#frmMyForm" ).serialize(),
    beforeSend:function(){
             $(".loading_msg").show();
        }
    complete:function(){
             $(".loading_msg").hide();
        }

    ....
    ....
});

answered May 9, 2012 at 4:50

amantur

40.6k22 gold badges136 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amantur Over a year ago

try serializing form before showing loading: var d=$( "#frmMyForm" ).serialize(); and then set data form this vairable in $.ajax like data:d, I think it is causing the browser to hang and delay showing of loading image. remember when something heavy is going on the loading animation might skip or not be drawn immediately after show() is called.

aslamdoctor Over a year ago

Found the issue. I was using async:false; and it was causing the issue. now it is solved as I removed that setting. Thanks for the efforts @TheVillageIdiot

Collectives™ on Stack Overflow

How to show Loading message instantly while using jquery ajax?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related