Capture field changes made using javascipt

  • 1
  • Problem
  • Updated 1 year ago
  • Solved
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?

Thanks
Photo of Simon Parker

Simon Parker

  • 420 Points 250 badge 2x thumb

Posted 4 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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.
Photo of Simon Parker

Simon Parker

  • 420 Points 250 badge 2x thumb
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?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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.
Photo of tong vo

tong vo

  • 60 Points
I like your site and content. thanks for sharing the information keep updating, looking forward for more posts. Thanks
(Edited)
Photo of Simon Parker

Simon Parker

  • 420 Points 250 badge 2x thumb
It's updating the <INPUT> element on the page.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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. :P
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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: 

http://help.skuidify.com/m/11720/l/205447-skuid-model-model

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. 
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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();

ContactsModel.updateRow(Contact,newAddressData);
Photo of Simon Parker

Simon Parker

  • 420 Points 250 badge 2x thumb
Thanks for your help - got it working now.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Glad to hear.