• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 330
  • Last Modified:

Add, Update and Delete XML nodes - JavaScript

I’m wondering if it’s possible to:

Add, Update and Delete nodes from an existing XML file, using JavaScript on Client side (No Server)
If you can provide me with full example I will double the points.

Mo

0
mohd130
Asked:
mohd130
  • 8
  • 7
1 Solution
 
b1xml2Commented:
First, you need to understand how to create from scratch an XML Document.
PLEASE NOTE
-----------
1. In order to run the scripts successfully in ALL scenarios, please run them locally e.g. d:\data.html. This is because we are using the default Microsoft StyleSheet to show how the XML Data looks like.

<html>
<head>
<title>XMLDOM Manipulation</title>
<script language="javascript">
var oXML = new ActiveXObject("Microsoft.XMLDOM");
var oXSLT = new ActiveXObject("Microsoft.XMLDOM");
var wXML;
oXML.async = false;
oXSLT.async = true;
oXSLT.load("res://msxml.dll/defaultss.xsl");

/*****BEGINNING OF GENERIC SCRIPTS****/
/*****COPYRIGHT BY BRANDON DRIESEN****/

//IXMLDOMElement AddElementDOM(IXMLDOMElement oParent,string szName, [string szText])
function AddElementDOM(oParent,szName,szText) {
  var oDOM = oParent.ownerDocument;
  var newElement = oDOM.createElement(szName);
  if ("string" == typeof(szText) && szText.length != 0) newElement.text = szText;
  oParent.appendChild(newElement);
  return newElement;
}

//void AddAttributes(IXMLDOMElement oNode, variant[] vtList);
function AddAttributesDOM(oNode,vtList) {
 if (oNode.nodeType != 1) return;
  for (var i=0;i<vtList.length;i+=2) {
    oNode.setAttribute(vtList[i],vtList[i+1]);
  }
}

//void RemoveAttributesDOM(IXMLDOMElement variant[] vtList);
function RemoveAttributesDOM(oNode,vtList) {
  if (oNode.nodeType != 1) return;
  for (var i=0;i<vtList.length;i++) {
    oNode.removeAttribute(vtList[i]);
  }
}

//void RemoveElementDOM(IXMLDOMElement oNode)
function RemoveElementDOM(oNode) {
  var oParent = oNode.parentNode;
  oParent.removeChild(oNode);
}

//IXMLDOMElement SetRootElementDOM(DOMDocument oDOM, string szName, [string szEncoding]
function SetRootElementDOM(oDOM,szName,szEncoding) {
 szEncoding = "string" == typeof(szEncoding) && szEncoding.length != 0 ? " encoding='" + szEncoding + "'" : "";
 StripRootElementsDOM(oDOM);
 oDOM.appendChild(oDOM.createProcessingInstruction("xml","version='1.0'" + szEncoding));
 oDOM.appendChild(oDOM.createElement(szName));
 return oDOM.documentElement;
}

//void StripRootElementsDOM(DOMDocument oDOM)
function StripRootElementsDOM(oDOM) {
  for (var i=0; i<oDOM.childNodes.length;i++) {
    if (oDOM.childNodes.item(i).nodeType != 1) {
     oDOM.removeChild(oDOM.childNodes.item(i));
    }
  }
  if (oDOM.documentElement) oDOM.removeChild(oDOM.documentElement);
}

window.onload = init;

function init() {
 var root = SetRootElementDOM(oXML,"payload","iso-8859-1");
 AddAttributesDOM(root,["timestamp",getISODateTime(new Date()),"users",1034]);
 var section = [];
 section[0] = AddElementDOM(root,"section");
 AddAttributesDOM(section[0],["category","food"]);
 section[1] = AddElementDOM(root,"section");
 AddAttributesDOM(section[1],["category","drinks","type","non-alcoholic"]);
 AddAttributesDOM(AddElementDOM(section[0],"item"),["name","Burmese Curry","price","USD10"]);
 AddAttributesDOM(AddElementDOM(section[1],"subitem"),["name","Super Water","price","USD200"]);
 DisplayXML();
}

