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?
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");
Related
I'm essentially trying to add data to a website from a desktop database/CRM tool, where no API exists to the website.
I've found I can load up the webpage, login and use Javascript to fill the form with data from the CRM.
I can see the form fields are correct with my values. However the Angular 6 variables don't update unless I actually physically type in the form fields. So I get 'required field' warnings.
Is the there a way to force Angular to pick up the values in the form fields?
Figure out which events are causing the Angular model to update
document.querySelectorAll('input, select, textarea').forEach(obj => { obj.keyup(); });
Try blur, keyup, change. Angular will be listening to some DOM event handler. Refine the query in the query selector to be a bit more targeted at your inputs and not the whole page.
How did you fill in the field? If you did something like
document.getElementById('someId').value = 'New Value';
Then try calling the DOM events on the element you set.
I'm using Materialized CSS and it works very well for me. However when I added more dynamic behaviour to my app, for example when I'm pre-populating form with values and appending them to the layout, here is the photo of that:
That happens only when I preset the value to form on/prior to page load (because my form html is generated by server side).
However if I were to click into the quantity field then quantity would go back to its place and it would stay there.
How do I make it so that it stays up even when I pre-populate the form value? Is there a class I need to add to it (label or input) or JavaScript or something that I can put out there.
If you want to pre-fill text inputs, use Materialize.updateTextField(); as the docs says
I have a dropdown, on its change I need to load the contents related to it on the same page. Which I did using jQuery. Now the question is how do I make edits on this data and store it on my database. If I am wrong in using jQuery for loading my data then what else should I use? I am using PHP as my server side scripting language.
More detail -
Simply taking there a list of details I need to display as per the country you select, which I am displaying currently in a nice grid(textboxes)!
Now the data from this grid should be copied to another textbox on "EDIT" button click from where I edit them and store it in my database. I am not able to make the values copy into a another textbox
You could do this:
Display the data in some form of editable div, textarea, or other element.
Make a hidden field somewhere and when you display the data
Set the row id from your database to the hidden field
On your change event, grab the id from the hidden field along with the edited data.
Using Jquery/ajax, send that data to a php page that will save thee data to your database using the passed in id.
You could do that.
However, if it were me (and if you're not married to your current databse / mySQL etc..), I would use parse.com. The service is free up to a significant amount of usage (which Ive never come close to) and it really simplifies everything. See the below post if you're interested in that approach:
Save and retrieve user input from database with javascript?
I am working on a meteorjs application in which we have a form and some inputs get rendered based on the values of the session variable which is set on the change of another input we have applied a jquery plugin to the form that manipulates the inputs of the form but the plugin does not affect on the dynamically rendered input controls.If anybody has any idea please help me.
The problem is as follows:
there is a service select box and when user changes the values of the service we will set a session variable true and in the template if this session variable is true we will show another select for sub category and we have already applied the plugin on the form with onrendred but the plugin works for the services salect but does not affect sub category select.
I'm building an App that is heavy on jQuery. Most of it I can handle without the use of JS and still have a functioning site, however there is one bit that is eluding me. (note, I'm using ASP.NET MVC but that shouldn't matter in this instance)
I have an input field that is making great use of jQuery-UI AutoComplete. The behavior is very simple. The user is asked to input their City, but is given an AutoComplete list of valid cities. If the city is invalid, the server side validation fires and tells them to try again.
If they do select a valid city, the jQuery method updates a hidden field that contains the CityID of the selected city. This is working phenomenally well, and I really like the performance.
Here's where the problem enters. If JS is not available in the browser, the ID field is not updated, and hence the DB is not updated. I am not using the AutoComplete input on the server side at all, just the ID field. What would be a good solution to circumvent this issue?
Default to a select element containing the cities as options and id's as values, and change it to the autocomplete field with the script on page load.
If for some reason sje397's answer doesn't work for you (it's an elegant solution, unless the city auto-select is based on some other field on-screen, such as a zip code or state), simply POST both fields. When evaluating the POSTed data, if the CITY text box has data, and the hidden field does not, then evaluate the entered city using the same validation method used by the jquery callback. If the hidden field has data, you assume that javascript is enabled and use your current logic.
Several options:
1 - Serve HTML initially that shows the "hidden" input, and doesn't include the "autocomplete" one. When JS loads, have a function edit the DOM to your current situation.
2 - Have the form default to send the "autocomplete" data to the server. Use javascript to edit the "send" function to have it switch to the "hidden" input.
Get the page to by default to send the input of the user over the intertubes to your server, if javascript is enabled, change it so it only sends the ID over instead (using javascript obviously).