JQuery - функция не работает с импортированными данными JSON

Question

У меня есть приложение, которое импортирует данные из JSON и генерирует (через JQuery append()) несколько html-списков, представляющих данные:

<ol id="iran">
    <li class="y1900"><p>Iran 1900 Revolution flag</p></li>
    <li class="y1906"><p>Iran 1906 Dictator flag</p></li>
    <li class="y1921"><p>Iran 1921 Revolution flag</p></li>
</ol>

У меня есть функция resizeFlags(), которая (чистодля пользовательского интерфейса) вычисляет ширину каждого элемента списка и изменяет размеры, чтобы уместить все на одном экране.

Функция resizeFlags() вызывается во время $(document).ready() (после загрузки JSON) и отлично работает с моим тестом (статический) html-файл, но не работает, когда тестовый html удаляется и тот же html добавляется с использованием данных JSON - добавленные списки правильно вводятся в DOM, но изменение размера не происходит.

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

Мне кажется, что это что-то очевидное, что я 'Вы упустили из виду - что мне не хватает?

Редактировать:

Вот код, который добавляет данные (я временно переместил resizeFlags() в эту функцию, обычно она вызывается сразу после:

function loadFlags() {
$.getJSON('data/flags.json',function(countriesdata){
    //for each flag
    $.each(countriesdata.countries,function(i,countries){
        $('#countries').append('<li id="'+countries.country+'">'+countries.country+'</li>')
        $('#flags').append('<ol id="'+countries.country+'"></ol>')
        $.each(countries.years,function(i,flagyears){
            $('#flags #'+countries.country).append('<li class="y'+flagyears.year+' '+flagyears.taxonomy+'"><p>'+flagyears.flagname+'</p></li>')
        });
    });
});
//resize from defaults
resizeFlags(totalYears);
}

Answer 1

Ajax-вызовы (например, $. GetJSON ) являются асинхронными.Это означает, что даже если вы сделаете вызов JSON непосредственно перед тем, как запустить функцию resizeFlags() в готовом документе, ответ, возможно, еще не поступил.

Единственный способ убедиться, что resizeFlags() вызывается в нужное время, это поместить его в обработчик успеха, например так:

$.getJSON('some-url', function(data) {
  //1. do something with the data (like build the list, append elements to the DOM)
  //...
  //2. call other UI stuff, after the elements created above are inserted in the DOM
  resizeFlags();
});

Следующее будет работать, только если JSONответ получен очень быстро (до выполнения большего количества кода):

$.getJSON(...);
//some more code
resizeFlags();

Answer 2

Вам нужно вызвать resizeFlags после завершения вызова getJSON, т.е. в конце функции вставки. В противном случае эти элементы не будут присутствовать при изменении размера

Answer 3

После добавления данных JSON вам потребуется вызвать функцию resizeFlags ().

Если resizeFlags () можно выполнить в CSS, вам не нужно будет снова вызывать resizeFlags ().

Answer 4

Вы вызываете resizeFlags(totalYears); вне функции обратного вызова запроса JSON.Это вызывается мгновенно даже до того, как данные JSON будут возвращены.Поместите эту строку в обратный вызов JSON после завершения каждого цикла