function getISODateTime(datItem) {
 var szDate = datItem.getYear() + "-";
 szDate += (datItem.getMonth() < 9 ? "0" : "") + (datItem.getMonth() + 1) + "-";
 szDate += (datItem.getDate() < 10 ? "0" : "") + datItem.getDate() + "T";
 szDate += (datItem.getHours() < 10 ? "0" : "") + datItem.getHours() + ":";
 szDate += (datItem.getMinutes() < 10 ? "0" : "") + datItem.getMinutes() + ":";
 szDate += (datItem.getSeconds() < 10 ? "0" : "") + datItem.getSeconds();
 return szDate;
}

function DisplayXML() {
  if (oXSLT.readyState != 4) {
    window.setTimeout("DisplayXML()",100);
  } else {
    if (wXML != null && "object" == typeof(wXML.opener) && wXML.opener != null) wXML.close();
    wXML = window.open("about:blank","myXMLData");
    wXML.document.write(oXML.transformNode(oXSLT));
    wXML.document.close();
  }
 
}

</script>
</head>
<body></body>
</html>

0
 
b1xml2Commented:
The XML Created Is (copy and save this as data.xml)
===================
<?xml version="1.0" encoding="iso-8859-1"?>
<payload timestamp="2002-05-12T22:01:54" users="1034">
<section category="food">
<item name="Burmese Curry" price="USD10"/>
</section>
<section category="drinks" type="non-alcoholic">
<subitem name="Super Water" price="USD200"/>
</section>
</payload>


The HTML (which should be opened locally again)
================================================
<html>
<head>
<title>XMLDOM Manipulation</title>
<script language="javascript">
var oXML = new ActiveXObject("Microsoft.XMLDOM");
var oXSLT = new ActiveXObject("Microsoft.XMLDOM");
var wXML;
oXML.async = false;
oXML.load("data.xml");
oXSLT.async = true;
oXSLT.load("res://msxml.dll/defaultss.xsl");

/*****BEGINNING OF GENERIC SCRIPTS****/
/*****COPYRIGHT BY BRANDON DRIESEN****/

//IXMLDOMElement AddElementDOM(IXMLDOMElement oParent,string szName, [string szText])
function AddElementDOM(oParent,szName,szText) {
  var oDOM = oParent.ownerDocument;
  var newElement = oDOM.createElement(szName);
  if ("string" == typeof(szText) && szText.length != 0) newElement.text = szText;
  oParent.appendChild(newElement);
  return newElement;
}

//void AddAttributes(IXMLDOMElement oNode, variant[] vtList);
function AddAttributesDOM(oNode,vtList) {
 if (oNode.nodeType != 1) return;
  for (var i=0;i<vtList.length;i+=2) {
    oNode.setAttribute(vtList[i],vtList[i+1]);
  }
}

//void RemoveAttributesDOM(IXMLDOMElement variant[] vtList);
function RemoveAttributesDOM(oNode,vtList) {
  if (oNode.nodeType != 1) return;
  for (var i=0;i<vtList.length;i++) {
    oNode.removeAttribute(vtList[i]);
  }
}

//void RemoveElementDOM(IXMLDOMElement oNode)
function RemoveElementDOM(oNode) {
  var oParent = oNode.parentNode;
  oParent.removeChild(oNode);
}

//IXMLDOMElement SetRootElementDOM(DOMDocument oDOM, string szName, [string szEncoding]
function SetRootElementDOM(oDOM,szName,szEncoding) {
 szEncoding = "string" == typeof(szEncoding) && szEncoding.length != 0 ? " encoding='" + szEncoding + "'" : "";
 StripRootElementsDOM(oDOM);
 oDOM.appendChild(oDOM.createProcessingInstruction("xml","version='1.0'" + szEncoding));
 oDOM.appendChild(oDOM.createElement(szName));
 return oDOM.documentElement;
}

