Need list view to update after record data updated from a row action pop-up

  • 1
  • Question
  • Updated 4 years ago
  • Answered
  • (Edited)
I have list views that have row action pop-ups that allow the user to enter a payment and update the status of the record.  After saving the pop-up and returning to the list view the row does not reflect the correct balance or status until refreshing the browser, which takes things out of context.  Need some help on how to refresh the list view upon saving the pop-up.  Thanks 
FYI - working with custom pop-ups that use a page include. 
Photo of David Ross

David Ross

  • 562 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
If your Popup is actually updating records in the main Table component's Model, then you'll just need to force the main Table to re-render its underlying List. This is pretty easy if you give the Table a Unique Id, then you can do this:

skuid.$('#MyTable').data('object').list.render();

If your Popup is interacting with different Models, then you will need to update the data in the main Table, which will automatically take care of re-rendering the associated components, so you would just need to do:

skuid.model.getModel('MainModel').updateData();
Photo of David Ross

David Ross

  • 562 Points 500 badge 2x thumb
Zach- So I understand what you are doing with the list.render() and the updateDate(), do I want to set that up with a custom button on the pop-up so it would perform a save, close the window, then update the data in the list?  Any code example you can provide would be awesome or just a link to another post if you have already given an example before.

Thanks!   
Photo of Moshe Karmel

Moshe Karmel, Champion

  • 8,646 Points 5k badge 2x thumb
You can try something like this:
<code>
var params = arguments[0],   $ = skuid.$;
// get your model by replacing YOURMODELNAME with the name of the model
var model = skuid.model.getModel('YOURMODELNAME');
model.save({callback:function(result){
$.unblockUI();
if(result.totalsuccess){
model.updateData();
// this code will close the popup after the save 
var popup = skuid.$('.ui-dialog-content');
popup.dialog('destroy');
popup.remove();
}
}});
</code>
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Yes, you can add a button to a Page Title in your Popup that is called something like "Save and Close" that would: 
1. Save Models for components the user is interacting with in the Popup
2. When the Save is finished: (a) Requery the Model in the principal table / list (b) Close the Popup

Here is a slight adjustment on Moshe's code:

var params = arguments[0],   
   $ = skuid.$;
// The Models that you want to save
var modelIdsToSave = ['MODEL_A','MODEL_B'];
// The Models that you want to requery
var modelIdsToUpdate = ['MAIN_MODEL'];
$.blockUI({
   message: 'Saving...'
});
var modelsToSave = [],
   modelsToUpdate = [];
$.each(modelIdsToSave,function(){modelsToSave.push(skuid.$M(this));});
$.each(modelIdsToUpdate,function(){modelsToUpdate.push(skuid.$M(this));});
skuid.model.save(modelsToSave,{callback:function(result){
   if(result.totalsuccess){
      skuid.model.updateData(modelsToUpdate,function(){
              // close the popup
             skuid.$('.ui-dialog-content').dialog('destroy');
             $.unblockUI();
      });
   }
    $.unblockUI();
}});