dynamically creating HTML divs with JS from XML

Question

Im looking for a bit of Yoda like guidance on a project im working on. Im trying to dynamically generate div's in a web page based around XML data which is read in from a php server. Im punching a bit above my experience weight which is good for learning.

Was wondering if someone could point me in the right direction as far a tutorials or give me some guidance to see if im on the right track etc.

The XML im loading in is...

 <item>
      <id>1</id>
      <name>Johnothan</name>
      <message>hello world</message>
 </item>
 <item>
      <id>2</id>
      <name>Fredrico</name>
      <message>hello world</message>
 </item>...etc

My Ajax function to call.

    function ajax(site, params){
  var xmlhttp;
  var i;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
   xmlhttp=new XMLHttpRequest();
     }
   else
 {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
  xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  xmlDoc=xmlhttp.responseXML;   
   }
    } 


  xmlhttp.open("POST", site, false);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');


  xmlhttp.send(params);
    }

JS Div generation

 function information(){

 xmlReturned =  xmlDoc.getElementsByTagName("item");

 for (i=0; i<xmlReturned.length; i++){

 newDiv(i);




 function newDiv(i){
 var id = xmlReturned[i].getElementsByTagName("id")[0].firstChild.nodeValue;
 var name = xmlReturned[i].getElementsByTagName("name")[0].firstChild.nodeValue;
 var message = xmlReturned[i].getElementsByTagName("message")[0].firstChild.nodeValue;


 //Now im trying to place the dynamic XML information within a table with in a new DIV in the HTML.



 }

My HTML is pretty basic it calls the information() function with the body tag loads.

Am I looking in the right direction?? Can someone help me out or recommend a tutorial?

Thanks for your time

T9b · Accepted Answer · 2011-07-10 11:48:54Z

This is the client side code I use to dynamically create HTML page elements from JSON.

Basically I have a server side script which selects from a database. The database contains things like the element IDs, and inner HTML texts. The data is then encoded as JSON on the server side. In your example you use XML but the principle is the same.

I save this code into it's own javascript file called "buildCategories.js":

buildAjaxRequest = function()

{
/*create an ajax variable*/
var ajaxRequest; 


try
{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} 

catch (e)
{
    // Internet Explorer Browsers
    try
    {
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } 

    catch (e) 
    {
        try
        {
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } 

        catch (e)
        {
            /* Something went wrong*/
            alert("Your browser does not support AJAX!");

            /* do nothing*/
            return false;
        }
    }
}
return ajaxRequest;
};


buildcategories = function()
{
var ajaxRequest = buildAjaxRequest();

  // run on development box
  var url = "urlToTheJSONEncodingScript";   

        /*go ajax go!*/
        ajaxRequest.open("GET", url, true);
        ajaxRequest.send(null); 


    ajaxRequest.onreadystatechange=function()
    { 
        if (ajaxRequest.readyState==4 && ajaxRequest.status==200 || ajaxRequest.status==0)
            {
            var categoriesObject = JSON.parse(ajaxRequest.responseText); 

            // example of how to retrive the data

            //theParentElementYouWantToAppendTo
            var list = document.getElementById("theParentElementYouWantToAppendTo");

            for (i=0;i<categoriesObject.Categories.length;i++)
            {
            newElement = categoriesObject.Categories;
            // The div you are dynamically creating 
            listRow = document.createElement("div");

            listRow.id = newElement[i].categoryID;
            listRow.innerText = newElement[i].category_desc;
            listRow.className = "theClassYouWantToUse";

                    //theParentElementYouWantToAppendTo.appendChild(theDivYouCreated)               
                    list.appendChild(listRow);


            } // end for


            }//

    }
};

buildcategories(); // VERY IMPORTANT. SELF EXECUTING FUNCTION!

The last piece is just to insert into your HTML something like

<div id="theParentElementYouWantToAppendTo">
    <script language="JavaScript" type="text/javascript" src="buildCategories.js"></script>
</div>

Basically this called the self-executing script when the page is served. I don't put this in the head because I need to be sure that the HTML parent element has been received at the client side BEFORE the script is served, and executes.

Collectives™ on Stack Overflow

dynamically creating HTML divs with JS from XML

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related