Method for displaying "loading" message

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?

Answers


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.


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;
 }

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.


Kent,

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

Ryan


Need Your Help

Enable Button during certain day & time

javascript button

I am trying to enable a button ONLY during 5PM to 10PM every day, except Monday.