can i trigger javascript when a row in a model is saved ?

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I need an "after update" action for the rows in one of my models. When a user creates or edits a row in a table i want to update a field in one of the other models on the page.

Is there any native skuid way to trap this event, or do i need to use jquery and add the events on the fields myself ?

here's a screenshot

as you can see there are no id's or identifiers on the controls
I'd like to end up with an id on the selects, which would let me use jquery to attach events to them.
It looks like i'll need a custom field rendered... the only examples given are for a query slider control. Are there any examples for picklists or text fields ?

the other alternative would be a callback function on the save of the model. I see from the docs that if i call save myself i can get a callback
// Save all changes in our Contact model
contactModel.save({callback: function(result){
if (result.totalsuccess) {
// Get the 15-digit Id of our newly-saved George Bailey Contact,
// which will have had its Id and other fields updated after save
console.log(georgeBailey.Id15);
// Show the entire George Bailey Contact record
console.log(georgeBailey);
} else {
console.log(result.insertResults);
console.log(result.updateResults);
console.log(result.deleteResults);
}
}});

the question is, can i set it up to run my callback whenever the model is saved... even if its not custom javascript that's saving it ?
Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb

Posted 5 years ago

  • 1
Photo of ktyler

ktyler

  • 9,244 Points 5k badge 2x thumb
I have figured out that I can do with with a custom button in a page title that copies out the information I need and writes it to record in the parent model and then "saves" the model for Client Disabilities.

Is there some way I can get this custom button to have the behavior a normal save button does... that is, disabled until the data is changed... then enabled...then disabled again when the data is saved ?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Yes, you can register JavaScript to be run after a Model is saved or updated.

There are 2 main constructs we have which can be useful here, depending on whether you want to register an event handler at a Model level, or at the level of a particular Field on a particular Row on the Model:

To register data handlers on a:

  1. Model --> use a skuid.ui.Editor

  2. Particular Field on a particular Row in a Model --> use a skuid.ui.Field



If an instance of ui.Editor is registered on a Model, the following event handlers will be called on that ui.Editor when corresponding data events occur on Models that the ui.Editor is registered on:


  1. handleSave(totalsuccess) --- called after a save has finished

  2. handleCancel() -- called after a cancel has finished

  3. handleDataRefresh() --- called after an updateData is finished

  4. handleChange() --- called after any change is made to the model's data

  5. handleMessages() --- called after a save has finished if there are relevant error messages and (a) the ui.Editor initiated the save (b) Skuid doesn't know which ui.Editor initiated the save



If an instance of ui.Field is registered on a Model, Row, and Field, then the following event handler will be called on that ui.Field when corresponding data events occur on the Model, Row, and data field in question:


  1. handleChange(newValue) --- called after a change is made to the row and field



So back to your scenario...

If you have a "child" model and want any successful saves to the child model to initiate an update of the parent, then you want to have some inline JavaScript (NOT a Snippet) that defines a new ui.Editor. You then want to register this Editor on your child Model, and define the ui.Editor's handleSave() method such that it, if the child model was successfully saved, you will manually update the data in the parent.

A prime example of this is covered in this tutorial:

How do you update display of data from one model when related data in another model changes?
Photo of JD Bell

JD Bell, Senior Product Engineer

  • 2,996 Points 2k badge 2x thumb
A better (newer) approach might be to use Skuid events:

http://help.skuidify.com/m/11720/l/241020-skuid-events

The code is significantly less complicated:

(function(skuid){

    var $ = skuid.$;

    skuid.events.subscribe( 'models.saved', modelsLoadedUpdated );
    skuid.events.subscribe( 'models.loaded', modelsLoadedUpdated );
    
    function modelsLoadedUpdated(data){
        
        if ( 'Account' in data.models ){
        
            if ( data.totalsuccess === undefined ) {
                // Models were loaded
                console.log( 'Account model as loaded.' );
            } else if ( data.totalsuccess === true ) {
                // Models were saved - no errors
                console.log( 'Account model saved - no errors' );
            } else {
                // Models were saved - with errors
                console.log( 'Account model saved - errors:' );
                $.each( data.errors, function(error){
                    console.log( error.summary );
                });
            }
            
        }
        
    }
    
})(skuid);
(Edited)