jQuery Girl
  1. jQuery Girl
  3. jQuery Ajax image de chargement ne se charge pas sur appel ajax
Intereting Posts
Deux demandes ajax sur le même événement au même moment. Quel devrait être le comportement typique? en quoi c’est différent si la requête est synchrone jQuery: alternative au datepicker Coloration de ligne alternative dans jQuery Impossible de remplacer la méthode renderItem auto-complétée par l’interface utilisateur jQuery plusieurs fois Événement Flot pour les mises à jour de plage en réponse à un panoramique / zoom ColorAxis avec HighChart ne fonctionnant pas comme prévu avec différents ensembles de bibliothèque charger sous certaines conditions du code HTML en fonction de la taille de la fenêtre Extrait un élément HTML du domaine croisé comment faire la différence entre soumettre javascript et cliquer manuellement sur soumettre JQuery Sélection de lignes de table avec case à cocher jQuery $ .getJSON – Comment parsingr un appel d’API REST flickr.photos.search? Pop up Bootstrap modal lors d’un appel AJAX réussi Les tabs jQuery dans les tabs ne s’affichent pas correctement Evénement chronométré jQuery JQuery attend la fin de l’animation avant de commencer une nouvelle

jQuery Ajax image de chargement ne se charge pas sur appel ajax

J’utilise l’extrait de code jQuery ci-dessous pour une image de chargement ajax que j’utilise sur de nombreux sites.

jQuery: 

$(".loading").hide().ajaxStart(function() { $(this).show(); }).ajaxStop(function() { $(this).hide(); });

Exemple d’appel Ajax (fonctionne comme prévu et renvoie les données correctes): 

 $('#list').change(function() { var vCID = 1; if ($.sortingm(vCID) && vCID != 0) { var vData = {aid:1001,id:vCID}; $.ajax( { url : "ajax.php", type: "POST", data : vData, success: function(data, textStatus, jqXHR) { $('#itemList').html(data); } }); } });

HTML: 

 
 

CSS: 

 .loading { width: 40px; height: 40px; margin: 10px auto 0 auto; background: url('images/loading.gif') no-repeat; }

Le code HTML est affecté par jQuery en tant display: none n’est ajouté au chargement de la page, il n’y a pas d’erreurs et si je change d’ display: block sur le code HTML via firebug, l’image loading.gif apparaît.

Toute aide grandement appréciée.

vous pouvez le faire avec les méthodes beforeSend et complete : 

  $.ajax({ url: "ajax.php", type: "POST", data: vData, beforeSend: function () { $(".loading").show(); // <----show before sending }, success: function (data, textStatus, jqXHR) { $('#itemList').html(data); }, complete: function () { $(".loading").hide(); // on complete of ajax hide it. } });

Peut-être essayer de le changer pour 

 $(".loading").hide(); $(document).ajaxStart(function() { $(".loading").show(); }).ajaxStop(function() { $(".loading").hide(); });

Au lieu de l’enchaîner à $('.loading') qui ne peut pas déclencher un ajaxStart() .