Populating table from AJAX

@mityaDec 11.2009 — #Well the optimum approach would be to DOM-script your table in your JS, when the AJAX response is received. But it depends on the nature of your table and whether you can trust that to automated process or whether you need to put certain values in certain TDs in certain situations.

AJAX returns either XML or text, but a common approach is to return JSON-parsed text. This is basically text parsed as a JS object, e.g.

[CODE]{property: 'value', property2, 'value2', property3: {subproperty1: 'subvalue1'}} //etc[/CODE]

PHP has json_encode() to turn an array into JSON-parsed text, not sure about JSP. You then turn that into an object in your JS via:

[CODE]var json_obj = eval("(" + http.responseText + ")"); //where http is your ajax gateway[/CODE]

@aj_nscDec 12.2009 — #To the OP, it's your lucky day! Want to hear something cool? That's the exact approach I use and, because of that, I wrote a function that takes XML and recursively converts it to HTML and appends it to the dom element that you specify!!

You may have found the advantage in this method is that you use the same server side code to display a page/part of a page whether it is requested via AJAX, or a genuine (for lack of a better term) HTTP request such as when you click on a link/submit a form.

Here's how my code is used:

<i>
 </i>   myXML = XHRrequest.responseXML.documentElement;
 convertToHtml(myXML,domnode);

In the above code, domnode is a reference to a node where the contents of responseXML will be APPENDED. If you want to replace the entire contents of domnode, then just delete all child nodes first using:

<i>
 </i>   while(domnode.firstChild) {
 domnode.removeChild(domnode.firstChild);
 }

Here's the function:

<i>
 </i>function convertToHtml(xml,parent) {
 var i;
 for(i=0;i&lt;xml.childNodes.length;i++) {
 //create the HTML node
 if(xml.childNodes[i].nodeName == "#text") {
 theHtmlNode = document.createTextNode(xml.childNodes[i].nodeValue);
 } else {
 theHtmlNode = document.createElement(xml.childNodes[i].nodeName);
 }
 
 <i>	</i>	//get the attributes
 <i>	</i>	if(xml.childNodes[i].attributes) {
 <i>	</i>		for(m=0;m&lt;xml.childNodes[i].attributes.length;m++) {
 <i>	</i>			if(xml.childNodes[i].attributes[m].name == 'class') {
 <i>	</i>				theHtmlNode.className = xml.childNodes[i].attributes[m].value;
 <i>	</i>			} else if(xml.childNodes[i].attributes[m].name.match(/^on/)) {
 <i>	</i>				var theListenerString = xml.childNodes[i].attributes[m].value.match(/(.*)((.*));?/);
 <i>	</i>				var funcName = theListenerString[1];
 <i>	</i>				var funcArgs = theListenerString[2];
 
 <i>	</i>				var theFunctionString = funcName + "(e," + funcArgs + ");";
 
 <i>	</i>				if(theHtmlNode.addEventListener) {
 <i>	</i>					theHtmlNode.addEventListener(xml.childNodes[i].attributes[m].name.replace(/^on/,''),function(e) { eval(theFunctionString); },false);
 <i>	</i>				} else {
 <i>	</i>					theHtmlNode.attachEvent(xml.childNodes[i].attributes[m].name,function(e) { eval(theFunctionString); });
 <i>	</i>				}
 <i>	</i>			} else if(xml.childNodes[i].attributes[m].name == 'style') {
 <i>	</i>				theHtmlNode.style.cssText = xml.childNodes[i].attributes[m].value;
 <i>	</i>			} else {
 <i>	</i>				theHtmlNode.setAttribute(xml.childNodes[i].attributes[m].name,xml.childNodes[i].attributes[m].value);
 <i>	</i>			}
 <i>	</i>		}
 <i>	</i>	}
 
 <i>	</i>	if(xml.childNodes[i].hasChildNodes()) {
 <i>	</i>		//append the newly created node to the parent and then create the next child by running the function again
 <i>	</i>		parent.appendChild(theHtmlNode);
 <i>	</i>		convertToHtml(xml.childNodes[i],theHtmlNode);
 <i>	</i>	} else {
 <i>	</i>		//append the newly created node to the parent
 <i>	</i>		parent.appendChild(theHtmlNode);
 <i>	</i>	}
 
 <i>	</i>}
 }

If you need any help with using it, just let me know!

Populating table from AJAX

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Populating table from AJAX

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