Click here to Skip to main content
Click here to Skip to main content
Go to top

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.

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.

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.

    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:

    <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.

    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.

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)

Share

About the Author

sashok(rus)

United States United States
No Biography provided

Comments and Discussions

 
General10x PinmemberWashu Seino25-Oct-05 3:55 
GeneralRe: 10x PinmemberAlex.Bykovsky25-Oct-05 7:48 
GeneralNot very usable in real world PinmemberJohn Hann14-Oct-05 11:33 
GeneralRe: Not very usable in real world PinmemberAlex.Bykovsky14-Oct-05 11:38 
GeneralRe: Not very usable in real world PinmemberTornn15-Oct-05 11:59 
GeneralRe: Not very usable in real world PinmemberAlex.Bykovsky15-Oct-05 12:58 
GeneralRe: Not very usable in real world PinmemberAlex.Bykovsky14-Oct-05 11:45 
THe whole point is that DIV tag is not pre-created. It's dynamic. I do use class attribute - download source and take a look at js file. Anyway it's just a sample you are welcome to improve it.
GeneralContenders to the throne Pinmemberfwsouthern14-Oct-05 14:51 
GeneralRe: Not very usable in real world Pinmembertripwirezone19-Oct-05 13:13 
GeneralRe: Not very usable in real world PinmemberAlex.Bykovsky20-Oct-05 5:37 
QuestionSource vs Demo ??? Pinmemberfwsouthern14-Oct-05 8:56 
AnswerRe: Source vs Demo ??? PinmemberAlex.Bykovsky14-Oct-05 10:23 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140916.1 | Last Updated 14 Oct 2005
Article Copyright 2005 by sashok(rus)
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid