Populate Umbraco content form with Javascript

Question

I trying to create a custom property editor for Umbraco 7 that talks to an external web service, retrieves some data then populates a number fields in the form with the data it's retrieved. I've tried doing this with the following simple code:

$("#textbox_id").val("new value");

This does indeed populate the correct field with the correct data. However if I save and reload the form the data has not been updated and value returns to it's original value.

Any suggestions?

does your external web service sends data properly after the form reload? — Aminur Rashid
– Aminur Rashid, Commented Jan 10, 2017 at 15:52
It shouldn't need to call the web service when the form reloads. The idea of it is that the data is then saved in Umbraco as regular content. — HuwD
– HuwD, Commented Jan 10, 2017 at 15:54
That was the subject of my original question. I'm trying to work out why it's not being saved and how to make it save correctly. — HuwD
– HuwD, Commented Jan 10, 2017 at 15:58
I don't know your exact situation, but I guess you'll want to use angularjs to do the populating. This article helped me a lot: our.umbraco.org/documentation/tutorials/… — Mark
– Mark, Commented Jan 11, 2017 at 11:50

Claus · Accepted Answer · 2017-01-16 22:13:00Z

3

The problem is that you are using jQuery to update the input field directly in the DOM. The backoffice of Umbraco is completely wired up with an angular model and this model is not notified of the change in this input field when you are not actually typing in the field.

You can however trigger the input even on the form fields after updating the value of the field, which will ensure that angular gets notified of the change and it will update its model.

Something like this should get the job done and the change should now be included when you hit the save button:

$("#textbox_id").val("new value").trigger("input");

answered Jan 16, 2017 at 22:13

Claus

1,99518 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

HuwD Over a year ago

Thanks, was using jQuery as am less familiar with angular. Must really brush up on angular when I get the chance.

Claus Over a year ago

Well there's really no problem in what you're doing. You just need to notify angular of the change to have the model updated, since it has no way of knowing that otherwise.

Collectives™ on Stack Overflow

Populate Umbraco content form with Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related