jQuery addClass () не работает из-за заданного идентификатора

#jquery

Вопрос:

У меня есть следующий код jQuery:

 $.ajax({
  type: "POST",
  url: "/search",
  data: $("form").serialize(),
  success: function(data) {
    $("#tab").addClass("loading"); // THIS LINE DOESN'T WORK
    // . . . LOAD SEARCH RESULTS HERE (USUALLY TAKES SEVERAL SECONDS) . . .
    $("#tab").removeClass("loading");
  }
});

И у меня есть следующий CSS:

 .loading {
  background: transparent url(../resources/images/loading.gif) no-repeat right center;
  text-indent: -1000px;
}

И у меня есть следующий соответствующий HTML:

 <div id="tab">
  <table id="searchResultsGrid"></table>
</div>

Я не могу заставить строку $("#tab").addClass("loading") работать. Наблюдая в FireBug, класс .loading никогда не добавляется к #tab объекту. Что я делаю неправильно?

Спасибо!

1. как выглядит HTML-код? почему вы добавляете класс загрузки ПОСЛЕ успешного выполнения ajax-вызова? вы должны добавить его прямо перед вызовом ajax, а затем удалить его в функции успеха

2. может быть, это связано с тем, что вы добавляете и удаляете одновременно?

3. Откуда вы знаете, что это не работает? Выполняется ли обратный вызов функции success? Добавьте оповещение внутри блока успеха, чтобы увидеть, получаете ли вы оповещение. Можете ли вы показать html для элемента tab?

4. Фактическая загрузка результатов поиска занимает несколько секунд, и именно для этого я хочу показать прогресс.

Ответ №1:

Попробуйте это вместо этого. Вероятно, происходит то, что он добавляет и удаляет loading класс достаточно быстро, чтобы он действовал сам по себе

 // add the class before the ajax call
$("#tab").addClass("loading");

$.ajax({
  type: "POST",
  url: "/search",
  data: $("form").serialize(),
  success: function(data) {
    // . . . LOAD SEARCH RESULTS HERE . . .
  }
  complete: function(data) {
    // remove the class on complete, not success, in case of an error
    $("#tab").removeClass("loading");
  }
});

1. Вы также можете использовать beforeSend для добавления класса перед запуском ajax

2. Добавление функции обратного вызова «complete» и перемещение «addClass()» за пределы обратного вызова «success» сделали свое дело. Спасибо!

Ответ №2:

Трудно сказать, не видя HTML, но одна вещь, которая выделяется, заключается в том, что вы добавляете класс, как только вызов ajax возвращается с успехом. Попробуйте изменить на это:

 $("#tab").addClass("loading");

$.ajax({
  type: "POST",
  url: "/search",
  data: $("form").serialize(),
  success: function(data) {
    // . . . LOAD SEARCH RESULTS HERE . . .
    $("#tab").removeClass("loading");
  }
});

Ответ №3:

Вы должны установить класс до вызова ajax, а затем удалить его в функции успеха. Что вы делаете, так это устанавливаете его, а затем удаляете в том же процессе выполнения кода. Класс не будет визуально обновляться до тех пор, пока код не завершит выполнение, и в этот момент вы уже удалили класс.

Ответ №4:

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