timeline - update tooltip on onMoving callback is not working

[christophepersoz]

Hello,

I'm trying to update the content of the items while dragging them on the timeline, but it just crash every time. I used the code of the example editingItemsCallbacks.html that I modified on the option section like this:

var options = {
    editable: true,

    onAdd: function (item, callback) {
      prettyPrompt('Add item', 'Enter text content for new item:', item.content, function (value) {
        if (value) {
          item.content = value;
          callback(item); // send back adjusted new item
        }
        else {
          callback(null); // cancel item creation
        }
      });
    },

     /* update item content with the new start value - not working */
    onMove: function (item, callback) {
      /*
      var title = 'Do you really want to move the item to\n' +
          'start: ' + item.start + '\n' +
          'end: ' + item.end + '?';

      prettyConfirm('Move item', title, function (ok) {
        if (ok) {
          callback(item); // send back item as confirmation (can be changed)
        }
        else {
          callback(null); // cancel editing item
        }
      });
      */
      items.update({id: item.id, content: item.start});
      callback(item);
    },

    /* update item content with the new start value - not working */
    onMoving: function (item, callback) {
      items.update({id: item.id, content: item.start});
      callback(item); // send back the (possibly) changed item
    },

    onUpdate: function (item, callback) {
      prettyPrompt('Update item', 'Edit items text:', item.content, function (value) {
        if (value) {
          item.content = value;
          callback(item); // send back adjusted item
        }
        else {
          callback(null); // cancel updating the item
        }
      });
    },

    onRemove: function (item, callback) {
      prettyConfirm('Remove item', 'Do you really want to remove item ' + item.content + '?', function (ok) {
        if (ok) {
          callback(item); // confirm deletion
        }
        else {
          callback(null); // cancel deletion
        }
      });
    }
  };

Every time I'm getting the following errors on console,

[Error] TypeError: i is not a function. (In 'i(s,t)', 'i' is undefined)
    _updateContents (vis.min.js:26:25103)
    _updateDirtyDomComponents (vis.min.js:29:17540)
    (anonymous function)
    (anonymous function) (vis.min.js:29:18892)
    forEach
    redraw (vis.min.js:29:18876)
    setData (vis.min.js:26:20760)
    _updateItem (vis.min.js:31:20450)
    (anonymous function) (vis.min.js:31:18150)
    (anonymous function)
    forEach
    _onUpdate (vis.min.js:31:18009)
    update (vis.min.js:31:6419)
    _trigger (vis.min.js:25:18595)
    update (vis.min.js:25:19523)
    onMove (editingItemsCallbacks.html:73)
    (anonymous function) (vis.min.js:31:25959)
    (anonymous function)
    forEach
    _onDragEnd (vis.min.js:31:25832)
    (anonymous function)
    s (vis.min.js:38:24559)
    emit (vis.min.js:39:13149)
    e (vis.min.js:39:6758)
    emit (vis.min.js:39:6886)
    emit (vis.min.js:39:8388)
    recognize (vis.min.js:39:7323)
    recognize (vis.min.js:39:12161)
    E (vis.min.js:38:27885)
    handler (vis.min.js:39:2960)
    domHandler (vis.min.js:38:27581)

Does anyone succeed on update item values with the current version of timeline, or do I do something wrong?

Thanks

[daRoof]

In your onMoving function, it seems you call the update method of an ItemSet outside the scope of the function. In these callback functions you are supposed to alter the item that's given to you directly and return it to the callback function.

item.content="you're dragging me";
callback(item);

[christophepersoz]

Oh... indeed - thanks a lot @daRoof ; I misunderstood how vis timeline behaves, I thought I had to update the datas object first then call the callback.

I changed the code into this now, and it almost work:

// callBack for the Edit
onMove: function (item, callback) {
    tooltip = set_Tooltip(new Date(item.start).getTime(), new Date(item.end).getTime());
    item.content = set_Content( item.id, new Date(item.start).getTime() ); // Working!
    console.log(item.content + tooltip);
    callback(item); // send back item as confirmation (can be changed)
},  
onMoving: function (item, callback) {
    tooltip = set_Tooltip(new Date(item.start).getTime(), new Date(item.end).getTime());
    item.title = tooltip ; // That's not updating the values of the tooltip while dragging
    item.content = "moving"; // Working!
    console.log(tooltip);
    callback(item); // send back the (possibly) changed item
},

On the onMoving, title object is not updated, and so the tooltip which display the title is not updated on dragging. I tried to update the content at the same time, and that works. The onMoving update the content while moving the item. How can I have the tooltip updated while dragging the items on the timeline?

My items are declared like this,

items.add([
    {id: 1, group:0, content: set_Content('1', 1920), editable: true, title: set_Tooltip(1920, 2450), start: 1920, end: 2450},
    {id: 2, group:1, content: set_Content('2', 500), editable: true, title: set_Tooltip(500, 2500), start: 500, end: 2500},
    {id: 3, group:3, content: set_Content('3', 3440), editable: true, title: set_Tooltip(3440, 4230), start: 3440, end: 4230},
    {id: 4, group:7, content: set_Content('4', 5120), editable: true, title: set_Tooltip(5120, 6840), start: 5120, end: 6840},
    {id: 5, group:0, content: set_Content('5', 520), editable: true, title: set_Tooltip(520, 1290), start: 520, end: 1290},
    {id: 6, group:2, content: set_Content('6', 105), editable: true, title: set_Tooltip(105, 1230), start: 105, end: 1230}
]);

/*
 setTooltip define a HTML tag formatted like this,
<div class="tag-in"><span>In</span>00:00:00:00 (0)</div><div class="tag-out"><span>Out</span>00:00:01:00 (25)</div>
*/

Thanks a lot for the help!