Scriptaculous Sortable onUpdate not firing

Question

I'm having some troubles in using Sortable class from scriptaculous lib: it seems that onUpdate callback is never called if I use the only attribute. Here is a working example which does not use 'only' attribute:

<ul id="test">
  <li id="item_1" class="level0">
    item 1
    <ul>
      <li id="item_2" class="level1">item 1.1</li>
      <li id="item_3" class="level1">item 1.2</li>
    </ul>
  </li>
  <li id="item_4" class="level0">
    item 2
    <ul>
      <li id="item_5" class="level1">item 2.1</li>
      <li id="item_6" class="level1">item 2.2</li>
    </ul>
  </li>
</ul>
<script type="text/javascript">
  Sortable.create("test", {
    tree: true,
    onUpdate: function(item) { alert(item.readAttribute("id")) },
  });
</script>

This code works well: the onUpdate is called properly, but now, if I change the Sortable.create() to add only attribute, like following, the onUpdate isn't called anymore:

Sortable.create("test", {
  tree: true,
  only: 'level1',
  onUpdate: function(item) { alert(item.readAttribute("id")) },
});

Does anyone already fixed this ? Thanks

score 1 · Answer 1 · answered Jul 23 '13 at 09:11

After some debugging in dragdrop.js source code, I finally found that serialization method which is used to detect modifications on tree was limited to root element (but I didn't investigate why it was OK without only attribute).

Based on scriptaculous 1.9.0 version, I could fix it by patching dragdrop.js. I found several ways of patching the code:

By modifying the serialize method: this method creates a options object but doesn't use it, except for testing options.tree. The options passed to Sortable.tree are arguments[1] which I guess is a bug. The first patching method consists in replacing the arguments[1] by options (lines 936 and 940):

929  serialize: function(element) {
930    element = $(element);
931    var options = Object.extend(Sortable.options(element), arguments[1] || { });
932    var name = encodeURIComponent(
933      (arguments[1] && arguments[1].name) ? arguments[1].name : element.id);
934
935    if (options.tree) {
936      return Sortable.tree(element, options).children.map( function (item) {
937        return [name + Sortable._constructIndex(item) + "[id]=" + encodeURIComponent(item.id)].concat(item.children.map(arguments.callee));
938      }).flatten().join('&');
939    } else {
940      return Sortable.sequence(element, options).map( function(item) {
941        return name + "[]=" + encodeURIComponent(item);
942      }).join('&');
943    }
944  }

The second method consists in manually adding the options.tree value. This can be done in tree method like this (lines 877 and 'NEW'):

872  var options = Object.extend({
873    tag: sortableOptions.tag,
874    treeTag: sortableOptions.treeTag,
875    only: sortableOptions.only,
876    name: element.id,
877    format: sortableOptions.format,
NEW    tree: sortableOptions.tree
878  }, arguments[1] || { });

It would also be possible to fix findElements method in order to change the options.tree ? true : false into options.treeTag ? true : false since options.tree is never set, therefore the original test will always return false, but I'm not sure of side effects.

Scriptaculous Sortable onUpdate not firing

1 Answers1