Capture field changes made using javascipt

Hi - working on integrating Postcode Anywhere on a SKUID page.

So I can get the postcode lookup working fine, and the javascript updates the address fields on my page, but when I save the page, the new values are not captured. It seems like SKUID only recognises the field values as having changed after I click into each input field.

I guess it’s some kind of ‘onchange’ event or similar needed so that skuid recognises the field has been updated and saves the new value back to the model.

Any ideas how I can make this happen?


Did you test to see if your theory only saving data after clicking into each input field?

If not, try only clicking into that one field and pressing save. Refresh the page and see if only that field saved. Try again without clicking and saving and refreshing.

If you did and this is the behaviour, then I too would like to know how this gets worked out.

Yes, that is the behaviour I’m seeing.

So far I’ve got it partially working - with a Save button that runs a snippet. The code in the snippet gets all of the relevant INPUT fields, then actions each one like this:

elems[i].dispatchEvent(new Event(‘onchange’));

that runs OK, but then when I add a following action on that button to Save the model, it still only saves any fields I have physically altered - BUT - strange this is if I then click the Save button a second time, it does recognise the changes and updates the record as expected.

Is it something to do with the onchange events firing but not completing before the Save is attempted?

Really odd. What are you updating with your javascript? The value in the input field on the screen, or the field in the row which would update the input field on the page?

I’m trully guessing on this. I don’t know javascript or the inner workings of the API’s, etc, etc. Just going with the way I think it all works.

It’s updating the element on the page.

I have a feeling that this doesn’t update the model. There must a way to update the field in the row vs the input element on the page. Javascript is the dark side of skuid which I’ve been resisting. :stuck_out_tongue:

Pat is right.  You don’t want to update the page element,  you want to update the model data behind the scenes.  Use the updateRow method.  

More information here:

The good thing about this method is that the UI elements that are connected to the model will automatically synch with the new data.  More bang - same buck. 

I’m not sure how Postcode Anywhere works exactly, but once you do the Postcode lookup, you should update fields on row(s) in the relevant Skuid Models. For instance, if you have a Model called “Contact”, and you want to update the MailingPostalCode field for your Contact based on the data PostCode Anywhere gives you, do something like this in your JavaScript logic:

// The new address data from Postcode Anywhere
var newAddressData = {
    MailingStreet: ‘123 Main St’,
    MailingCity: ‘Chattanooga’,
    MailingState: ‘TN’,
    MailingPostalCode: ‘37409’

var ContactsModel = skuid.model.getModel(‘Contacts’);
var Contact = ContactsModel.getFirstRow();


Thanks for your help - got it working now.

Glad to hear. 

I like your site and content. thanks for sharing the information keep updating, looking forward for more posts. Thanks