Boîte de dialogue modale jQuery sur l'événement ajaxStart

Question

J'essaie d'utiliser une boîte de dialogue modale UI jQuery comme indicateur de chargement via les événements ajaxStart, ajaxStop/ajaxComplete. Lorsque la page se déclenche, un gestionnaire Ajax charge des données et la boîte de dialogue modale s'affiche correctement. Cependant, il ne masque ni ne ferme jamais la boîte de dialogue lorsque l'événement Ajax est terminé. C'est un très petit morceau de code du serveur local qui est retourné, donc l'événement Ajax réel est très rapide.

Voici mon code actuel pour la div modale:

 $("#modalwindow").dialog({ 
       modal: true, 
       height: 50, 
       width: 200, 
       zIndex: 999, 
       resizable: false, 
       title: "Please wait..." 
     }) 
     .bind("ajaxStart", function(){ $(this).show(); }) 
     .bind("ajaxStop", function(){ $(this).hide(); }); 

L'événement Ajax est juste une vanilles $.ajax({}) appel de méthode GET. Basé sur une recherche ici et Google, j'ai essayé de modifier le gestionnaire ajaxStop pour utiliser $("#modalwindow").close(), $("#modalwindow").destroy(), etc (#modalwindow désignée ici pour donner un contexte explicite).

J'ai également essayé d'utiliser le standard $("#modalwindow").dialog({}).ajaxStart(....

Dois-je relier les événements à un objet différent? Ou les appeler à partir de l'événement complet $.ajax()?

Je devrais mentionner, je suis en train de tester sur la dernière IE8, FF 3.6 et Chrome. Tous ont le même effet/similaire.

Answer 1

a trouvé la réponse:

$("#modalwindow").dialog({ 
      modal: true, 
      height: 50, 
      width: 200, 
      zIndex: 999, 
      resizable: false, 
      title: "Please wait..." 
    }) 
    .bind("ajaxStart", function(){ 
     $(this).dialog("open"); }) 
    .bind("ajaxStop", function(){ 
     $(this).dialog("close"); 
    }); 

Note à moi: RTFM.

Bien sûr dans tout cela, maintenant je me rends compte qu'il s'ouvre et se ferme si rapidement qu'il est inutile. Eh bien, j'espère que quelqu'un trouvera cela utile.

Answer 2

"Whenever an Ajax request completes, jQuery checks whether there are any other outstanding Ajax requests." Avez-vous d'autres demandes AJAX en cours d'exécution en même temps? Vous aurez besoin d'utiliser ajaxComplete ou une option de rappel à .ajax() à la place, pour obtenir l'achèvement d'un seul.