We get data dynamically from different sources and then javascript (say, data injector) update multiple controls with that data - controls like textboxes, dropdowns and checkboxes and some other which get updated data after executing the javascript. The html page view updates, showing correct values. We need to send final html to another system (say, end service) where javascripts cannot be executed. But the updates are not reflecting in the outerHtml. How can we force an update to DOM which reflects in Html, or how we can get the final html. We cannot make changes to data injector javascript to use attribute updates as suggested here - Why doesn't the value attribute of the input change? i.e., document.getElementById("p1").setAttribute("value", "New text"); is not feasible
<html> <body> <h2>JavaScript can Change HTML</h2> <input id="p1" value="initial" /> <p>The paragraph above was changed by a script.</p> <script> document.getElementById("p1").value = "New text"; //This works fine - injector js updates multiple controls - input, select, checkbox etc. console.log(document.getElementById("p1").value); //This shows updated value - page view is updated properly // TODO: Can we Force html refresh/update - how?? // console.log(document.getElementById("p1").outerHTML); //Issue is here, it shows old value. How to get full html with all new values, expected by end service </script> </body> </html>
Actual value in outerHtml - <input id="p1" value="initial"> Expected value by end service - <input id="p1" value="New text"> We are not restricted to using outerHtml, if there is any other way to achieve the above requirement without making changes to data injector scripts. What can be done to obtain updated html for sending to the end service? How to get the updated values from the outerHTML after getting the values from javascript?
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)
Submit an article or tip