jquery nestable不会更新

时间:2015-09-02 21:19:04

标签: javascript php jquery mysql

我正在使用jquery nestable来创建一个潜在学生可能感兴趣的学术课程列表.16个程序从mysql中提取并列出如下:

<ol class="dd-list">

if(mysqli_num_rows($result)) {
    $order = array();
    while($item = mysqli_fetch_assoc($result)) {
        echo '<li class="dd-item" data-id="'.$item['id'].'"><div class="dd-handle">',$item['program'],'</div></li>';
    }

   </ol>
 } else { 
   <p>Sorry!  There are no items in the system.</p>
 }

没有问题。我有第二个容器来放置程序:

<div class="dd" id="nestable2">
 <h4>Place programs below in order of preference</h4>
  <ol class="dd-list dd-placeholder">
   <li class="dd-item" data-id="17">
   <div class="dd-handle">Health Sciences Advisor</div>
  </li>
 </ol> 
</div>

原始列表和第二个容器的输出作为序列化的json数据输出为textareas,如下所示:

 Serialised Output (per list)
 <textarea id="nestable-output"></textarea>
 <textarea id="nestable2-output" name="nestable2-output"></textarea>

再次没有真正的问题。稍后将textareas更改为隐藏输入。除非有时当我将列表项从左列拖动到右侧时,值不会更新。这是jquery.nestable.js

的链接

以下是表格中的脚本:

$(document).ready(function()
{
var updateOutput = function(e)
{
    var list   = e.length ? e : $(e.target),
        output = list.data('output');
    if (window.JSON) {
        output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
    } else {
        output.val('JSON browser support required for this application.');
    }
};
// activate Nestable for list 1
$('#nestable').nestable({
    group: 1
})
.on('change', updateOutput);
// activate Nestable for list 2
$('#nestable2').nestable({
    group: 1
})
.on('change', updateOutput);
// output initial serialised data
$('#nestable2').attr('data-id', 'newvalue');
$('#nestable2').data('id', 'newvalue');

updateOutput($('#nestable').data('output', $('#nestable-output')));

updateOutput($('#nestable2').data('output', $('#nestable2-output')));

});

有时只会失败。然后,如果我重新订购第二个容器中的列表,它会更新,但在我再次重新订购之前不会更新任何新项目。非常感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

我找到了答案。问题出现在第475行的jquery.nestable.js文件中是这样的:

$(this).data("nestable-id", new Date().getTime());

在更快的机器上,似乎没有足够的时间(以毫秒为单位)让脚本看到发生了变化。取而代之:

$(this).data("nestable-id", Math.round(Math.random() * Math.pow(10, 16)));

它似乎会产生随机数的任何一代,所以这个答案并不是唯一可行的方法。