1

Собственно есть html элемент на странице, после него делаю .load() html файла который содержит таблицу, после подгрузки таблицы мне необходимо собрать данные в массив. Делаю так:

var availableTags = new Array();
$(document).ready(function() {

  $(".price_table_body").hide().load("price/1.html").fadeIn('fast').promise().done(function() {

    $('.price_table_boxes label').each(function() {
      var text = $(this).data('name');
      var cat = $(this).data('category');
      var obj_id = $(this).attr('id');
      availableTags.push({
        value: text,
        data: {
          category: cat,
          id: obj_id
        }
      });
    });
    console.log(availableTags);

    $('.price_table_body input').on('change', function() {
      $('.price_table_boxes input').not(this).prop('checked', false);
      console.log('click');
    });

    searcher();
  });
});

Всё вроде бы работает, но иногда (из 15 обновлений 1-3 раза) он не создаёт массив.

Благодаря алертам удалось выяснить что иногда each выполняется до того как на странице отобразилось содержимое из подгружаемого файла.

Пробовал еще таким способом без promise:

var availableTags = new Array();
$(document).ready(function() {

  $(".price_table_body").hide().load("price/1.html").fadeIn('fast', function() {

    $('.price_table_boxes label').each(function() {
      var text = $(this).data('name');
      var cat = $(this).data('category');
      var obj_id = $(this).attr('id');
      availableTags.push({
        value: text,
        data: {
          category: cat,
          id: obj_id
        }
      });
    });
    console.log(availableTags);

    $('.price_table_body input').on('change', function() {
      $('.price_table_boxes input').not(this).prop('checked', false);
      console.log('click');
    });

    searcher();
  });
});

При таком раскладе еще хуже, из 10 обновлений страницы 2-4 раза срабатывает не верно и не создаёт массива.

Никак не могу понять что делаю не так.

1 ответ 1

1

Метод load возвращает jQuery-объект (поэтому вы можете вызвать fadeIn), а не Promise, так что нет абсолютно никаких гарантий того, что на момент вызова fadeIn данные уже будут загружены.

Ожидать окончания загрузки нужно через complete-callback:

$(".price_table_body").hide().load("price/1.html", function() {
    $(".price_table_body").fadeIn("fast", function() {
        ...
    });
});
1
  • 1
    Блин, почему-то не подумал (и не почитал документацию) что у load так же есть callback как и у fadeIn и прочих... Спасибо!
    – Nilsan
    Commented 17 окт. 2018 в 11:59

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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