//void StripRootElementsDOM(DOMDocument oDOM)
function StripRootElementsDOM(oDOM) {
  for (var i=0; i<oDOM.childNodes.length;i++) {
    if (oDOM.childNodes.item(i).nodeType != 1) {
     oDOM.removeChild(oDOM.childNodes.item(i));
    }
  }
  if (oDOM.documentElement) oDOM.removeChild(oDOM.documentElement);
}

window.onload = init;

function init() {
 //removal of element
 var oSection = [];
 oSection[0] = oXML.selectSingleNode("//section[@category='drinks']");
 if (oSection[0]) RemoveElementDOM(oSection[0]);
 //adding a new element with attributes to food section
 oSection[1] = oXML.selectSingleNode("//section[@category='food']");
 if (oSection[1]) {
  AddAttributesDOM(AddElementDOM(oSection[1],"item"),["name","Fish & Chips","price","USD200"]);
  AddAttributesDOM(AddElementDOM(oSection[1],"item"),["name","Hotdog","price","USD100"]);
  //get reference to new element created
  var oFood = AddElementDOM(oSection[1],"item");
  //add attributes to food
  AddAttributesDOM(oFood,["name","Steak","price","USD200"]);
  //add elements and attributes to food
  AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","North","discount",0.1]);
  AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","South","discount",0.15]);
  AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","West","discount",0.07]);
 }
 //change attributes
 AddAttributesDOM(oXML.documentElement,["timestamp",getISODateTime(new Date()),"data","true"]);
 RemoveAttributesDOM(oXML.documentElement,["users"]);
 DisplayXML();
}

function getISODateTime(datItem) {
 var szDate = datItem.getYear() + "-";
 szDate += (datItem.getMonth() < 9 ? "0" : "") + (datItem.getMonth() + 1) + "-";
 szDate += (datItem.getDate() < 10 ? "0" : "") + datItem.getDate() + "T";
 szDate += (datItem.getHours() < 10 ? "0" : "") + datItem.getHours() + ":";
 szDate += (datItem.getMinutes() < 10 ? "0" : "") + datItem.getMinutes() + ":";
 szDate += (datItem.getSeconds() < 10 ? "0" : "") + datItem.getSeconds();
 return szDate;
}

function DisplayXML() {
  if (oXSLT.readyState != 4) {
    window.setTimeout("DisplayXML()",100);
  } else {
    if (wXML != null && "object" == typeof(wXML.opener) && wXML.opener != null) wXML.close();
    wXML = window.open("about:blank","myXMLData");
    wXML.document.write(oXML.transformNode(oXSLT));
    wXML.document.close();
  }
 
}

</script>
</head>
<body></body>
</html>


This is the manipulated XML Tree
================================
<?xml version="1.0" encoding="iso-8859-1"?>
<payload timestamp="2002-05-12T22:25:38" data="true">
<section category="food">
      <item name="Burmese Curry" price="USD10"/>
      <item name="Fish &amp; Chips" price="USD200"/>
      <item name="Hotdog" price="USD100"/>
      <item name="Steak" price="USD200">
            <locality name="North" discount="0.1"/>
            <locality name="South" discount="0.15"/>
            <locality name="West" discount="0.07"/>
      </item>
</section>
</payload>

Regards,

Brandon Driesen
0
 
mohd130Author Commented:
Many Thanks Brandon

I'm sure you have the html file which call each function on the script, please if you can copy it here, because I found that it’s very difficult to me to understand each function without the parameter.

Mo

0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
b1xml2Commented:
I will make it easier for you:

STEP 1
=======

Please copy and paste the following in notepad and save it as data.xml (not data.xml.txt!!!)

XML Document (data.xml)
=======================
<?xml version="1.0" encoding="iso-8859-1"?>
<payload timestamp="2002-05-12T22:01:54" users="1034">
<section category="food">
<item name="Burmese Curry" price="USD10"/>
</section>
<section category="drinks" type="non-alcoholic">
<subitem name="Super Water" price="USD200"/>
</section>
</payload>

0
 
b1xml2Commented:
STEP 2
=======

Please copy and paste the following in notepad and save it as data.html and in the same folder/location as data.xml


