Click here to Skip to main content
13,453,939 members (48,122 online)
Click here to Skip to main content
Add your own
alternative version


14 bookmarked
Posted 14 Oct 2005

Creating dynamic XML/XSLT sub pages within an existing page

, 14 Oct 2005
Rate this:
Please Sign up or sign in to vote.
Use Div and the custom “smartDiv” JavaScript object to create a shopping module.


Using <DIV> elements creates logical divisions for your web page. With a little help from JavaScript, Div can also be used in changing visual appearances of the pages. The big deal about DIV is the innerHTML property. By manipulating innerHTML, a page can be turned into a set of appearance, data, and style independent sub pages.

Sample screenshot

Presented above is the product ordering menu and basket. The basket uses my custom "smartDiv" JavaScript object. The use of this object helps to create a persistent, save state shopping module within the page. "smartDiv" is an object located in an external JavaScript file. It has two parameters:

  1. XML root name
  2. URL of the transformer (XSLT)

smartDiv has "SET" properties describing the DIV's visual appearance.

  • SetClassName
  • SetPosition
  • SetSize
  • SetBorder

Also, it has another important property xml_dom, which will be explained in details later. The only method smartDiv has is the TransformXML method. This function retrieves the XSLT by using XMLHTTP and the parameter URL. The next step transforms xml_dom into HTML by using XSLT, and writes the result into the DIV's innerHTML.

function smartDiv(rootname,URL) {
  this.Display = document.createElement('div'); // create = 'bask';
  document.body.appendChild(this.Display); = 'absolute'; 
  this.Display.innerHTML ='';
  this.SetClassName = function(cname) {
  this.SetSize = function(w,h) {
  this.SetPosition = function(l,t) {
  this.SetBorder = function(bs,bc,bw) { 
  this.xmlHTTP = null;
  this.xml_dom = new ActiveXObject("MSXML2.DOMDocument");
  this.root = this.xml_dom.createElement(rootname);
  this.xslresponse =null;
  this.TransformXML = function() {
    try {
      this.xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");"GET",URL,false);
      this.xslresponse = this.xmlHTTP.responseText;
      this.xml = new ActiveXObject("Msxml2.DOMDocument.4.0");
      this.xsl = new ActiveXObject("Msxml2.DOMDocument.4.0");
      this.xml.async = false;
      this.xsl.async = false;
      this.xml.validateOnParse = false;
      this.Display.innerHTML = this.xml.transformNode(this.xsl); 
    } catch (e){

How to make "smartDiv" work

  1. The ordering page creates an instance of smartDiv.
  2. If you noticed, I call this instance Basket. Size, position, and style are set next. Also, the name of the root tag and XSLT's URL are assigned.

    function initDiv() {
     Basket = new smartDiv('Basket','basket.xslt');
  3. Each time the quantity of ordered goods changes, the XML is adjusted accordingly.
  4. This is where smartDiv's xml_dom property is used.

    Going through the list of "TEXT" elements, we collect them into xml_dom.

    It looks like this:

        <Product qty="1" name="fish" price="1.99"/>

    Now the only thing left for us to do is to call smartDiv's TransformXML method, and it does its job for us. The results are displayed within the DIV element.

    smartDiv.prototype.BuildXML = function() {
     var elm = document.forms[0].elements;
     oSelection = this.xml_dom.selectNodes("//Product");
     for (var i=0; i < elm.length ;++i){
        if (elm[i].type == 'text') {
        var Product = this.xml_dom.createElement("Product");
        var attr = this.xml_dom.createAttribute("qty");
        attr.value = elm[i].value;
        attr = null;
    var Basket;

Other functionality

The function Clear speaks for itself. It cleans all "TEXT" elements and xml_dom as well.

function Clear() {
  var elm = document.forms[0].elements;
  for (var i=0; i < elm.length ;++i){
    if (elm[i].type == 'text') {
       elm[i].value = '';


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
No Biography provided

You may also be interested in...


Comments and Discussions

General10x Pin
Washu Seino25-Oct-05 3:55
memberWashu Seino25-Oct-05 3:55 
GeneralRe: 10x Pin
Alex.Bykovsky25-Oct-05 7:48
memberAlex.Bykovsky25-Oct-05 7:48 
GeneralNot very usable in real world Pin
John Hann14-Oct-05 11:33
memberJohn Hann14-Oct-05 11:33 
GeneralRe: Not very usable in real world Pin
Alex.Bykovsky14-Oct-05 11:38
memberAlex.Bykovsky14-Oct-05 11:38 
GeneralRe: Not very usable in real world Pin
Tornn15-Oct-05 11:59
memberTornn15-Oct-05 11:59 
GeneralRe: Not very usable in real world Pin
Alex.Bykovsky15-Oct-05 12:58
memberAlex.Bykovsky15-Oct-05 12:58 
GeneralRe: Not very usable in real world Pin
Alex.Bykovsky14-Oct-05 11:45
memberAlex.Bykovsky14-Oct-05 11:45 
GeneralContenders to the throne Pin
fwsouthern14-Oct-05 14:51
memberfwsouthern14-Oct-05 14:51 
GeneralRe: Not very usable in real world Pin
tripwirezone19-Oct-05 13:13
membertripwirezone19-Oct-05 13:13 
GeneralRe: Not very usable in real world Pin
Alex.Bykovsky20-Oct-05 5:37
memberAlex.Bykovsky20-Oct-05 5:37 
QuestionSource vs Demo ??? Pin
fwsouthern14-Oct-05 8:56
memberfwsouthern14-Oct-05 8:56 
AnswerRe: Source vs Demo ??? Pin
Alex.Bykovsky14-Oct-05 10:23
memberAlex.Bykovsky14-Oct-05 10:23 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02-2016 | 2.8.180321.1 | Last Updated 14 Oct 2005
Article Copyright 2005 by sashok(rus)
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid