0

Выгружаю данные (li) в ul через ajax - несколько элементов по которым можно кликать, в следствие чего элементы меняют цвет. Данные выгружаются отлично, но, дело в том, что после того как они появились, изменение цвета по клику не происходит. Смотрел в F12 - там элементы li как бы мигают (возможно до конца загружаются). Как только они промигаются, все работает. Если поставить async:false, то при выгрузке данных все зависает, но как только появляются данные все работает как надо. Скажите пожалуйста, можно ли в момент зависания выводить какую нибудь гифку (без разницы где) имитирующую загрузку? А после загрузки удалить ее. Всем заранее спасибо за помощь!

        j("#dtpk").bind("DOMSubtreeModified", function(){
            var date = j("#dtpk").val();
            j("ul").addClass("loading");
            j.ajax({
                type: "POST",
                url: ajax_bind.ajaxurl,
                async:true,
                data: { action: "bind", date: date },
                beforeSend: function(){
                    j("ul").addClass("loading");
                },
                success: function(html){
                    j("#time-list").html(html); //<ul id="time-list">
                },
                complete: function(){
                    j("ul").removeClass("loader");
                }
            });
        });
0

1 ответ 1

0

Используйте beforeSend для отображения индикатора и success для скрытия.

$.ajax({
           type: "POST",
           url: "script.php",
           data: "param=val&param=val",
           beforeSend: function() {
              $("#loading-image").show();
           },
           success: function(msg) {
              $("#"+div_id).html(divIdHtml + msg);
              $("#loading-image").hide();
           }
      });
5
  • Уже пробовал такой вариант, и с добавлением compete - ничего не меняется..Визуально данные появляются в течение 1-2 секунд, но функционал отрабатывает через 5-7.
    – Yuriy
    3 июл 2017 в 5:12
  • @YuriGo добавьте $("#loading-image").show(); переда самим $.ajax({
    – JVic
    3 июл 2017 в 5:55
  • гифка появляется одновременно с элементами li (li поверх гифки) - результат тот же самый..
    – Yuriy
    3 июл 2017 в 6:03
  • 1
    Тогда добавьте примеры кода в вопрос
    – JVic
    3 июл 2017 в 6:05
  • Добавил, посмотрите пожалуйста
    – Yuriy
    3 июл 2017 в 6:10

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.