www.webdeveloper.com
Results 1 to 4 of 4

Thread: Populating table from AJAX

Hybrid View

  1. #1
    Join Date
    Sep 2009
    Posts
    51

    Populating table from AJAX

    I am writing an application - a screen using Java Servlets on the server side, which is supposed to display some data in 3 tables.

    I am new to AJAX, and what I see from the tutorials is that the way to accomplish this is to return the entire representation of data in those tables in XML format, and have JavaScript parse the xml, and access each <td> and plug in the value in it.

    That seems like a lot of work. Am I taking the wrong approach here and missing a shortcut?

    Thanks.

  2. #2
    Join Date
    Oct 2003
    Location
    Andover, UK
    Posts
    945
    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
    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

  3. #3
    Join Date
    Dec 2005
    Posts
    2,984
    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:

    Code:
       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:

    Code:
       while(domnode.firstChild) {
          domnode.removeChild(domnode.firstChild);
       }

    Here's the function:

    Code:
    function convertToHtml(xml,parent) {
    	var i;
    	for(i=0;i<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);
    		}
    
    		//get the attributes
    		if(xml.childNodes[i].attributes) {
    			for(m=0;m<xml.childNodes[i].attributes.length;m++) {
    				if(xml.childNodes[i].attributes[m].name == 'class') {
    					theHtmlNode.className = xml.childNodes[i].attributes[m].value;
    				} else if(xml.childNodes[i].attributes[m].name.match(/^on/)) {
    					var theListenerString = xml.childNodes[i].attributes[m].value.match(/(.*)\((.*)\);?/);
    					var funcName = theListenerString[1];
    					var funcArgs = theListenerString[2];
    					
    					var theFunctionString = funcName + "(e," + funcArgs + ");";
    					
    					if(theHtmlNode.addEventListener) {
    						theHtmlNode.addEventListener(xml.childNodes[i].attributes[m].name.replace(/^on/,''),function(e) { eval(theFunctionString); },false);
    					} else {
    						theHtmlNode.attachEvent(xml.childNodes[i].attributes[m].name,function(e) { eval(theFunctionString); });
    					}
    				} else if(xml.childNodes[i].attributes[m].name == 'style') {
    					theHtmlNode.style.cssText = xml.childNodes[i].attributes[m].value;
    				} else {
    					theHtmlNode.setAttribute(xml.childNodes[i].attributes[m].name,xml.childNodes[i].attributes[m].value);
    				}
    			}
    		}
    		
    		if(xml.childNodes[i].hasChildNodes()) {
    			//append the newly created node to the parent and then create the next child by running the function again
    			parent.appendChild(theHtmlNode);
    			convertToHtml(xml.childNodes[i],theHtmlNode);
    		} else {
    			//append the newly created node to the parent
    			parent.appendChild(theHtmlNode);
    		}
    		
    	}
    }
    If you need any help with using it, just let me know!
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  4. #4
    Join Date
    Jul 2011
    Posts
    1

    A simple way to populate a table using AJAX

    Try this: http://www.arunraj.co.in/index.php?o...cript&Itemid=9

    Populating a table using AJAX can't get easier than this.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles