La requête MooTools échoue

J'essaye d'accomplir cette tâche en utilisant MooTools.La requête MooTools échoue

Description:

J'ai trois boutons. Deux boutons à l'extérieur myDiv et un bouton à l'intérieur myDiv.
Un clic sur l'un de ces boutons initie une requête AJAX (en passant la variable button à "button.php") et met à jour le contenu myDiv en fonction du texte de la réponse.
Donc, après la mise à jour, myDiv montre Button3 lien + un message montrant le bouton qui a été cliqué.

Le problème:

Tout semble fonctionner très bien, mais après quelques clics, il arrive que myDiv montre loader.gif image et arrêts. Après cela, si j'attends quelques instants, le navigateur cesse parfois de fonctionner (se bloque).
J'ai remarqué ce problème avec IE6. Est-ce que quelqu'un peut dire ce que ce problème signifie et si cela peut être évité?

index.html

<html> 
<head> 
<script type="text/javascript" src="mootools/mootools-1.2.4-core-nc.js"></script> 
<script type="text/javascript" src="mootools/mootools-1.2.4.4-more.js"></script> 
<script type="text/javascript"> 
window.addEvent('domready', function() { 
    $("myPage").addEvent("click:relay(a)", function(e) { 
    e.stop(); 
    var myRequest = new Request({ 
     method: 'post', 
     url: 'button.php', 
     data: { 
     button : this.get('id'), test : 'test' 
     }, 
     onRequest: function() { 
     $('myDiv').innerHTML = '<img src="images/loader.gif" />'; 
     }, 
     onComplete: function(response) { 
     $('myDiv').innerHTML = response; 
     } 
    }); 
    myRequest.send(); 
    }); 
}); 
</script> 
</head> 
<body> 
<div id="myPage"> 
    <a href="#" id="button1">Button1</a> 
    <a href="#" id="button2">Button2</a> 
    <div id="myDiv"> 
    <a href="#" id="button3">Button3</a> 
    </div> 
</div> 
</body> 
</html>

button.php

<a href="#" id="button3">Button3</a> 
<br><br> 
<?php echo 'You clicked ['.$_REQUEST['button'].']'; ?>

Source

2010-06-09 acoder

Est-ce que ça arrive seulement avec IE? et +1 pour une question très bien écrite – Anurag

J'ai testé cet exemple de code avec Firefox 3.6.3 et Opera 10.53 et je n'ai remarqué aucun comportement anormal. Le problème se produit uniquement avec IE6. – acoder

Eh bien, il n'y a rien de mal avec le code lui-même. Voici ce que vous pouvez faire:

Utilisation onSuccess au lieu de onComplete et console.log la réponse - vérifier s'il y a quelque chose de suspect se passe. Peut-être que vous obtenez une mauvaise réponse à un moment donné qui provoque une erreur JS sur IE (ne pas essayer d'injecter un élément de bloc à l'intérieur d'une ligne un ou quelques bizarreries non-sémantiques?)
Juste au cas où l'utilisation el.set('html', response) au lieu de el.innerHTML
Vérifiez si Element.Delegation ne reçoit pas perdu à un moment donné
Créer un exemple de travail sur http://jsfiddle.net afin que nous puissions fouiner avec le code et le débogage plus.

Source

2010-06-09 19:06:15

OnSuccess et el.set ('html', réponse) n'ont pas résolu le problème. Je ne sais pas comment utiliser console.log ou comment vérifier si Element.Delegation ne se perd pas .. Comme vous l'avez dit, le problème peut être une mauvaise réponse. Plusieurs fois j'ai reçu le message suivant: "Bad Request Votre navigateur a envoyé une demande que ce serveur ne pouvait pas comprendre En outre, une erreur 404 Not Found a été rencontrée lors de la tentative d'utilisation d'un ErrorDocument pour gérer la demande." – acoder

Ajoutez 'console.log (response)' pour voir ce qui se passe exactement. Assurez-vous d'ouvrir les outils de développement d'IE (ou ce qu'il appelle). Effectuez une validation pour les réponses, si vous obtenez une réponse impaire, ne faites aucune opération supplémentaire sur cette réponse - sinon ce sera erroné. Un tas d'if-déclarations, ici et là suffira. –

http://www.jsfiddle.net/dimitar/VZuGz/

fonctionne très bien - Avis j'ai ajouté un booléen qui stocke l'état cliqué - il ne permettra le traitement de 1 demande ajax à un moment dans le cas qui était un problème (faire la queue des demandes). D'une certaine manière, ceci est maintenant synchrone sans être synchrone.Si vous devez vous connecter chaque clic, peu importe la vitesse, vous pouvez utiliser http://mootools.net/docs/more/Request/Request.Queue mais désactiver la sortie d'un élément qui est relayé (cliquable).

p.s. J'ai récemment écrit une classe pour l'enregistrement de heatmap dans mootools - qui fait semblable à ce que vous faites, laissez-moi savoir si c'est vers la direction dans laquelle vous vous dirigez et je serai heureux de partager le code.

(function() { 
    var clicked = false;  
    $("myPage").addEvent("click:relay(a)", function(e) { 
     e.stop(); 
     if (clicked) 
      return; // do 1 ajax at a time. 

     new Request.HTML({ 
      method: 'POST', 
      url: '/ajax_html_echo/', 
      data: { 
       button : this.get('id'), test : 'test', 
       html: '<a href="#" id="button3">Button3</a><br><br>You clicked id ' + this.get("id") 
      }, 
      onRequest: function() { 
       $('myDiv').set("html", 'loading...'); 
       clicked = true; 
      }, 
      onComplete: function() { 
       $('myDiv').set("html", this.response.text); 
       clicked = false; 
      } 
     }).send(); 
    }); 
})();

Source

2010-06-10 10:15:08

Répondre

Questions connexes