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:
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:
SmartDiv has �SET� properties describing DIV�s visual appearance.
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. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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...