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

Need Your Help

Prevent form from receiving mouse clicks

c# winforms onclick

I am trying to block the user from clicking a button multiple times while data is being processed after it was started by the initial click.

Nav Bar Item in XIB that Presents a StoryBoard Tab Bar Root View Controller Segue

ios objective-c xcode uitabbarcontroller uinavigationbar

My App has a lot going on with it, lol. On my Main Menu, if you click "Chat", it will take you to the Chat XIB.