TechQA.

Display contents in text file using ajax

944 views Asked by At

I am new to using ajax (I am retaking my web engineering class this semester) and I am able to pull a text file from the server and am able to get it to display. It is displaying on my HTML page like this:

New York 8,143,197 Los Angeles 3,844,829 Chicago 2,842,518 ...

but i want it do display the cities in one column, and the population in another.

What can I do? I have also not learned about jquery yet.

 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <script type="text/javascript">
    function loadXMLDoc()  {
    var xmlhttp;
    if (window.XMLHttpRequest)  {
     xmlhttp=new XMLHttpRequest();
    } else {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()  {
     if (xmlhttp.readyState==4 && xmlhttp.status==200) {
       document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
     }
   }

   // Get which country the user selected
   var radioArray = document.myForm.countries;
   var i;
   var value;

   for (i = 0; i < radioArray.length; i++) {
     if (radioArray[i].checked) {
       value = radioArray[i].value;
     }
   }

   if (value == "usa") {
     xmlhttp.open("GET","http://localhost/~ercanbracks/usa.txt",true);
   }
   if (value == "canada") {
     xmlhttp.open("GET","http://localhost/~ercanbracks/canada.txt",true);
   }
   if (value == "mexico") {
     xmlhttp.open("GET","http://localhost/~ercanbracks/mexico.txt",true);
   }
   if (value == "russia") {
     xmlhttp.open("GET","http://localhost/~ercanbracks/russia.txt",true);
   }
   xmlhttp.send();
 }
 </script>

 </head>
 <body onload="loadXMLDoc()">
 <h1>Most populated cities in the world!</h1>
 <form name="myForm" action="">
 <input type="radio" name="countries"
 onchange="loadXMLDoc()" value="usa" checked>USA
 <br/>
 <input type="radio" name="countries"
 onchange="loadXMLDoc()" value="canada">Canada
 <br/>
 <input type="radio" name="countries"
 onchange="loadXMLDoc()" value="mexico">Mexico
 <br/>
 <input type="radio" name="countries"
 onchange="loadXMLDoc()" value="russia">Russia
 </form>
 <div id="myDiv"></div>
 </body>
 </html>
ajax
Original Q&A
1

There are 1 answers

3
mbuster On BEST ANSWER

You are assigning the whole response text to your element "myDiv" no matter what the response is. You need to first process the data from the response (xmlhttp.responseText) - in such way that you can separate city - population pairs, and based on how many rows of the pairs you get, you can for example create a new table element, and specify the rows and cells of the table. 

            function loadXMLDoc()
            {
                var xmlhttp;

                if (window.XMLHttpRequest)
                    xmlhttp = new XMLHttpRequest();
                else 
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                xmlhttp.onreadystatechange=function()
                {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200)
                    {
                        var dataToProcess = xmlhttp.responseText;

                        // process the data to get city-population pairs - assign them to an array for example
                        //...


                        // Create a new table element
                        var Table = document.createElement("Table");

                        // Foreach city-population pair, create one row and specify it's cells
                        for (var i = 0; i < YourArray.length; i++)
                        {
                            row             = Table.insertRow(i); 
                            cell1           = row.insertCell(0);
                            cell1.innerHTML = 'Your city value'; // YourArray[i]['City'];
                            cell2           = row.insertCell(1);
                            cell2.innerHTML = 'Your population value'; // YourArray[i]['Population'];
                        }

                        // Assign the table to a parent element
                        document.getElementById("your parent element").appendChild(Table);

                       // Be careful to which element you assign the new table element as a child, so that the page content don't need to be redrawn to make it visible
                    }
                }
            }

Related Questions in AJAX

Popular Questions

Trending Questions