Ajout d'une image de chargement à un poste jquery ajax

Question

J'ai le javascript suivant pour poster un formulaire via ajax sans rafraîchir l'écran. Depuis le poste prend un peu de temps, je voulais ajouter une image de chargement pendant le traitement. Je vois this article mais il semble que lister.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#contact form').live('submit', function() { 

      $.post($(this).attr('action'), $(this).serialize(), function(data) { 

       $("#contact").replaceWith($(data)); 

      }); 
      return false; 
     }); 
    }); 
</script> 

Answer 1

Il suffit d'ajouter quelques appels à masquer/afficher votre écran de chargement/div, quelle que soit:

<script type="text/javascript"> 
    $(function() { 
     $('#contact form').live('submit', function() { 
      $("#Loading").fadeIn(); //show when submitting 
      $.post($(this).attr('action'), $(this).serialize(), function(data) { 
       $("#contact").replaceWith($(data)); 
       $("#Loading").fadeOut('fast'); //hide when data's ready 
      }); 
      return false; 
     }); 
    }); 
</script> 

<div id="Loading">I'm loading, image here, whatever you want</div> 

Answer 2

Je mets cela en sorte que soit montre à chaque appel ajax, peu importe laquelle je (J'ai plusieurs)

/* show the message that data is loading on every ajax call */ 
    var loadingMessage = 'Please wait loading data for ' + defaultPageDoctor; 
    $(function() 
    { 
     $("#Errorstatus") 
     .bind("ajaxSend", function() 
     { 
      $(this).text(loadingMessage); 
      $(this).show(); 
     }) 
     .bind("ajaxComplete", function() 
     { 
      $(this).hide(); 
     }); 
    }); 

Just create an element with the #ErrorStatus id such as: 

    <div class="newProcedureErrorStatus ajaxLoading " id="newProcedureErrorStatus"> 
     <span id="Errorstatus" class="ui-state-error-text newProcedureErrorStatusText"></span> 
     <span id="Errorstatus2" class="ui-state-error-text newProcedureErrorStatusText"> 
     </span> 
    </div> 

Now for the bonus rounds, you can use this area to put other messages up, I also include a timer: 

/* show message for interval */ 
var saveMessageText = 'Saving...'; 
function ShowStatus(saveMessage, message, timeInMilliseconds) 
{ 
    var errorMessage = $("#Errorstatus"); 
    if (saveMessage) 
    { 
     errorMessage.show(); 
     //var myNumber = 0; 
     var myInterval = window.setInterval(function() 
     { 
      message = message + '...'; 
      errorMessage.text(message); 
      errorMessage.show(); 
     }, 1000); 
     window.setTimeout(function() 
     { 
      clearInterval(myInterval); 
      errorMessage.hide(); 
     }, timeInMilliseconds); 
    } 
    else 
    { 
     errorMessage.text(message); 
     errorMessage.show(); 
     window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds); 
    }; 
}; 

utiliser comme si:

ShowStatus(true, 'Save Failed with unknown Error', 4000);