Question

我有一个工作脚本，显示了一个在ajax回调中加载和设置的vis.js时间轴。单击时间轴上的项目调用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的这个方面）。有人可以帮忙吗？或解释我可能会做些什么来缩小问题范围？

当异步加载数据集时，如何从vis.js时间轴更新项目？

0 个答案: