Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML

Creating dynamic XML/XSLT sub pages within an existing page

3.12/5 (11 votes)
14 Oct 2005CPOL2 min read 1   366  
Use Div and the custom “smartDiv” JavaScript object to create a shopping module.

Introduction

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.

JavaScript
function smartDiv(rootname,URL) {
  this.Display = document.createElement('div'); // create 
  this.Display.id = 'bask';
  document.body.appendChild(this.Display);
  this.Display.style.position = '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.xml_dom.loadXML('');
  this.root = this.xml_dom.createElement(rootname);
  this.xml_dom.appendChild(this.root);
  this.xslresponse =null;
  
  this.TransformXML = function() {
    try {
      this.xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
      this.xmlHTTP.open("GET",URL,false);
      this.xmlHTTP.send();
      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.xml.loadXML(this.xml_dom.xml);
      this.xsl.loadXML(this.xslresponse);
      this.Display.innerHTML = this.xml.transformNode(this.xsl); 
    } catch (e){
      alert(e.description);
    }
  }
}

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.

    JavaScript
    function initDiv() {
     Basket = new smartDiv('Basket','basket.xslt');
     Basket.SetClassName('Border');
     Basket.SetSize(180,280);
     Basket.SetPosition(200,20);
     Basket.SetBorder('dashed','#999999',1); 
    }
  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:

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

    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.

    JavaScript
    smartDiv.prototype.BuildXML = function() {
     var elm = document.forms[0].elements;
     oSelection = this.xml_dom.selectNodes("//Product");
     oSelection.removeAll();
     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;
        Product.setAttributeNode(attr);
        attr = null;
       
        ---------------------------
    
        this.root.appendChild(Product);
     }} 
     this.TransformXML();
    }
    var Basket;

Other functionality

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

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

License

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