HTML Document (data.html)
=========================
<html>
<head>
<title>XMLDOM Manipulation</title>
<script language="javascript">
var oXML = new ActiveXObject("Microsoft.XMLDOM");
var oXSLT = new ActiveXObject("Microsoft.XMLDOM");
var wXML;
oXML.async = false;
oXML.load("data.xml");
oXSLT.async = true;
oXSLT.load("res://msxml.dll/defaultss.xsl");

/*****BEGINNING OF GENERIC SCRIPTS****/
/*****COPYRIGHT BY BRANDON DRIESEN****/

//IXMLDOMElement AddElementDOM(IXMLDOMElement oParent,string szName, [string szText])
function AddElementDOM(oParent,szName,szText) {
 var oDOM = oParent.ownerDocument;
 var newElement = oDOM.createElement(szName);
 if ("string" == typeof(szText) && szText.length != 0) newElement.text = szText;
 oParent.appendChild(newElement);
 return newElement;
}

//void AddAttributes(IXMLDOMElement oNode, variant[] vtList);
function AddAttributesDOM(oNode,vtList) {
if (oNode.nodeType != 1) return;
 for (var i=0;i<vtList.length;i+=2) {
   oNode.setAttribute(vtList[i],vtList[i+1]);
 }
}

//void RemoveAttributesDOM(IXMLDOMElement variant[] vtList);
function RemoveAttributesDOM(oNode,vtList) {
 if (oNode.nodeType != 1) return;
 for (var i=0;i<vtList.length;i++) {
   oNode.removeAttribute(vtList[i]);
 }
}

//void RemoveElementDOM(IXMLDOMElement oNode)
function RemoveElementDOM(oNode) {
 var oParent = oNode.parentNode;
 oParent.removeChild(oNode);
}

//IXMLDOMElement SetRootElementDOM(DOMDocument oDOM, string szName, [string szEncoding]
function SetRootElementDOM(oDOM,szName,szEncoding) {
szEncoding = "string" == typeof(szEncoding) && szEncoding.length != 0 ? " encoding='" + szEncoding
+ "'" : "";
StripRootElementsDOM(oDOM);
oDOM.appendChild(oDOM.createProcessingInstruction("xml","version='1.0'" + szEncoding));
oDOM.appendChild(oDOM.createElement(szName));
return oDOM.documentElement;
}

//void StripRootElementsDOM(DOMDocument oDOM)
function StripRootElementsDOM(oDOM) {
 for (var i=0; i<oDOM.childNodes.length;i++) {
   if (oDOM.childNodes.item(i).nodeType != 1) {
    oDOM.removeChild(oDOM.childNodes.item(i));
   }
 }
 if (oDOM.documentElement) oDOM.removeChild(oDOM.documentElement);
}

window.onload = init;

function init() {
//removal of element
var oSection = [];
oSection[0] = oXML.selectSingleNode("//section[@category='drinks']");
if (oSection[0]) RemoveElementDOM(oSection[0]);
//adding a new element with attributes to food section
oSection[1] = oXML.selectSingleNode("//section[@category='food']");
if (oSection[1]) {
 AddAttributesDOM(AddElementDOM(oSection[1],"item"),["name","Fish & Chips","price","USD200"]);
 AddAttributesDOM(AddElementDOM(oSection[1],"item"),["name","Hotdog","price","USD100"]);
 //get reference to new element created
 var oFood = AddElementDOM(oSection[1],"item");
 //add attributes to food
 AddAttributesDOM(oFood,["name","Steak","price","USD200"]);
 //add elements and attributes to food
 AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","North","discount",0.1]);
 AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","South","discount",0.15]);
 AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","West","discount",0.07]);
}
//change attributes
AddAttributesDOM(oXML.documentElement,["timestamp",getISODateTime(new Date()),"data","true"]);
RemoveAttributesDOM(oXML.documentElement,["users"]);
DisplayXML();
}

