Search code examples
javascriptjqueryumbracoumbraco7

Populate Umbraco content form with Javascript


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?


Solution

  • 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");