JQuery Load JSON

Question

У меня небольшая дилемма, которая, надеюсь, должна быть легко решена.

Я загружаю некоторые данные, используя jQuery / JSON / PHP - по сути, загружаемые данные - это несколько <li> элементов,

Следующий код работает правильно:

function load_list() {
$.getJSON('json/load.php', function(data) {
            $.each(data, function(k, v){                                 
            $("#my_div").append('
                                         <li> \
                                          <div> \
                                           <input type="checkbox"> \
                                          </div> \
                                          <div>'+v.due_date+'</div> \
                                          <h3> \
                                           <span>'+v.title+'</span> \
                                           </h3> \
                                          </li> \
                                                  ');
                                        });
});
}

Однако, скажем, я хочу обновить "#my_div" и вызывать функцию позже, скажем, каждые 20 секунд.Если я повторно вызову функцию выше, она фактически добавляет элементы снова, таким образом дублируя результаты.

У меня вопрос (простите, что я не знал): как мне переписать указанную выше функцию, чтобы загрузить все события и обновить ее, а также установить HTML-код "#my_div" как новыйи не дублировать?

Большое спасибо.

Answer 1

Вызов $("#my_div").empty() в начале анонимной функции, содержащей вызов .each().

Answer 2

Додинас, вы хотите использовать следующее:

$("#my_div").html('<li>...</li>');

с помощью метода html () вставляет html.

Answer 3

Используйте тег html('<li>...') - он заменяет контент, а не добавляет его.

Answer 4

Используйте html вместо append

Answer 5

Вы можете вызвать функцию html , чтобы установить HTML-содержимое элемента, например:

        $("#my_div").html('
                                     <li> \
                                      <div> \
                                       <input type="checkbox"> \
                                      </div> \
                                      <div>'+v.due_date+'</div> \
                                      <h3> \
                                       <span>'+v.title+'</span> \
                                       </h3> \
                                      </li> \
                                              ');