3

我有一个工作脚本，它显示了一个在 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的这个方面）。有人可以帮忙吗？或解释我可能会做什么以缩小问题范围？

4

0 回答 0