web-dev-qa-db-fra.com

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, elle reste à blanc alors 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? Twitter bootstrap 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>
javascriptjqueryhtmlajax
84
devcoder

J'imagine que vous utilisez jQuery.get ou une autre fonction ajax de jQuery pour charger le modal. Vous pouvez afficher l'indicateur avant l'appel ajax et le masquer une fois l'ajax terminé. Quelque chose comme

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

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

Cet exemple utilise la bibliothèque JavaScript jQuery.

Commencez par créer une icône Ajax en utilisant le site AjaxLoad .
Ajoutez ensuite ce qui suit à votre code 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énement pour le début de la demande Ajax, et un pour le moment où elle se termine:

$(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 lors du traitement d'une requête Ajax

161
leansy

Il y a 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/

28
ajaristi

Un indicateur de chargement est simplement une image animée (.gif) qui est affichée jusqu'à ce que l'événement terminé soit appelé sur la demande AJAX. http://ajaxload.info/ offre de nombreuses options pour générer des images de chargement que vous pouvez superposer à vos modaux. À ma connaissance, Bootstrap ne fournit pas la fonctionnalité intégrée.

14
HenryZhang

Voici comment j'ai réussi à charger du 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');
    });
});

Fondamentalement, il suffit de remplacer le contenu modal pendant son chargement par un message de chargement. Le contenu sera alors remplacé une fois son chargement terminé.

6
Rhys Stephens

Voici comment 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>
2
Mathias