function getISODateTime(datItem) {
var szDate = datItem.getYear() + "-";
szDate += (datItem.getMonth() < 9 ? "0" : "") + (datItem.getMonth() + 1) + "-";
szDate += (datItem.getDate() < 10 ? "0" : "") + datItem.getDate() + "T";
szDate += (datItem.getHours() < 10 ? "0" : "") + datItem.getHours() + ":";
szDate += (datItem.getMinutes() < 10 ? "0" : "") + datItem.getMinutes() + ":";
szDate += (datItem.getSeconds() < 10 ? "0" : "") + datItem.getSeconds();
return szDate;
}

function DisplayXML() {
 if (oXSLT.readyState != 4) {
   window.setTimeout("DisplayXML()",100);
 } else {
   if (wXML != null && "object" == typeof(wXML.opener) && wXML.opener != null) wXML.close();
   wXML = window.open("about:blank","myXMLData");
   wXML.document.write(oXML.transformNode(oXSLT));
   wXML.document.close();
 }
 
}

</script>
</head>
<body></body>
</html>




0
 
b1xml2Commented:
STEP 3
======
Open data.html in your browser
0
 
mohd130Author Commented:
I did that it display data.xml file
what I need is how to call each function in for example a command button.

For example :
function AddElementDOM(oParent,szName,szText)

what is the value of oParent,szName,szText to add new element.

Thanks
Mo
0
 
mohd130Author Commented:
Sorry Brandon I didn’t see that the htm page start with the function init().

I have another question why the new element is not saved on data.xml?

Thanks

Mo
0
 
b1xml2Commented:
Because the XML Tree that is manipulated is stored in-memory on the client's memory namespace. If you want to save the results, you must change the following.

1. Rename data.html to data.hta

2. Change the following in DisplayXML()
function DisplayXML() {
if (oXSLT.readyState != 4) {
  window.setTimeout("DisplayXML()",100);
} else {
  if (wXML != null && "object" == typeof(wXML.opener) && wXML.opener != null) wXML.close();
  wXML = window.open("about:blank","myXMLData");
  wXML.document.write(oXML.transformNode(oXSLT));
  wXML.document.close();
  oXML.save("data.xml");
}

}

If you want to have the changes reflected on the server, you must post the new XML Tree via XMLHTTP back to the server (IIS).

0
 
mohd130Author Commented:
I got this message :
Permission Denied

Any suggestion?

Mo

0
 
mohd130Author Commented:
I got this message :
Permission Denied

Any suggestion?

Mo

0
 
mohd130Author Commented:
Thanks Brandon

It's working fine
last question how to post the new XML Tree via XMLHTTP
back to the server (IIS).
0
 
b1xml2Commented:
So if this page was on a web server and the client was to view it, then the following scripts would change:

Step 1
========
data.xml should be on the web server as well.
the file should be in the same location as the html file


data.html on IIS
=================
<html>
<head>
<title>Post</title>
<script language="javascript">
var oXML = new ActiveXObject("Microsoft.XMLDOM");
var oHTTP = new ActiveXObject("Microsoft.XMLHTTP");

/*****BEGINNING OF GENERIC SCRIPTS****/
/*****COPYRIGHT BY BRANDON DRIESEN****/

//IXMLDOMElement AddElementDOM(IXMLDOMElement oParent,string szName, [string szText])
function AddElementDOM(oParent,szName,szText) {
var oDOM = oParent.ownerDocument;
var newElement = oDOM.createElement(szName);
if ("string" == typeof(szText) && szText.length != 0) newElement.text = szText;
oParent.appendChild(newElement);
return newElement;
}

//void AddAttributes(IXMLDOMElement oNode, variant[] vtList);
function AddAttributesDOM(oNode,vtList) {
if (oNode.nodeType != 1) return;
for (var i=0;i<vtList.length;i+=2) {
  oNode.setAttribute(vtList[i],vtList[i+1]);
}
}

//void RemoveAttributesDOM(IXMLDOMElement variant[] vtList);
function RemoveAttributesDOM(oNode,vtList) {
if (oNode.nodeType != 1) return;
for (var i=0;i<vtList.length;i++) {
  oNode.removeAttribute(vtList[i]);
}
}

