Link to home
Start Free TrialLog in
Avatar of mohd130
mohd130Flag for United Arab Emirates

asked on

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

Avatar of b1xml2
b1xml2
Flag of Australia image
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>

Avatar of b1xml2
b1xml2
Flag of Australia image
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
Avatar of mohd130
mohd130
Flag of United Arab Emirates image

ASKER

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

Avatar of b1xml2
b1xml2
Flag of Australia image
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>

Avatar of b1xml2
b1xml2
Flag of Australia image
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>




Avatar of b1xml2
b1xml2
Flag of Australia image
STEP 3
======
Open data.html in your browser
Avatar of mohd130
mohd130
Flag of United Arab Emirates image

ASKER

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
Avatar of mohd130
mohd130
Flag of United Arab Emirates image

ASKER

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
Avatar of b1xml2
b1xml2
Flag of Australia image
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).

Avatar of mohd130
mohd130
Flag of United Arab Emirates image

ASKER

I got this message :
Permission Denied

Any suggestion?

Mo

Avatar of mohd130
mohd130
Flag of United Arab Emirates image

ASKER

I got this message :
Permission Denied

Any suggestion?

Mo

Avatar of mohd130
mohd130
Flag of United Arab Emirates image

ASKER

Thanks Brandon

It's working fine
last question how to post the new XML Tree via XMLHTTP
back to the server (IIS).
ASKER CERTIFIED SOLUTION
Avatar of b1xml2
b1xml2
Flag of Australia image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of b1xml2
b1xml2
Flag of Australia image
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

%>

Avatar of mohd130
mohd130
Flag of United Arab Emirates image

ASKER

Many Thanks,