Problème lors de la manipulation DOM (blockUI ou alert()) lors d'une requête onchange - empêche le déclenchement d'un autre événement

EDIT: J'ai supposé à tort que cela était dû à blockUI(); J'utilisais le fichier console.log de Firebug pour consigner le message, mais pour l'exemple ici, j'ai changé pour alerter afin que vous n'ayez pas besoin de répliquer firebug. Une fois que je l'ai testé à nouveau, j'ai été en mesure de supprimer blockUI et l'onclick n'a pas tiré pas de tir. Le problème semble être à chaque fois que le DOM est en train de changer ou que le feedback l'empêche de déclencher l'onclick.Problème lors de la manipulation DOM (blockUI ou alert()) lors d'une requête onchange - empêche le déclenchement d'un autre événement

J'ai des problèmes avec ~~jQuery blockUI plugins~~ et le déclenchement de deux événements qui sont (je pense, sauf si je le perds) sans rapport.

Fondamentalement, j'ai des zones de texte avec des événements onchange liés à eux. L'événement est responsable du blocage de l'interface utilisateur, de l'appel ajax et du succès du déblocage de l'interface utilisateur. L'ajax enregistre le texte en mémoire. L'autre contrôle est un bouton avec un événement onclick qui bloque également l'interface utilisateur, déclenche une requête ajax en enregistrant ce qui est en mémoire dans la base de données et en cas de succès débloque l'interface utilisateur.

Les deux fonctionnent correctement séparément. Le problème survient lorsque je déclenche l'onchange en cliquant sur le bouton. Alors seulement l'onchange est tiré et onclick est ignoré.

Je peux changer le texte dans la case à cocher, cliquer sur le lien et SI jQuery.blockUI() est présent (ou une alerte), l'onchange seul est déclenché et l'enregistrement n'est jamais appelé. Si je supprime le blockUI (ou une alerte), les deux fonctions sont appelées.

Voici un exemple complet où vous pouvez voir le problème. S'il vous plaît noter les setTimeout sont là quand j'essayais de simuler le retard ajax mais le problème se passe sans elle.

Pour répliquer un élément dans la zone de texte, cliquez sur Enregistrer. Les deux événements devraient être déclenchés mais seul l'onchange est déclenché.

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script> 
    <script> 
     function doSomething(){ 
      //$.blockUI(); 
      alert("doing something"); 
      //setTimeout(function(){ 
       //$.unblockUI(); 
      //},500); 
     } 

     function save(){ 
      //$.blockUI(); 
      console.log("saving"); 
      //setTimeout(function(){ 
      //$.unblockUI(); 
      //}, 1000); 
     } 

    </script> 
</head> 

<body> 
    <input id="textbox" type="text" onchange="doSomething();"> 
    <a id="link" href="#"onclick="save()">save</a> 
</body> 
</html>

Source

2010-05-06 jfrobishow

Il semblerait que le problème n'est pas l'appel blockUI mais jouer avec le DOM dans doSomething(); Mon exemple local d'origine utilisant console.log() de Firebug au lieu d'alertes. J'ai modifié mon exemple pour supprimer complètement jQuery.blockUI et n'utiliser qu'une alerte ... le problème persiste. – jfrobishow

Une seule boucle d'événements ne se produira à un moment donné dans l'environnement d'une seule page. Si vos appels ajax sont synchrones, alors qu'un événement est en cours de traitement alors c'est tout ce qui se passera. Si le navigateur devait déclencher une autre boucle d'événement, eh bien, il ne serait pas monothread. Mais ça l'est, alors ce n'est pas le cas.

Source

2010-05-06 19:18:34 Pointy

J'ai supprimé l'appel ajax de l'exemple et utilisé une alerte à la place qui produit le même résultat (le second événement ne se déclenche pas). Votre explication est logique puisque l'alerte attend la saisie de l'utilisateur, bloquant ainsi le thread ... mais le prochain événement ne devrait-il pas être mis en file d'attente? – jfrobishow

Eh bien c'est à la hauteur du navigateur ... – Pointy

Puis onfocus ne causerait pas la même chose ?, Comme vous pouvez le voir dans mon autre poste onfocus est tiré. – jfrobishow

Le mot "fixed it" suivant utilisant onfocus pour le lien et l'événement est déclenché. Avec un onclick, ça ne l'est pas.

Ce travail:

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script> 
    <script> 
     function doSomething(){ 
      alert("blocking UI"); 
      console.log("do something"); 
      //alert("doing something"); 
      //setTimeout(function(){ 
       //$.unblockUI(); 
      //},500); 
     } 

     function save(){ 
      //$.blockUI(); 
      console.log("saving"); 
      //setTimeout(function(){ 
      //$.unblockUI(); 
      //}, 1000); 
     } 

     function cachebtn() 
     { 
      console.log("cache bouton"); 
     } 
    </script> 
</head> 

<body> 
    <input id="textbox1" type="text" onchange="doSomething();"> 
    <input id="textbox2" type="text" onchange="doSomething();"> 
    <a id="link" href="#" onfocus="save()">save</a> 
</body> 
</html>

Cela ne fait pas, le seul autre est le onclick qui ne se déclenche pas lorsque le onchange précède.

<html> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script src="http://github.com/malsup/blockui/raw/master/jquery.blockUI.js?v2.31"></script> 
    <script> 
     function doSomething(){ 
      alert("blocking UI"); 
      console.log("do something"); 
      //alert("doing something"); 
      //setTimeout(function(){ 
       //$.unblockUI(); 
      //},500); 
     } 

     function save(){ 
      //$.blockUI(); 
      console.log("saving"); 
      //setTimeout(function(){ 
      //$.unblockUI(); 
      //}, 1000); 
     } 

     function cachebtn() 
     { 
      console.log("cache bouton"); 
     } 
    </script> 
</head> 

<body> 
    <input id="textbox1" type="text" onchange="doSomething();"> 
    <input id="textbox2" type="text" onchange="doSomething();"> 
    <a id="link" href="#" onclick="save()">save</a> 
</body> 
</html>

Source

2010-05-06 19:51:33 jfrobishow

Problème lors de la manipulation DOM (blockUI ou alert()) lors d'une requête onchange - empêche le déclenchement d'un autre événement

Répondre

Questions connexes