CODEWITHSUNDEEP
phpjqueryajax
Mrinal G.
Mrinal G.

Reputation: 11

AJAX loading message

I want to display a loading message while retrieving results via AJAX, but I can't. Can anybody help please?

<script type="text/javascript">

$(function() {

    $(".search_button").click(function() {
        // getting the value that user typed
        var searchString    = $("#search_box").val();
        // forming the queryString
        var data            = 'search='+ searchString;

        // if searchString is not empty
        if(searchString) {
            // ajax call
            $.ajax({
                type: "POST",
                url: "do_search.php",
                data: data,
                beforeSend: function(html) { // this happens before actual call
                    $("#results").html('');
                    $("#search_result_box").show();
                    $("#searchresults").show();
                    $(".word").html(searchString);
               },
               success: function(html){ // this happens after we get results
                    $("#results").show();
                    $("#results").append(html);
              }
            });   
        }
        return false;
    });
});
</script>

Upvotes: 0

Views: 503

Answers (2)

Thomas
Thomas

Reputation: 1420

Why not using beforeSend and success methods to show/hide a loading message 

beforeSend: function(html) { // this happens before actual call

  // DO SOMEHTING HERE TO SHOW YOUR LOADING MESSAGE AS $('#loading').show();

  $("#results").html('');
  $("#search_result_box").show();
  $("#searchresults").show();
  $(".word").html(searchString);
},
success: function(html){ // this happens after we get results

  // DO SOMEHTING HERE TO HIDE YOUR LOADING MESSAGE AS $('#loading').hide();

  $("#results").show();
  $("#results").append(html);
}

rgds

Upvotes: 2

Martin Bean
Martin Bean

Reputation: 39399

I would change the message before firing the AJAX request. So, on click or on submit:

<script>
$('form').on('submit', function(e) {
    e.preventDefault();
    $('#response').html('<p>Loading&hellip;</p>');
    $.post($(this).attr('action'), $(this).serialize(), function(response) {
        // do something here with the response
        $('#response').html('<p>Request successful.</p>');
    });
});
</script>

Upvotes: 2

Related Questions