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

J'ai un modal Bootstrap qui est lancé à partir d'un lien. Pendant environ 3 secondes, il reste vide, tandis que la requête AJAX récupère les données de la base de données. Comment puis-je implémenter une sorte d'indicateur de chargement? Le bootstrap de Twitter fournit-il cette fonctionnalité par défaut?

EDIT: code JS pour modal

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

Je suppose que vous utilisez jQuery.get ou une autre fonction jQuery ajax pour charger le modal. Vous pouvez afficher l'indicateur avant l'appel ajax et le masquer à la fin de l'ajax. Quelque chose comme

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

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 ce qui suit 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 pour la fin:

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

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

Cette solution est à partir du lien suivant. Comment afficher une icône animée pendant le traitement de la requête Ajax

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/

Un indicateur de chargement est simplement une image animée (.gif) qui s'affiche jusqu'à ce que l'événement terminé 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 sur vos modaux. À ma connaissance, Bootstrap ne fournit pas la fonctionnalité intégrée.

Voici comment je l'ai fait fonctionner avec le chargement de contenu distant qui doit être actualisé:

$(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, remplacez simplement le contenu modal lors du chargement par un message de chargement. Le contenu sera alors remplacé une fois le chargement terminé.

C'est ainsi que j'ai réalisé l'indicateur de chargement par un Glyphicon:

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>

    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/bootstrap.min.js"></script>

    <style>
        .gly-ani {
          animation: ani 2s infinite linear;
        }
        @keyframes ani {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(359deg);
          }
        }
    </style>  
</head>

<body>
<div class="container">

    <span class="glyphicon glyphicon-refresh gly-ani" style="font-size:40px;"></span>

</div>
</body>

</html>