Method for displaying "loading" message

Question

I am using jquery and the getJSON method and I am wondering if there is a way to display a message saying loading before it loads my content. i know with the jquery ajax calls there is the before submit callbacks where you can have something but the getJSON only has like three options.

Any ideas?

Thanks,

Ryan

Answer 1

there is the custom .ajax "before" and "success" events which you can trigger.

Normally however, you would just do something like

  showLoadingAnimation(); 
  $.getJSON(  ..... function(){
      dontShowLoadingAnimation(); 
  }); 

or something similar.

Your question is however somewhat vauge, and its hard to ascertain what it is you want to do that you wouldn't already be able to do simply with javascript.

Answer 2

You can use ajaxSend and ajaxStop on the jQuery object to attach the appropriate event handlers as in this tutorial. This will bring up the progress indicator regardless of the type of request (all of the jQuery AJAX and JSON methods) and also hide the loading graphic if an error occurs.

Answer 3

Add this somewhere to your page:

<div id="loading" style="display:none">
    <img src="/images/ajax-loader.gif" alt="Loader" />&nbsp;Loading...
</div>
<script type="text/javascript">
    $().ready(function() {
        $("#loading").bind("ajaxSend", function() {
            $(this).show();
        }).bind("ajaxComplete", function() {
            $(this).hide();
        });
    });
</script>

You can style the loader-div as you like, e.g Google Mail-like loader:

#loading
 {
   position:fixed; 
   _position:absolute;
   top: 0;
   left:47%; 
   padding:2px 5px;
   z-index: 5000;
   background-color:#CF4342;
   color:#fff;
 }

Answer 4

Kent,

Something like that would work, just display a simpling div element with the display text Loading... then display my JSON results.

Ryan