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

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{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 ?

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 ?

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?

A better (newer) approach might be to use Skuid events:

The code is significantly less complicated:

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