//void RemoveElementDOM(IXMLDOMElement oNode)
function RemoveElementDOM(oNode) {
var oParent = oNode.parentNode;
oParent.removeChild(oNode);
}

//IXMLDOMElement SetRootElementDOM(DOMDocument oDOM, string szName, [string szEncoding]
function SetRootElementDOM(oDOM,szName,szEncoding) {
szEncoding = "string" == typeof(szEncoding) && szEncoding.length != 0 ? " encoding='" + szEncoding
+ "'" : "";
StripRootElementsDOM(oDOM);
oDOM.appendChild(oDOM.createProcessingInstruction("xml","version='1.0'" + szEncoding));
oDOM.appendChild(oDOM.createElement(szName));
return oDOM.documentElement;
}

//void StripRootElementsDOM(DOMDocument oDOM)
function StripRootElementsDOM(oDOM) {
for (var i=0; i<oDOM.childNodes.length;i++) {
  if (oDOM.childNodes.item(i).nodeType != 1) {
   oDOM.removeChild(oDOM.childNodes.item(i));
  }
}
if (oDOM.documentElement) oDOM.removeChild(oDOM.documentElement);
}

window.onload = init;

function init() {
//removal of element
var oSection = [];
oSection[0] = oXML.selectSingleNode("//section[@category='drinks']");
if (oSection[0]) RemoveElementDOM(oSection[0]);
//adding a new element with attributes to food section
oSection[1] = oXML.selectSingleNode("//section[@category='food']");
if (oSection[1]) {
AddAttributesDOM(AddElementDOM(oSection[1],"item"),["name","Fish & Chips","price","USD200"]);
AddAttributesDOM(AddElementDOM(oSection[1],"item"),["name","Hotdog","price","USD100"]);
//get reference to new element created
var oFood = AddElementDOM(oSection[1],"item");
//add attributes to food
AddAttributesDOM(oFood,["name","Steak","price","USD200"]);
//add elements and attributes to food
AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","North","discount",0.1]);
AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","South","discount",0.15]);
AddAttributesDOM(AddElementDOM(oFood,"locality"),["name","West","discount",0.07]);
}
//change attributes
AddAttributesDOM(oXML.documentElement,["timestamp",getISODateTime(new Date()),"data","true"]);
RemoveAttributesDOM(oXML.documentElement,["users"]);
 document.all.btnPost.disabled = false;
}

function getISODateTime(datItem) {
var szDate = datItem.getYear() + "-";
szDate += (datItem.getMonth() < 9 ? "0" : "") + (datItem.getMonth() + 1) + "-";
szDate += (datItem.getDate() < 10 ? "0" : "") + datItem.getDate() + "T";
szDate += (datItem.getHours() < 10 ? "0" : "") + datItem.getHours() + ":";
szDate += (datItem.getMinutes() < 10 ? "0" : "") + datItem.getMinutes() + ":";
szDate += (datItem.getSeconds() < 10 ? "0" : "") + datItem.getSeconds();
return szDate;
}

function postData() {
 oXMLHTTP.open("POST","postXML.asp",false);
 oXMLHTTP.send(oXML);
}

</script>
</head>
<body>
<button id="btnPost">Post It!</button>
</body>
</html>

postXML.asp should be in the same location

postXML.asp
===========
<%
 Dim oPayload
 Set oPayload = Server.CreateObject("Microsoft.XMLDOM");
 oPayload.async = False
 oPayload.load Request
 If oPayload.parseError.errorCode = 0 Then
  oPayload.save "data.xml"
 End If

%>

Finally,
IUSR_MachineName should have at least change NTFS access on the web application

0
 
b1xml2Commented:
Errata
=======
postXML.asp
===========
<%
Dim oPayload
Set oPayload = Server.CreateObject("Microsoft.XMLDOM");
oPayload.async = False
oPayload.load Request
If oPayload.parseError.errorCode = 0 Then
 oPayload.save Server.MapPath("data.xml")
End If

%>

0
 
mohd130Author Commented:
Many Thanks,
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 8
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now