Skip to main content
Email Password   helpLost your password?

Creating dynamic xml/xslt sub pages within existing page.

 

Theory:

Using <DIV> elements creates logical divisions for your Web page. With a little help from javascript Div can also be used in changing visual appearance 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.

 

Practical:

Sample screenshot 

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

  1. xml root name;
  2. url of Transformer(xslt).

SmartDiv has �SET� properties describing DIV�s visual appearance.

  1. SetClassName;
  2. SetPosition;
  3. SetSize;
  4. SetBorder;

 

Also it has an important property xml_dom(will be explained in details later).  The only method smartDiv has - is Transform XML method. This function retrieves XSLT by using XMLHTTP and parameter URL. Next step it transforms xml_dom into html by using XSLT and writes result into 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('<?xml version="1.0" ?>');

  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. Ordering page creates an instance of smartDiv <body onload="initDiv();">

If you noticed, I call this instance � Basket. Size, position and style are being set next. Also 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);

 }

 

2. Each time quantity of ordered goods changes, XML adjusted accordingly.

This is where smartDiv�s xml_dom property is being used.

Going trough list of �TEXT� elements we collect them into xml_dom.

It looks like that:

<Basket>

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

</Basket>

Now the only thing left for us to do is to call smartDiv�s Transform method and it does its job for us. Results are being displayed within 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:

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();

}

 

 

You must Sign In to use this message board.
 
 
Per page   
 FirstPrevNext
General10x Pin
Washu Seino
4:55 25 Oct '05  
GeneralRe: 10x Pin
Alex.Bykovsky
8:48 25 Oct '05  
GeneralNot very usable in real world Pin
John Hann
12:33 14 Oct '05  
GeneralRe: Not very usable in real world Pin
Alex.Bykovsky
12:38 14 Oct '05  
GeneralRe: Not very usable in real world Pin
Tornn
12:59 15 Oct '05  
GeneralRe: Not very usable in real world Pin
Alex.Bykovsky
13:58 15 Oct '05  
GeneralRe: Not very usable in real world Pin
Alex.Bykovsky
12:45 14 Oct '05  
GeneralContenders to the throne Pin
fwsouthern
15:51 14 Oct '05  
GeneralRe: Not very usable in real world Pin
tripwirezone
14:13 19 Oct '05  
GeneralRe: Not very usable in real world Pin
Alex.Bykovsky
6:37 20 Oct '05  
GeneralSource vs Demo ??? Pin
fwsouthern
9:56 14 Oct '05  
GeneralRe: Source vs Demo ??? Pin
Alex.Bykovsky
11:23 14 Oct '05  


Last Updated 14 Oct 2005 | Advertise | Privacy | Terms of Use | Copyright © CodeProject, 1999-2009