Запрос MooTools не выполняется - PullRequest
Новая
       2

Запрос MooTools не выполняется

1 голос
/ 09 июня 2010

Я пытаюсь выполнить эту задачу с помощью MooTools.

Описание:

У меня три кнопки.Две кнопки снаружи myDiv и одна кнопка внутри myDiv.Нажатие на любую из этих кнопок инициирует запрос AJAX (передавая переменную button в "button.php") и обновляет содержимое myDiv на основе текста ответа.Итак, после обновления myDiv показывает Button3 ссылку + сообщение, показывающее, какая кнопка была нажата.

Проблема:

Кажется, все работает нормально, нопосле нескольких нажатий myDiv показывает loader.gif изображение и останавливается.После этого, если я подожду несколько минут, браузер иногда перестает работать (блокируется).Я заметил эту проблему с IE6.

Может кто-нибудь сказать, что означает эта проблема и можно ли ее избежать?

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'].']'; ?>

Ответы [ 2 ]

1 голос
/ 09 июня 2010

Ну, нет ничего плохого в самом коде.Вот что вы можете попробовать сделать:

  1. Используйте onSuccess вместо onComplete и console.log ответ - проверьте, происходит ли что-то подозрительное.Возможно, в какой-то момент вы получаете плохой ответ, который вызывает ошибку JS в IE (не пытается внедрить элемент блока внутри встроенного или какие-то несемантические странности?)

  2. На всякий случай используйте el.set('html', response) вместо el.innerHTML

  3. Проверьте, не получает ли Element.Delegation потеря в какой-то момент

  4. Создайте рабочий пример на http://jsfiddle.net, чтобы мы могли поэкспериментировать с кодом и отладить больше.

0 голосов
/ 10 июня 2010

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

работает нормально - обратите внимание, что я добавил логическое значение, в котором хранится нажатое состояние - он будет позволять обрабатывать только 1 ajax-запрос за раз в случае возникновения проблемы(очередь запросов).

, теперь это синхронно без синхронности.если вы ДОЛЖНЫ регистрировать каждый клик, независимо от того, как быстро, тогда вы можете использовать http://mootools.net/docs/more/Request/Request.Queue, но отключить вывод ретранслируемого элемента (кликабельный).

ps Недавно я написал класс для регистрации тепловых карт в mootools - который похож на то, что вы делаете, дайте мне знать, если это в направлении, в котором вы движетесь, и я буду рад поделиться кодом. 

(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();
    });
})();
...