JQuery AJAX-запрос не срабатывает при последующих событиях - PullRequest
Новая
       20

JQuery AJAX-запрос не срабатывает при последующих событиях

2 голосов
/ 07 февраля 2009

У меня есть функция jQuery, с которой у меня небольшая проблема: 

$(function() {
  $("a.CompletedCheckBox").click(function() {
    if($(this).hasClass("CheckedCompletedCheckBox")) {
      $(this).removeClass("CheckedCompletedCheckBox");
    } else {
      $(this).addClass("CheckedCompletedCheckBox");
    }
      $.get("/Tasks/Complete/" + this.id, "", function() {});
  });
});

При первом нажатии на ссылку функция события работает, как и ожидалось. Однако каждый раз, когда я нажимаю на ссылку, класс корректно переключается, однако запрос $ .get не запускается.

Есть идеи, почему запрос к серверу запускается только в первый раз?

РЕДАКТИРОВАТЬ: Вот разметка, которую я использую: 

<table>
  <tr>
    <th>
      Header Text
    </th>
    ... and so on ...
  </tr>
  <% foreach (var item in Model as Item[])
  {%>
  <tr>
    <td>
      <a href="#" 
         class='<%= "CompletedCheckBox " + (item.Complete ? "CheckedCompletedCheckBox" : "") %>' 
         id='<%= item.ID %>'></a>
    </td>
    ... and so on ...
  </tr>
  <% } %>
</table>

РЕДАКТИРОВАТЬ 2: Это отлично работает в FireFox, но не в IE7. Я хотел бы поддержать IE в своем приложении, поэтому мне нужно выяснить, почему это не работает для IE.

Я загружаю jQuery из Google (http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js),, если это имеет какое-либо значение.

Ответы [ 7 ]

4 голосов
/ 09 февраля 2009

IE, вероятно, кэширует результат запроса $ .get (). Попробуйте добавить метку времени к URL-адресу запроса на получение, например: 

var myDate = new Date();
var timestamp = myDate.getTime();
$.get("/Tasks/Complete/" + this.id + '?t=' + timestamp);
3 голосов
/ 07 февраля 2009

Только одна вещь, вы можете упростить один аспект: 

$(function() {
  $("a.CompletedCheckBox").click(function() {
    $(this).toggleClass("CheckedCompletedCheckBox");
    $.get("/Tasks/Complete/" + this.id, "", function() {});
  });
});

Ваш вызов .get () выглядит нормально. Помните, что браузеры будут ограничивать количество одновременных запросов Ajax (обычно до 2 или менее). Вы уверены, что ваш звонок возвращается? Рассматривали ли вы вместо этого вызов .ajax () и указали ли вы тайм-аут и / или обработчик ошибок, чтобы вы могли видеть, что происходит?

РЕДАКТИРОВАТЬ: Попробовал следующий код, и он работает отлично. У тебя что-то еще происходит. 

<html>
<head>
  <title>Test Get</title>
  <style type="text/css">
    .CompletedCheckBox { background-color: yellow; display: block; }
    .CheckedCompletedCheckBox { border: 2px solid black; }
  </style>
</head>
<body>
</body>
<a id="abcd" class="CompletedCheckBox">Click me</a>
<script src="http://www.google.com/jsapi"></script>
<script>
  google.load("jquery", "1.3.1");
  google.setOnLoadCallback(function() {
      $(function() {
          $("a.CompletedCheckBox").click(function() {
                $(this).toggleClass("CheckedCompletedCheckBox");
                $.get("/test2.php?id=" + this.id, "", function() {});
              });
      });
    });
</script>
</html>

и 

<?php
error_log("User pressed link for id $id");
?>

Ну, идентификатор не был получен, но журнал ошибок был при каждом клике.

1 голос
/ 07 февраля 2009

У меня не было проблем с выполнением вашего кода локально. Каждый GET будет возвращаться, даже после установки Thread.Sleep на сервере.

Ваш URL "/ Tasks / Complete /" возвращает что-нибудь? HTML, обычный текст, JSON?

Какой браузер вы используете? Эта проблема сохраняется во всех браузерах? Я бы попробовал использовать FireFox с надстройкой FireBug , чтобы увидеть в консоли, что возвращается.

Дайте нам знать, что вы найдете!

0 голосов
/ 05 октября 2009

это сработало для меня: Response.Expires = -1;

0 голосов
/ 09 июля 2009

Я знаю, что это старый вопрос ... но IE7 слишком усердно работает с кэшированием объекта HTTPXML ... поэтому вам нужно либо:

  • поместите некоторые случайные данные в конце вашего URL (как сказал rmurphy)
  • вместо этого используйте метод $ .post (), так как IE не кэширует POST
  • установить таймауты кеша в ответе сервера, чтобы IE не кешировал: 
    Cache-Control = "no-cache"
    Pragma = "no-cache"
    Expires = "0"
0 голосов
/ 07 февраля 2009

Да, выложите демоверсию, пожалуйста?

Я пытался использовать отрывок из вашего кода, но он отлично работает.

Полагаю, вы можете удалить () -ing a.CompletedCheckBox из DOM?

Я столкнулся с проблемой в 1.2.6, когда вы удаляете (и добавляете) некоторый элемент, событие никогда не запускается снова.

Это задокументировано здесь:

http://docs.jquery.com/Manipulation/remove#expr

Поскольку вы используете 1.3.1, вы можете попробовать использовать live ().

Вот демо:

http://waynekhan.com/sandbox/index.php/demo/get

Ссылка в красном поле всегда будет работать, потому что мы не вызываем remove (). Ссылка в синем поле работает только один раз, потому что мы вызываем remove (). Это может быть вашей проблемой. Ссылка в зеленом поле работает, потому что мы вызываем remove (), но мы используем live (), а не click ().

0 голосов
/ 07 февраля 2009

Это точный код, который вы выполняете? Таким образом, a.CompletedCheckBox также будет иметь класс CheckedCompletedCheckBox?

Кажется, что это должно работать ... но если вы используете другие селекторы в своем реальном коде, я мог бы увидеть, как это может пойти не так.

У вас есть образец разметки?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...