Click here to Skip to main content
Click here to Skip to main content

Creating dynamic XML/XSLT sub pages within an existing page

, 14 Oct 2005 CPOL
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 4:55 
GeneralRe: 10x PinmemberAlex.Bykovsky25-Oct-05 8:48 
GeneralNot very usable in real world PinmemberJohn Hann14-Oct-05 12:33 
While this code is an interesting application of client-side XSL, it is not very usable. Readers should be aware that it only works on IE -- and IE 7.0 unless web users download and install MSXML 4.0. IE 6.0 users only have MSXML 2.6 unless it is installed by other software (Office 2003, for example).
 
Firefox, Opera, and Safari users are out of luck with this code, unfortunately. This article would be a lot more useful if you showed how to do this using cross-browser (and/or standards-compliant) methods. I know of very few instances where IE is the only browser. Even our largest customers are using Firefox, and many public web sites are seeing in excess of 10% Firefox usage....
 
It would be nice if you created a reusable class. You started down this path, but didn't quite finish the job. Smile | :) Examples: hard-coding the ID, assuming the DIV tag is not pre-created, not allowing for a class attribute, and displaying an alert message rather than raising an event...

GeneralRe: Not very usable in real world PinmemberAlex.Bykovsky14-Oct-05 12:38 
GeneralRe: Not very usable in real world PinmemberTornn15-Oct-05 12:59 
GeneralRe: Not very usable in real world PinmemberAlex.Bykovsky15-Oct-05 13:58 
GeneralRe: Not very usable in real world PinmemberAlex.Bykovsky14-Oct-05 12:45 
GeneralContenders to the throne Pinmemberfwsouthern14-Oct-05 15:51 
GeneralRe: Not very usable in real world Pinmembertripwirezone19-Oct-05 14:13 
GeneralRe: Not very usable in real world PinmemberAlex.Bykovsky20-Oct-05 6:37 
QuestionSource vs Demo ??? Pinmemberfwsouthern14-Oct-05 9:56 
AnswerRe: Source vs Demo ??? PinmemberAlex.Bykovsky14-Oct-05 11: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 | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 14 Oct 2005
Article Copyright 2005 by sashok(rus)
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid