Как мне обновить элемент из временной шкалы vis.js, когда набор данных загружается асинхронно?

Question

У меня есть рабочий скрипт, который показывает временную шкалу vis.js, которая загружается и устанавливается в обратном вызове ajax. При щелчке элемента на временной шкале вызывается диалоговое окно jquery.ui, и, когда отправляется форма в этом диалоговом окне (с помощью функции связывания), среди прочего (например, вызов ajax для обновления основной базы данных), я также обновляю отображаемую график с использованием dataset.update({id:itemId, ... }) механизм. Это сильно урезанный (для краткости) код:

$.ajax({
   url: "ajax/ajax_shift.php",
   dataType: "json",
   success: function (data) {
      container: document.getElementById("visualization"),
      groups: new vis.DataSet(),
      items: new vis.DataSet(),
      options: {
         [snip]
      }
      timeline = new vis.Timeline(shift_tl.container, shift_tl.items, shift_tl.groups, shift_tl.options);
   }
});

$("#dialog").dialog({   [snip]   });

function closeDialog() {   [snip]  };

$("#dialog").bind("updateShift",
   function() {
      var datastring = $("#update-form").serialize();
      $.ajax({
         type: "POST",
         url: "ajax/ajax_shift.php",
         data: datastring,
         success: function(data) {
            var iid = document.getElementById("shi_ref").value;
            var icontent =  [snip];
            var iclass =  [snip];
            var istart = document.getElementById("shi_start").value;
            var iend = document.getElementById("shi_end").value;
            if (data == "success") {
               items.update({id: iid, content: icontent, className: iclass, start: istart, end: iend}); // <---- WORKS :)
               $("#dialog").dialog("close");
            }
         }
      }
   }
)

Это работает очень хорошо, но я хотел, чтобы пользователь мог изменять диапазон даты / времени и загружать соответствующие элементы асинхронно, поскольку диапазон временной шкалы перетаскивается / изменяется. Поэтому мне пришлось сначала создать временную шкалу, а затем загрузить ее через ajax. Проблема в том, что items.update({id:itemId, ... }) механизм перестал работать после этой реструктуризации кода. Сначала я получил консольную ошибку, сообщающую, что items.update не определен, но это прекратилось, когда я добавил идентификатор объекта таким образом: shiftTL.items.update, Я потратил бесчисленное количество часов на эту проблему и сейчас отправляю диалоговую форму более напрямую (без привязки), но это не имеет никакого значения для основной проблемы здесь, какой бы она ни была. Это урезанная версия того, где я нахожусь. Этот код не вызывает ошибок консоли, и временная шкала работает хорошо во всех других отношениях, просто элемент не обновляется в режиме реального времени, как это происходит с моим исходным сценарием (показанным выше):

var items;

var shift_tl = {
   container: document.getElementById("visualization"),
   groups: new vis.DataSet( [snip] ),
   items: new vis.DataSet(),
   options: {
      [snip]
   }
};
timeline = new vis.Timeline(shift_tl.container, shift_tl.items, shift_tl.groups, shift_tl.options);

$.ajax({
   url: "ajax/ajax_shift.php",
   dataType: "json",
   success: function (data) {
      timeline.setOptions(shift_tl.options);
      timeline.setGroups(shift_tl.groups);
      timeline.setItems(data);
   }
});

timeline.on("rangechanged", function (properties) {
   $.ajax({
      url: "ajax/ajax_shift.php",
      dataType: "json",
      success: function (data) {
         timeline.setItems(data);
      }
   });
});

$("#dialog").dialog({   [snip]   });

function closeDialog() {   [snip]  };

$("#updateForm").submit( function() {
   var datastring = $("#updateForm").serialize();
   $.ajax({
      type: "POST",
      url: "ajax/ajax_shift.php",
      data: datastring,
      success: function(data) {
         var iid = updateForm.elements["shi_ref"].value;
         var icontent =  [snip];
         var iclass =  [snip];
         var istart = updateForm.elements["shi_start"].value;
         var iend = updateForm.elements["shi_end"].value;
         if (data == "success") {
            shift_tl.items.update({id: iid, content: icontent, className: iclass, start: istart, end: iend}); // <---- DOES NOT WORK :(
         }
      }
   }
   return false;
});

Я думаю, что это не вопрос масштаба, так как я заявляю items во всем мире. Я предполагаю, что моя проблема заключается в том, что вызов ajax остается открытым (сказал он, не понимая этого аспекта javascript). Может кто-нибудь помочь, пожалуйста? или объясните, что я мог бы сделать, чтобы сузить проблему?