I manage to show XML using -
wxml = window.open("my_template.xml", "my_xml" );
I manage to change the DOM using -
xDoc = wxml.document;
xNodes = xExDoc.getElementsByTagName("myNodeName");
xValue = xNodes[i].getElementsByTagName("value")[0];
xValue.firstChild.nodeValue = nodeNewVal;
But I do not manage to see the new DOM values on the screen.
How can I force "Refresh screen by DOM" ?
Note: reload() would not help, because it loads the original page, and I want to see the page with the DOM changes.
Edit - the code I use:
XML file (my_template.xml):
<myXmlRoot>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
<device>
<input><name>"name 1"</name><value>{replaceMe!}</value></input>
<input><name>"name 2"</name><value>{replaceMe!}</value></input>
</device>
</myXmlRoot>
HTML file:
<html>
<head>
<title>Open XML in External Window</title>
</head>
<body>
<button onClick="fShowXmlInExternalWin()">Show XML </button> (does not show the updated version on the screen)
<script type="text/javascript" >
var wxml;
var xDoc;
var xDevices, xInputs;
var xDevice, xInput;
function fSetXmlAInput(iDevice, iNode, nodeNewVal) {
xInput = xInputs[iNode];
xValue = xInput.getElementsByTagName("value")[0];
// change node value:
// console.log("nodeVal: " + xValue.firstChild.nodeValue);
xValue.firstChild.nodeValue = nodeNewVal;
// console.log("newVal: " + xValue.firstChild.nodeValue);
}
function fSetXmlDevice(iDevice) {
xDevice = xDevices[iDevice];
xInputs = xDevice.getElementsByTagName("input");
fSetXmlAInput(iDevice, 0, "22");
fSetXmlAInput(iDevice, 1, "33");
}
function fShowXmlInExternalWin() {
wxml = window.open("my_template.xml", "my_xml" );
xDoc = wxml.document;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
return false;
}
</script>
</body>
</html>
On first view you have the following error:
Timestamp: 6/5/2013 2:32:11 μμ
Error: ReferenceError: xExDoc is not defined
I don't see xExDoc defined somewhere in your code...I only see xDoc.
Update:
In addition, your i variable is not defined causing another error.
Also, you should use firebug to debug the code step by step or as a minimum add
alert(xNodes.length);
in order to check how many tags are found.
Update 2: (includes solution)
I've found two possible options:
- Use a window.open with data:text/xml to render the modified XML directly.
- Use appendChild and removeChild to force a significant change to the XML DOM and the browser to referesh the page.
Option 1 keeps XML browser formatting intact while option 2 causes the browser to view the XML as not xml content any more and the formatting is lost.
Code is below:
<html>
<head>
<title>Open XML in External Window</title>
</head>
<body>
<button onClick="fShowXmlInExternalWin()">Show XML </button> (shows updated on the screen but loses XML formatting)<br/>
<button onClick="alternativeLoadXML()">Alternative Show XML </button> (shows updated XML, as XML is loaded - changed, and XML is rendered)<br/>
<button onClick="alternativeLoadXML2()">Alternative Show XML 2 </button> (open window with original XML, change XML model, reload window)<br/>
<script type="text/javascript" >
var wxml;
var xDoc;
var xDevices, xInputs;
var xDevice, xInput;
function fSetXmlAInput(iDevice, iNode, nodeNewVal) {
xInput = xInputs[iNode];
xValue = xInput.getElementsByTagName("value")[0];
// change node value:
// console.log("nodeVal: " + xValue.firstChild.nodeValue);
xValue.firstChild.nodeValue = nodeNewVal;
// console.log("newVal: " + xValue.firstChild.nodeValue);
}
function fSetXmlDevice(iDevice) {
xDevice = xDevices[iDevice];
xInputs = xDevice.getElementsByTagName("input");
fSetXmlAInput(iDevice, 0, "22");
fSetXmlAInput(iDevice, 1, "33");
}
function fShowXmlInExternalWin() {
wxml = window.open("my_template.xml", "my_xml" );
//Delay 500ms for window to load first
window.setTimeout("triggerWindow()",500);
return false;
}
//Further options Below
//First option, trigger refresh with append and remove - loses formatting
function triggerWindow()
{
xDoc = wxml.document;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
//Add and remove element to trigger referesh
var p = document.createElement("test");
xDoc.firstChild.appendChild(p);
xDoc.firstChild.removeChild(p);
}
function alternativeLoadXML()
{
// load xml file
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "my_template.xml", false);
xhttp.send();
xDoc = xhttp.responseXML;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
var xmlText = new XMLSerializer().serializeToString(xDoc);
window.open('data:text/xml,' + xmlText);
}
//Second option, open window, change XML, reload window with custom xml address
function triggerWindow2()
{
xDoc = wxml.document;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
var xmlText = new XMLSerializer().serializeToString(xDoc);
window.open('data:text/xml,' + xmlText, "my_xml");
}
function alternativeLoadXML2()
{
wxml = window.open("my_template.xml", "my_xml" );
//Delay 500ms for window to load first
window.setTimeout("triggerWindow2()",500);
}
</script>
</body>
</html>
Update 3:
Using document.open and document.write on the new window works in IE to output the correct XML but the XML rendering is off - seems to render the content as HTML...
function alternativeLoadXML3() {
// load xml file
if (window.XMLHttpRequest) {
xhttp = new XMLHttpRequest();
} else { // IE 5/6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET", "my_template.xml", false);
xhttp.send();
xDoc = xhttp.responseXML;
xDevices = xDoc.getElementsByTagName("device");
fSetXmlDevice(1);
var xmlText = serializeXmlNode(xDoc);
var newWindow = window.open("my_template.xml", "Test", "width=300,height=300,scrollbars=1,resizable=1");
newWindow.document.open();
newWindow.document.write(xmlText);
newWindow.document.close()
};
