Refresh model in Drag and Drop Queue items after drop

I thought I could just add " targetModel.updateData();" in my javaScript resource but I’m continually reminded that I know very little about javaScript. I’ve tried hacking my way through but still can’t get it to work.

= fail

Not sure if this is the best way to go, but you probably just need to wait for the save to complete before the query operation:
$.when(targetModel.save()).then(targetModel.updateData());

Theoretically, you should be able to subsequently remove targetList.render(), since a query against a model will automatically re-render components registered to that model.

At what line would I put that code?

I tried inserting it at line 67 (replacing “targetModel.save();”) but this is the error I received:

Gary,

What line is throwing that error? Apparently something is trying to query the QualifiedSuspect model while it has unsaved changes.

you should be able to replace lines 67 and 68 of your pictured code with the $.when/then statement. Like so:

(function(skuid){ // Global setting -- if true, then all changes will be immediately saved, // otherwise, changes will remain unsaved until you click Save. var SAVE_IMMEDIATELY = true; var $ = skuid.$; var getQueueList = function(queueElement){ var queueList; $.each(skuid.model.list(),function(i,model){ $.each(model.registeredEditors,function(){ if (this.element && this.element.is && this.element.is(queueElement)) { queueList = this.lists[0]; return false; } }); if (queueList) return false; }); return queueList; }; $(document.body).one('pageload',function(){ $('.nx-queue').each(function(){ var queue = $(this); var listContents = queue.find('.nx-list-contents'); listContents.droppable({ hoverClass: 'ui-state-highlight', accept: function(draggables) { // Do not accept draggables // that came from this list return (!listContents.is($(draggables[0]).data('listContents'))); }, drop: function(e,ui){ var draggable = ui.draggable; var sourceItem = draggable.parent().data('object'); // You will get a jQUery UI bug unless you detach the draggable. // We wait until now to detach in order to get a draggable.detach(); var sourceRow = sourceItem.row; var sourceRowId = sourceRow.Id; var sourceList = sourceItem.list; var sourceModel = sourceItem.list.model; var targetList = getQueueList(queue); var targetModel = targetList.model; targetModel.adoptRow(sourceRow); sourceModel.removeRowById(sourceRowId); var targetRow = targetModel.getRowById(sourceRowId); // Find the first Condition in our target Model, // and apply it to our target row. // (that is, change the Stage of the dragged Opportunity) var targetModelCondition = targetModel.conditions[0]; targetModel.updateRow( targetRow, targetModelCondition.field, targetModelCondition.value ); if (SAVE_IMMEDIATELY) {  $.when(targetModel.save()).then(targetModel.updateData()); } // Re-render just the Source List and the Target List sourceList.render(); } }); }); }); })(skuid);

Unfortunately it is still giving me the same error.  

What line is throwing the error?

In this situation, the QualifiedSuspect model is the sourceModel (that is that stage that I dragged the record from)…does there need to be something that saves the sourceModel first?  

Gary,

Try this? Save both models, then query the target model and render the source list.

$.when(skuid.model.save([targetModel,sourceModel])).then(function(){<br> targetModel.updateData();<br> sourceList.render();<br>});

That worked!  Here is the full snippet:

(function(skuid){ // Global setting -- if true, then all changes will be immediately saved, // otherwise, changes will remain unsaved until you click Save. var SAVE_IMMEDIATELY = true; var $ = skuid.$; var getQueueList = function(queueElement){ var queueList; $.each(skuid.model.list(),function(i,model){ $.each(model.registeredEditors,function(){ if (this.element &amp;&amp; this.element.is &amp;&amp; this.element.is(queueElement)) { queueList = this.lists[0]; return false; } }); if (queueList) return false; }); return queueList; }; $(document.body).one('pageload',function(){ $('.nx-queue').each(function(){ var queue = $(this); var listContents = queue.find('.nx-list-contents'); listContents.droppable({ hoverClass: 'ui-state-highlight', accept: function(draggables) { // Do not accept draggables // that came from this list return (!listContents.is($(draggables[0]).data('listContents'))); }, drop: function(e,ui){ var draggable = ui.draggable; var sourceItem = draggable.parent().data('object'); // You will get a jQUery UI bug unless you detach the draggable. // We wait until now to detach in order to get a draggable.detach(); var sourceRow = sourceItem.row; var sourceRowId = sourceRow.Id; var sourceList = sourceItem.list; var sourceModel = sourceItem.list.model; var targetList = getQueueList(queue); var targetModel = targetList.model; targetModel.adoptRow(sourceRow); sourceModel.removeRowById(sourceRowId); var targetRow = targetModel.getRowById(sourceRowId); // Find the first Condition in our target Model, // and apply it to our target row. // (that is, change the Stage of the dragged Opportunity) var targetModelCondition = targetModel.conditions[0]; targetModel.updateRow( targetRow, targetModelCondition.field, targetModelCondition.value ); if (SAVE_IMMEDIATELY) { $.when(skuid.model.save([targetModel,sourceModel])).then(function(){ targetModel.updateData();sourceList.render(); }); } // Re-render just the Source List and the Target List sourceList.render(); } }); }); }); })(skuid);<br>

Glad you got it working, Gary!

You can remove the following lines:

// Re-render just the Source List and the Target List sourceList.render(); 

You’ve already re-rendered the source list within the $.when/then statement.