Implémenter un indicateur de chargement pour un appel AJAX jQuery

Question

J'ai une modale Bootstrap qui est lancée à partir d'un lien. Pendant environ 3 secondes, elle reste vide, tandis que la requête AJAX va chercher les données dans la base de données. Comment puis-je mettre en place une sorte d'indicateur de chargement ? Est-ce que twitter bootstrap fournit cette fonctionnalité par défaut ?

EDIT : code JS pour la modale

<script type="text/javascript">
  $('#myModal').modal('hide');
  $('div.divBox a').click(function(){
    var vendor = $(this).text();
    $('#myModal').off('show');
    $('#myModal').on('show', function(){             
      $.ajax({
        type: "GET",
        url: "ip.php",
        data: "id=" + vendor,
        success: function(html){
          $("#modal-body").html(html);
          $(".modal-header h3").html(vendor);
          $('.countstable1').dataTable({
            "sDom": "T<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
            "sPaginationType": "bootstrap",
            "oLanguage": {
              "sLengthMenu": "_MENU_ records per page"
            },
            "aaSorting":[[0, "desc"]],
            "iDisplayLength": 10,
            "oTableTools": {
              "sSwfPath": "swf/copy_csv_xls_pdf.swf",
              "aButtons": ["csv", "pdf"]
            }
          });
        }
      });
    });
  });
  $('#myModal').on('hide', function () {
    $("#modal-body").empty();
  });
</script>

Answer 1

J'ai résolu le même problème en suivant cet exemple :

Cet exemple utilise la bibliothèque JavaScript jQuery.

Tout d'abord, créez une icône Ajax en utilisant le Site AjaxLoad .
Ajoutez ensuite ce qui suit à votre HTML :

<img src="/images/loading.gif" id="loading-indicator" style="display:none" />

Et le texte suivant dans votre fichier CSS :

#loading-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
}

Enfin, vous devez vous connecter aux événements Ajax fournis par jQuery : un gestionnaire d'événements pour le début de la requête Ajax et un autre pour sa fin :

$(document).ajaxSend(function(event, request, settings) {
    $('#loading-indicator').show();
});

$(document).ajaxComplete(function(event, request, settings) {
    $('#loading-indicator').hide();
});

Cette solution provient du lien suivant. Comment afficher une icône animée pendant le traitement d'une requête Ajax ?

Answer 2

Je suppose que vous utilisez jQuery.get ou une autre fonction jQuery ajax pour charger la modale. Vous pouvez afficher l'indicateur avant l'appel ajax, et le cacher lorsque l'ajax est terminé. Quelque chose comme

$('#indicator').show();
$('#someModal').get(anUrl, someData, function() { $('#indicator').hide(); });

Answer 3

Il existe une configuration globale utilisant jQuery. Ce code s'exécute sur chaque requête ajax globale.

<div id='ajax_loader' style="position: fixed; left: 50%; top: 50%; display: none;">
    <img src="themes/img/ajax-loader.gif"></img>
</div>

<script type="text/javascript">
    jQuery(function ($){
        $(document).ajaxStop(function(){
            $("#ajax_loader").hide();
         });
         $(document).ajaxStart(function(){
             $("#ajax_loader").show();
         });    
    });    
</script>

Voici une démo : http://jsfiddle.net/sd01fdcm/

Answer 4

Un indicateur de chargement est simplement une image animée (.gif) qui s'affiche jusqu'à ce que l'événement "completed" soit appelé sur la requête AJAX. http://ajaxload.info/ offre de nombreuses options pour générer des images de chargement que vous pouvez superposer à vos modales. À ma connaissance, Bootstrap ne fournit pas cette fonctionnalité de manière intégrée.

Answer 5

Voici comment je l'ai fait fonctionner avec le chargement de contenu distant qui doit être rafraîchi :

$(document).ready(function () {
    var loadingContent = '<div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div>';

    // This is need so the content gets replaced correctly.
    $("#myModal").on("show.bs.modal", function (e) {
        $(this).find(".modal-content").html(loadingContent);        
        var link = $(e.relatedTarget);
        $(this).find(".modal-content").load(link.attr("href"));
    });    

    $("#myModal2").on("hide.bs.modal", function (e) {
        $(this).removeData('bs.modal');
    });
});

En gros, il suffit de remplacer le contenu de la modale pendant le chargement par un message de chargement. Le contenu sera ensuite remplacé une fois le chargement terminé.