CODEWITHSUNDEEP
jquery
Abhishek Singh
Abhishek Singh

Reputation: 9765

Show Please Wait... Message while data is being fetched from server

Here is my jQuery which fetches branch information depending on state. 

$("#state").change(function () {

    var state = $("#state").val();
    $.ajax({
        async: false,
        type: 'GET',
        url: '../getBranches',
        data: {
            state: state
        },
        success: function (html) {

            var branch = $("#branch");
            branch.find('option').remove();
            branch.append($('<option/>').val("").text("----Select"));
            if (html == "") {
                return false;
            }
            var opts = html.split(',');
            $.each(opts, function (i, opt) {
                branch.append(
                $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
            });
        }
    });
});

Now i want to show a message on UI like "Please wait..." Or "loading data" until the ajax runs completely. How is that achievable ?

Upvotes: 1

Views: 9466

Answers (3)

emerson.marini
emerson.marini

Reputation: 9348

You can use the beforeSend option when calling the jQuery $.ajax:

HTML

<!-- Somewhere in your page -->
<div id="waitMessage" style="display: none">Please wait...</div>

Javascript

$("#state").change(function(){
    var state = $("#state").val();
    $.ajax({
         async: false,
         type: 'GET',
         url: '../getBranches',
         data : {state :state} ,
         success: function(html) {
            var branch = $("#branch");
            branch.find('option').remove();
            branch.append($('<option/>').val("").text("----Select"));
            if(html == ""){
                return false;
            }
            var opts = html.split(',');
            $.each(opts, function(i, opt){ 
                branch.append($('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
            }); 

            // Hide message
            $("#waitMessage").hide();
         },

         // What to do before starting
         beforeSend: function () {
             $("#waitMessage").show();
         } 
    });
});

Source: http://api.jquery.com/jQuery.ajax/

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10388

html

<span id="tempid" style="display:none">please wait...</span>

in js

  $("#state").change(function () {
          var state = $("#state").val();
    $("#tempid").show();// show message
            $.ajax({
                async: false,                 
                type: 'GET',
                url: '../getBranches',
                data: {
                    state: state
                },
                success: function (html) {

                    var branch = $("#branch");
                    branch.find('option').remove();
                    branch.append($('<option/>').val("").text("----Select"));
                    if (html == "") {
                        return false;
                    }
                    var opts = html.split(',');
                    $.each(opts, function (i, opt) {
                        branch.append(
                        $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
                    });
                $("#tempid").hide();// hide message container at the time of success
               }
            });
        });

Upvotes: 0

Alex
Alex

Reputation: 1304

One approach is to make some hidden div (for example) and then show it when ajax starts and hide when it's finished, i.e in ajax callback function

<div id="loader" style="display:none;">Loading..please wait</div>

and the script

$("#state").change(function(){
    //show the loading stuff
    $('#loader').show();

          var state = $("#state").val();
          $.ajax({
                 async: false,
                 type: 'GET',
                 url: '../getBranches',
                 data : {state :state} ,
                 success: function(html) {

                        var branch = $("#branch");
                        branch.find('option').remove();
                        branch.append($('<option/>').val("").text("----Select"));
                        if(html == ""){
                            return false;
                        }
                        var opts = html.split(',');
                        $.each(opts, function(i, opt){
                            branch.append(
                                        $('<option/>').val(jQuery.trim(opt)).text(jQuery.trim(opt)));
                        });   
                        //hide the loading stuff
                        $('#loader').hide();
                 }
            }); 

});

Upvotes: 4

Related Questions