By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,317 Members | 1,344 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,317 IT Pros & Developers. It's quick & easy.

about retrieving data from xml and display it in the html page

P: 18
Hi guys,

I am new to Ajax, xml and javascript.
I want to know how can I retrieve data from xml and display in the html page?
please help me out.

suppose my xml file is customer.xml the code is below:

Expand|Select|Wrap|Line Numbers
  1. <CUSTOMER>
  2.  
  3.    <CUSTOMERID>1111</CUSTOMERID>
  4.  
  5.    <NAME>
  6.       <FNAME>Antony</FNAME>
  7.       <MNAME>Federrer</MNAME>
  8.       <LNAME>Christine</LNAME>
  9.    </NAME>
  10.  
  11.    <CONTACT>
  12.       <emailid>abc@yahoo.com</emailid>
  13.       <alt_emailid>def@yahoo.com</alt_emailid>
  14.       <contact_phone>0123456789</contact_phone>
  15.       <alt_phone>1234567890</alt_phone>
  16.       <alt_phone2>7894561230</alt_phone2>
  17.       <country></country>
  18.    </CONTACT>
  19.  
  20. </CUSTOMER>
  21.  
---------------------------
I want to use javascript and Ajax only. I want to display in the html page.


Thanks.
Jun 11 '08 #1
Share this Question
Share on Google+
34 Replies


acoder
Expert Mod 15k+
P: 16,027
Welcome to Bytes!

See this example. You can also load an XML file without using Ajax, e.g. see this link. If you don't understand something or you can't adapt it to your needs, come back and ask.

PS. please use code tags when posting code. Thanks!
Jun 11 '08 #2

P: 18
[quote=acoder]Welcome to Bytes!

Hi,
Thanks for your reply.
I saw the example in wschools.com/
In the example they are retrieving the records from the xml file. But here I have only one record.How can I do that?????
Please could you send me the code. Totally I am new to javascript and Ajax.......
Hope you will help me out.

Thanks
Jun 11 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Whether you have one record or many records, the code would be the same or similar. Show what you've tried.
Jun 11 '08 #4

P: 18
This code I tried to get records from the xml file.
I have a textfield tf1. In that text I will enter a customer id and when I click on customer id , it has to check that textfield with the customerid tag in the customerinfo.xml file, if it matches it should display all the information of the customer else it should display alert message customerid not found.

I have two files customerinfo.xml file and customerinf.html

customerinfo.xml

Expand|Select|Wrap|Line Numbers
  1. <CUSTOMER>
  2.  
  3.    <CUSTOMERID>1111</CUSTOMERID>
  4.  
  5.    <NAME>
  6.       <FNAME>Antony</FNAME>
  7.       <MNAME>Heff</MNAME>
  8.       <LNAME>huj</LNAME>
  9.    </NAME>
  10.  
  11.    <CONTACT>
  12.       <EMAILID>abc@yahoo.com</EMAILID>
  13.       <ALT_EMAILID>cdfvr@gmail.com</ALT_EMAILID>
  14.       <CONTACT_PHONE>1234567895</CONTACT_PHONE>
  15.       <ALT_PHONE>42586934552</ALT_PHONE>
  16.       <ALT_PHONE2>7894561230</ALT_PHONE2>
  17.       <ADD_LINE1>gthenn</ADD_LINE1>
  18.       <ADD_LINE2>eeee</ADD_LINE2>
  19.       <ADD_LINE3>vbccb</ADD_LINE3>
  20.       <CITY>Bangalore</CITY>
  21.       <ZIP>825021</ZIP>
  22.       <COUNTRY>India</COUNTRY>
  23.    </CONTACT>
  24.  
  25.    <PHOTOS>waterlily.GIF</PHOTOS>
  26.  
  27.  
  28. </CUSTOMER>
  29.  










customerinf.html file

[HTML]<html>
<form name="ff">
<head>
<title>CustomerInfo</title>
</head>


<script type="text/javascript">[/HTML]

Expand|Select|Wrap|Line Numbers
  1.     var xmlhttp;
  2.     var xmlObj; 
  3.  
  4.     function loadXMLDoc(url)
  5.     {                
  6.         xmlhttp=null;
  7.  
  8.         if (window.XMLHttpRequest)
  9.           {// code for IE7, Firefox, Mozilla, etc.
  10.               xmlhttp=new XMLHttpRequest();
  11.           }
  12.         else if (window.ActiveXObject)
  13.           {// code for IE5, IE6
  14.               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.           }
  16.         if (xmlhttp!=null)
  17.           {
  18.               xmlhttp.onreadystatechange=onResponse;
  19.               xmlhttp.open("GET",url,true);
  20.               xmlhttp.send(null);
  21.           }
  22.         else
  23.           {
  24.               alert("Your browser does not support XMLHTTP.");
  25.           }
  26.     }
  27.  
  28.     function onResponse()
  29.     {
  30.     if(xmlhttp.readyState!=4) return;
  31.     if(xmlhttp.status!=200)
  32.       {
  33.  
  34.       alert("Problem retrieving XML data");
  35.       return;
  36.       }
  37.  
  38.     txt="<center><table border='3'><tr>";
  39.  
  40.     txt = txt + "<td>Customer ID</td><td>";
  41.  
  42.     y=xmlhttp.responseXML.documentElement.getElementsByTagName("CUSTOMERID");            
  43.  
  44.  
  45.         if(ff.tf1.value == y[0].firstChild.nodeValue)
  46.                {
  47.                      alert("Strings are Equal");
  48.                    }
  49.         else
  50.                    {
  51.                      alert("Strings are Not Equal");
  52.                    }
  53.  
  54.  
  55.     txt=txt + y[0].firstChild.nodeValue + "</td></tr>";
  56.  
  57.     x=xmlhttp.responseXML.documentElement.getElementsByTagName("NAME");
  58.  
  59.     for (i=0;i<x.length;i++)
  60.       {
  61.       //txt=txt + "<tr>";
  62.  
  63.       xx=x[i].getElementsByTagName("FNAME");
  64.         {
  65.         try
  66.           {
  67.           //document.writeln(xx[0].firstChild.nodeValue);
  68.           txt=txt + "<td>Name</td><td>" + xx[0].firstChild.nodeValue + " ";
  69.           }
  70.         catch (er)
  71.           {
  72.           txt=txt + "<td> </td>";
  73.           }
  74.         }
  75.  
  76.       xx=x[i].getElementsByTagName("MNAME");
  77.         {
  78.         try
  79.           {
  80.                txt=txt +  xx[0].firstChild.nodeValue +" ";
  81.           }
  82.         catch (er)
  83.           {
  84.           txt=txt + "<td> </td>";
  85.           }
  86.         }
  87.  
  88.         xx=x[i].getElementsByTagName("LNAME");
  89.         {
  90.         try
  91.           {
  92.             txt=txt +  xx[0].firstChild.nodeValue + "</td>";
  93.           }
  94.         catch (er){
  95.           txt=txt + "<td> </td>";
  96.           }
  97.         }
  98.  
  99.       txt=txt + "</tr>";
  100.       }
  101.  
Expand|Select|Wrap|Line Numbers
  1. z=xmlhttp.responseXML.documentElement.getElementsByTagName("CONTACT");
  2.  
  3.     for (i=0;i<z.length;i++)
  4.       {
  5.       //txt=txt + "<tr>";
  6.  
  7.       zz=z[i].getElementsByTagName("EMAILID");
  8.         {
  9.         try
  10.           {
  11.                 txt=txt + "<td>Contact</td><td>Email ID</td><td>" + zz[0].firstChild.nodeValue + "</td></tr>";
  12.           }
  13.         catch (er)
  14.           {
  15.           txt=txt + "<td> </td>";
  16.           }
  17.         }
  18.  
  19.       zz=z[i].getElementsByTagName("ALT_EMAILID");
  20.         {
  21.         try
  22.           {
  23.               txt=txt + "<tr><td></td><td>Alternate Email ID</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  24.           }
  25.         catch (er)
  26.           {
  27.           txt=txt + "<td> </td>";
  28.           }
  29.         }
  30.  
  31.         zz=z[i].getElementsByTagName("CONTACT_PHONE");
  32.         {
  33.         try
  34.           {
  35.           txt=txt + "<tr><td></td><td>Contact Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  36.           }
  37.         catch (er)
  38.           {
  39.           txt=txt + "<td> </td>";
  40.           }
  41.         }
  42.  
  43.         zz=z[i].getElementsByTagName("ALT_PHONE");
  44.         {
  45.         try
  46.           {
  47.           //document.writeln(xx[0].firstChild.nodeValue);
  48.           txt=txt + "<tr><td></td><td>Alternate Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  49.  
  50.           }
  51.         catch (er)
  52.           {
  53.           txt=txt + "<td> </td>";
  54.           }
  55.         }
  56.  
  57.         zz=z[i].getElementsByTagName("ALT_PHONE2");
  58.         {
  59.         try
  60.           {
  61.           //document.writeln(xx[0].firstChild.nodeValue);
  62.           txt=txt + "<tr><td></td><td>Alternate Phone 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  63.  
  64.           }
  65.         catch (er)
  66.           {
  67.           txt=txt + "<td> </td>";
  68.           }
  69.         }
  70.  
  71.         zz=z[i].getElementsByTagName("ADD_LINE1");
  72.         {
  73.         try
  74.           {
  75.           //document.writeln(xx[0].firstChild.nodeValue);
  76.           txt=txt + "<tr><td></td><td>Address Line 1</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  77.  
  78.           }
  79.         catch (er)
  80.           {
  81.           txt=txt + "<td> </td>";
  82.           }
  83.         }
  84.  
  85.         zz=z[i].getElementsByTagName("ADD_LINE2");
  86.         {
  87.         try
  88.           {
  89.           //document.writeln(xx[0].firstChild.nodeValue);
  90.           txt=txt + "<tr><td></td><td>Address Line 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  91.  
  92.           }
  93.         catch (er)
  94.           {
  95.           txt=txt + "<td> </td>";
  96.           }
  97.         }
  98.  
  99.         zz=z[i].getElementsByTagName("ADD_LINE3");
  100.         {
  101.         try
  102.           {
  103.           //document.writeln(xx[0].firstChild.nodeValue);
  104.           txt=txt + "<tr><td></td><td>Address Line 3</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  105.  
  106.           }
  107.         catch (er)
  108.           {
  109.           txt=txt + "<td> </td>";
  110.           }
  111.         }
  112.  
  113.         zz=z[i].getElementsByTagName("CITY");
  114.         {
  115.         try
  116.           {
  117.           //document.writeln(xx[0].firstChild.nodeValue);
  118.           txt=txt + "<tr><td></td><td>CITY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  119.  
  120.           }
  121.         catch (er)
  122.           {
  123.           txt=txt + "<td> </td>";
  124.           }
  125.         }
  126.  
  127.         zz=z[i].getElementsByTagName("ZIP");
  128.         {
  129.         try
  130.           {
  131.           //document.writeln(xx[0].firstChild.nodeValue);
  132.           txt=txt + "<tr><td></td><td>ZIP</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  133.  
  134.           }
  135.         catch (er)
  136.           {
  137.           txt=txt + "<td> </td>";
  138.           }
  139.         }
  140.  
  141.         zz=z[i].getElementsByTagName("COUNTRY");
  142.         {
  143.         try
  144.           {
  145.           //document.writeln(xx[0].firstChild.nodeValue);
  146.           txt=txt + "<tr><td></td><td>COUNTRY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  147.  
  148.           }
  149.         catch (er)
  150.           {
  151.           txt=txt + "<td> </td>";
  152.           }
  153.         }
  154.  
  155.  
  156.       txt=txt + "</tr>";
  157.       }
  158.  
  159.       a=xmlhttp.responseXML.documentElement.getElementsByTagName("PHOTOS");
  160.       txt = txt + "<tr><td>Photos</td><td><img src=" +a[0].firstChild.nodeValue + " width=100 height=100 border=2></td></td></tr>";
  161.  
  162.  
  163.  
  164.     txt=txt + "</table></center>";
  165.     document.getElementById('copy').innerHTML=txt;
  166.     }

[HTML] </script>
</head>

<body bgcolor="lightgreen">
<center>
<br><br>
<div id="copy">
<b>Enter Customer ID<input type="text" name="tf1" ><br><br>
<button onclick="loadXMLDoc('customerinfo.xml')">Get Customer Info</button></b>
</div>
</center>
</body>
</form>
</html>
[/HTML]


////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////


Can any one tell me where did I go wrong.
Jun 15 '08 #5

acoder
Expert Mod 15k+
P: 16,027
So what's working and what's not working in your code?

Please use code tags when posting code. See How to Ask a Question.
Jun 16 '08 #6

P: 18
With out this if condition in onResponse method, I am able to retrieve data from xml.

if(ff.tf1.value == y[0].firstChild.nodeValue)
{
alert("Strings are Equal");

}
else
{
alert("Strings are Not Equal");
}


But I want to retrieve based on the textfield value. Validaton I am unable to do it


Please can one give me the code for this.
Jun 16 '08 #7

acoder
Expert Mod 15k+
P: 16,027
First problem: the form should be in the body, so move the form opening tag to inside the body. Secondly, when referring to the form "ff", use document.forms["ff"] or document.ff, not just ff globally.
Jun 16 '08 #8

P: 18
[HTML]<html>

<head>
<title>CustomerInfo</title>
</head>


<script type="text/javascript">
[/HTML]
Expand|Select|Wrap|Line Numbers
  1.     var xmlhttp;
  2.     var xmlObj; 
  3.  
  4.     function loadXMLDoc(url)
  5.     {                
  6.         xmlhttp=null;
  7.  
  8.         if (window.XMLHttpRequest)
  9.           {// code for IE7, Firefox, Mozilla, etc.
  10.               xmlhttp=new XMLHttpRequest();
  11.           }
  12.         else if (window.ActiveXObject)
  13.           {// code for IE5, IE6
  14.               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  15.           }
  16.         if (xmlhttp!=null)
  17.           {
  18.               xmlhttp.onreadystatechange=onResponse;
  19.               xmlhttp.open("GET",url,true);
  20.               xmlhttp.send(null);
  21.           }
  22.         else
  23.           {
  24.               alert("Your browser does not support XMLHTTP.");
  25.           }
  26.     }
  27.  
  28.     function onResponse()
  29.     {
  30.     if(xmlhttp.readyState!=4) return;
  31.     if(xmlhttp.status!=200)
  32.       {
  33.  
  34.       alert("Problem retrieving XML data");
  35.       return;
  36.       }
  37.  
  38.     txt="<center><table border='3'><tr>";
  39.  
  40.     txt = txt + "<td>Customer ID</td><td>";
  41.  
  42.     y=xmlhttp.responseXML.documentElement.getElementsByTagName("CUSTOMERID");    
Expand|Select|Wrap|Line Numbers
  1.         if(document.ff.tf1.value == y[0].firstChild.nodeValue)
  2.                {
  3.                      alert("Strings are Equal");
  4.                    }
  5.         else
  6.                    {
  7.                      alert("Strings are Not Equal");
  8.                    }
  9.  
  10.  
  11.     txt=txt + y[0].firstChild.nodeValue + "</td></tr>";
  12.  
  13.     x=xmlhttp.responseXML.documentElement.getElementsByTagName("NAME");
  14.  
  15.     for (i=0;i<x.length;i++)
  16.       {
  17.       //txt=txt + "<tr>";
  18.  
  19.       xx=x[i].getElementsByTagName("FNAME");
  20.         {
  21.         try
  22.           {
  23.           //document.writeln(xx[0].firstChild.nodeValue);
  24.           txt=txt + "<td>Name</td><td>" + xx[0].firstChild.nodeValue + " ";
  25.           }
  26.         catch (er)
  27.           {
  28.           txt=txt + "<td> </td>";
  29.           }
  30.         }
  31.  
  32.       xx=x[i].getElementsByTagName("MNAME");
  33.         {
  34.         try
  35.           {
  36.                txt=txt +  xx[0].firstChild.nodeValue +" ";
  37.           }
  38.         catch (er)
  39.           {
  40.           txt=txt + "<td> </td>";
  41.           }
  42.         }
  43.  
  44.         xx=x[i].getElementsByTagName("LNAME");
  45.         {
  46.         try
  47.           {
  48.             txt=txt +  xx[0].firstChild.nodeValue + "</td>";
  49.           }
  50.         catch (er){
  51.           txt=txt + "<td> </td>";
  52.           }
  53.         }
  54.  
  55.       txt=txt + "</tr>";
  56.       }
  57.  
  58.  
  59.     z=xmlhttp.responseXML.documentElement.getElementsByTagName("CONTACT");
  60.  
  61.     for (i=0;i<z.length;i++)
  62.       {
  63.       //txt=txt + "<tr>";
  64.  
  65.       zz=z[i].getElementsByTagName("EMAILID");
  66.         {
  67.         try
  68.           {
  69.                 txt=txt + "<td>Contact</td><td>Email ID</td><td>" + zz[0].firstChild.nodeValue + "</td></tr>";
  70.           }
  71.         catch (er)
  72.           {
  73.           txt=txt + "<td> </td>";
  74.           }
  75.         }
  76.  
  77.       zz=z[i].getElementsByTagName("ALT_EMAILID");
  78.         {
  79.         try
  80.           {
  81.               txt=txt + "<tr><td></td><td>Alternate Email ID</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  82.           }
  83.         catch (er)
  84.           {
  85.           txt=txt + "<td> </td>";
  86.           }
  87.         }
  88.  
  89.         zz=z[i].getElementsByTagName("CONTACT_PHONE");
  90.         {
  91.         try
  92.           {
  93.           txt=txt + "<tr><td></td><td>Contact Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  94.           }
  95.         catch (er)
  96.           {
  97.           txt=txt + "<td> </td>";
  98.           }
  99.         }
  100.  
  101.         zz=z[i].getElementsByTagName("ALT_PHONE");
  102.         {
  103.         try
  104.           {
  105.           //document.writeln(xx[0].firstChild.nodeValue);
  106.           txt=txt + "<tr><td></td><td>Alternate Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  107.  
  108.           }
  109.         catch (er)
  110.           {
  111.           txt=txt + "<td> </td>";
  112.           }
  113.         }
  114.  
  115.         zz=z[i].getElementsByTagName("ALT_PHONE2");
  116.         {
  117.         try
  118.           {
  119.           //document.writeln(xx[0].firstChild.nodeValue);
  120.           txt=txt + "<tr><td></td><td>Alternate Phone 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  121.  
  122.           }
  123.         catch (er)
  124.           {
  125.           txt=txt + "<td> </td>";
  126.           }
  127.         }
  128.  
  129.         zz=z[i].getElementsByTagName("ADD_LINE1");
  130.         {
  131.         try
  132.           {
  133.           //document.writeln(xx[0].firstChild.nodeValue);
  134.           txt=txt + "<tr><td></td><td>Address Line 1</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  135.  
  136.           }
  137.         catch (er)
  138.           {
  139.           txt=txt + "<td> </td>";
  140.           }
  141.         }
  142.  
  143.         zz=z[i].getElementsByTagName("ADD_LINE2");
  144.         {
  145.         try
  146.           {
  147.           //document.writeln(xx[0].firstChild.nodeValue);
  148.           txt=txt + "<tr><td></td><td>Address Line 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  149.  
  150.           }
  151.         catch (er)
  152.           {
  153.           txt=txt + "<td> </td>";
  154.           }
  155.         }
  156.  
  157.         zz=z[i].getElementsByTagName("ADD_LINE3");
  158.         {
  159.         try
  160.           {
  161.           //document.writeln(xx[0].firstChild.nodeValue);
  162.           txt=txt + "<tr><td></td><td>Address Line 3</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  163.  
  164.           }
  165.         catch (er)
  166.           {
  167.           txt=txt + "<td> </td>";
  168.           }
  169.         }
  170.  
  171.         zz=z[i].getElementsByTagName("CITY");
  172.         {
  173.         try
  174.           {
  175.           //document.writeln(xx[0].firstChild.nodeValue);
  176.           txt=txt + "<tr><td></td><td>CITY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  177.  
  178.           }
  179.         catch (er)
  180.           {
  181.           txt=txt + "<td> </td>";
  182.           }
  183.         }
  184.  
  185.         zz=z[i].getElementsByTagName("ZIP");
  186.         {
  187.         try
  188.           {
  189.           //document.writeln(xx[0].firstChild.nodeValue);
  190.           txt=txt + "<tr><td></td><td>ZIP</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  191.  
  192.           }
  193.         catch (er)
  194.           {
  195.           txt=txt + "<td> </td>";
  196.           }
  197.         }
  198.  
  199.         zz=z[i].getElementsByTagName("COUNTRY");
  200.         {
  201.         try
  202.           {
  203.           //document.writeln(xx[0].firstChild.nodeValue);
  204.           txt=txt + "<tr><td></td><td>COUNTRY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  205.  
  206.           }
  207.         catch (er)
  208.           {
  209.           txt=txt + "<td> </td>";
  210.           }
  211.         }
  212.  
  213.  
  214.       txt=txt + "</tr>";
  215.       }
  216.  
  217.       a=xmlhttp.responseXML.documentElement.getElementsByTagName("PHOTOS");
  218.       txt = txt + "<tr><td>Photos</td><td><img src=" +a[0].firstChild.nodeValue + " width=100 height=100 border=2></td></td></tr>";
  219.  
  220.  
  221.  
  222.     txt=txt + "</table></center>";
  223.     document.getElementById('copy').innerHTML=txt;
  224.     }
  225.  
[HTML] </script>
</head>

<body bgcolor="lightgreen">
<form name="ff">
<center>
<br><br>
<div id="copy">
<b>Enter Customer ID<input type="text" name="tf1" ><br><br>
<button onclick="loadXMLDoc('customerinfo.xml')">Get Customer Info</button></b>
</div>
</center>

</form>
</body>

</html>
[/HTML]

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////

When I enter some value in the text field and click on submit button..again I am getting the same page again...
What is the problem?

if(document.ff.tf1.value == y[0].firstChild.nodeValue)
{
alert("Strings are Equal");
}
else
{
alert("Strings are Not Equal");
}



how to get the the value from the textfield????
I wrote document.ff.tf1.value is this right or not????
Jun 16 '08 #9

acoder
Expert Mod 15k+
P: 16,027
Please enclose your posted code in [code] tags (See How to Ask a Question).

This makes it easier for our Experts to read and understand it. Failing to do so creates extra work for the moderators, thus wasting resources, otherwise available to answer the members' questions.

Please use [code] tags in future.

MODERATOR
Jun 16 '08 #10

acoder
Expert Mod 15k+
P: 16,027
In your if statement, return if it doesn't match:
Expand|Select|Wrap|Line Numbers
  1. if (document.ff.tf1.value != y[0].firstChild.nodeValue) {
  2.     alert("Strings are not Equal");
  3.     return;
  4. }
  5. // the strings are equal so output the xml file contents
  6.  
Jun 16 '08 #11

P: 18
Still its returning back to the same page... I don't know what is the problem...
Could you please check the code once again and let me know what is the problem????...could you please give me the code??
Jun 16 '08 #12

acoder
Expert Mod 15k+
P: 16,027
The problem is that you're using a button element. Use an input button instead:
[html]<input type="button" ...>[/html]
Jun 16 '08 #13

P: 18
I have written like this...

<input type="button" name="submit" value="submit" onClick="loadXMLDoc('customerinfo.xml')" >

Still I am not able to get the output


What is the error????
Please let me know. Can you give me the code please
Jun 16 '08 #14

acoder
Expert Mod 15k+
P: 16,027
Check the error console. Which browser are you testing on?
Jun 16 '08 #15

P: 18
I am using Firefox....
There are no errors at all...

but it is returning back to the same page.

Please can you check the code once again and help me out
Jun 16 '08 #16

acoder
Expert Mod 15k+
P: 16,027
When using Ajax, you don't leave the page, so there's no concept of returning back to the same page.

In your first post, you said the XML file name was "customer.xml". In your code, you have "customerinfo.xml" as the file name. Check to make sure which is correct.
Jun 16 '08 #17

P: 18
I used everywhere customerinfo.xml only....

Please can you go through the code once again and check what is the error???

I am using Eclipse and Tomcat server.
Is there any plugin for Ajax for Eclipse????I don't have idea...Please let me know
Jun 17 '08 #18

acoder
Expert Mod 15k+
P: 16,027
In your XML file, there's no PHOTOS tag, but you're checking for that in the JavaScript code. This would cause errors. Remove those lines or add the tag to the XML file.

I'm not sure about Eclipse plugins.
Jun 17 '08 #19

P: 18
With out that if condition I am able to retrieve data from the xml.

if (document.ff.tf1.value != w[0].firstChild.nodeValue) {
alert("Strings are not Equal");
return;
}


If I keep that if condition then its not at all working... I got stucked off from the last days.
Don't know the problem, Please help me out.
Jun 17 '08 #20

acoder
Expert Mod 15k+
P: 16,027
Was it not y[0]? Have you changed y to w as the variable name?
Jun 17 '08 #21

P: 18
I changed to w.

Please help me out
Jun 17 '08 #22

acoder
Expert Mod 15k+
P: 16,027
Can you post the latest version of the onResponse() function (in code tags)?
Jun 17 '08 #23

P: 18
customerinfo.xml

Expand|Select|Wrap|Line Numbers
  1. (Code)text
  2.  
  3. <CUSTOMER>
  4.  
  5.    <CUSTOMERID>1111</CUSTOMERID>
  6.  
  7.    <NAME>
  8.       <FNAME>Venkat</FNAME>
  9.       <MNAME>Garu</MNAME>
  10.       <LNAME>Chalasani</LNAME>
  11.    </NAME>
  12.  
  13.    <CONTACT>
  14.       <EMAILID>vchalasa@yahoo.com</EMAILID>
  15.       <ALT_EMAILID>venkat@samskruti.in</ALT_EMAILID>
  16.       <CONTACT_PHONE>00919845977499</CONTACT_PHONE>
  17.       <ALT_PHONE>0014084346578</ALT_PHONE>
  18.       <ALT_PHONE2>7894561230</ALT_PHONE2>
  19.       <ADD_LINE1>gthenn</ADD_LINE1>
  20.       <ADD_LINE2>eeee</ADD_LINE2>
  21.       <ADD_LINE3>vbccb</ADD_LINE3>
  22.       <CITY>Bangalore</CITY>
  23.       <ZIP>825021</ZIP>
  24.       <COUNTRY>India</COUNTRY>
  25.    </CONTACT>
  26.  
  27.    <PHOTOS>waterlily.GIF</PHOTOS>
  28.  
  29.  
  30. </CUSTOMER>
  31.  
  32.  
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

customerinf.xml

Expand|Select|Wrap|Line Numbers
  1. Code(text)
  2.  
  3. <html>
  4.  
  5.     <head>
  6.         <title>CustomerInfo</title>
  7.     </head>
  8.  
  9.  
  10.     <script type="text/javascript">
  11.  
  12.     var xmlhttp;
  13.     var xmlObj; 
  14.  
  15.     function loadXMLDoc(url)
  16.     {                
  17.         xmlhttp=null;
  18.  
  19.         if (window.XMLHttpRequest)
  20.           {// code for IE7, Firefox, Mozilla, etc.
  21.               xmlhttp=new XMLHttpRequest();
  22.           }
  23.         else if (window.ActiveXObject)
  24.           {// code for IE5, IE6
  25.               xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  26.           }
  27.         if (xmlhttp!=null)
  28.           {
  29.               xmlhttp.onreadystatechange=onResponse;
  30.               xmlhttp.open("GET",url,true);
  31.               xmlhttp.send(null);
  32.           }
  33.         else
  34.           {
  35.               alert("Your browser does not support XMLHTTP.");
  36.           }
  37.     }
  38.  
  39.     function onResponse()
  40.     {
  41.     if(xmlhttp.readyState!=4) return;
  42.     if(xmlhttp.status!=200)
  43.       {
  44.  
  45.       alert("Problem retrieving XML data");
  46.       return;
  47.       }
  48.  
  49.  
  50.       w=xmlhttp.responseXML.documentElement.getElementsByTagName("CUSTOMERID");
  51.  
  52.        if (document.ff.tf1.value != w[0].firstChild.nodeValue) {
  53.         alert("Strings are not Equal");
  54.         return;
  55.     }
  56.  
  57.     txt="<center><table border='3'><tr>";
  58.  
  59.     txt = txt + "<td>Customer ID</td><td>";
  60.  
  61.     y=xmlhttp.responseXML.documentElement.getElementsByTagName("CUSTOMERID");            
  62.  
  63.  
  64.     txt=txt + y[0].firstChild.nodeValue + "</td></tr>";
  65.  
  66.     x=xmlhttp.responseXML.documentElement.getElementsByTagName("NAME");
  67.  
  68.     for (i=0;i<x.length;i++)
  69.       {
  70.       //txt=txt + "<tr>";
  71.  
  72.       xx=x[i].getElementsByTagName("FNAME");
  73.         {
  74.         try
  75.           {
  76.           //document.writeln(xx[0].firstChild.nodeValue);
  77.           txt=txt + "<td>Name</td><td>" + xx[0].firstChild.nodeValue + " ";
  78.           }
  79.         catch (er)
  80.           {
  81.           txt=txt + "<td> </td>";
  82.           }
  83.         }
  84.  
  85.       xx=x[i].getElementsByTagName("MNAME");
  86.         {
  87.         try
  88.           {
  89.                txt=txt +  xx[0].firstChild.nodeValue +" ";
  90.           }
  91.         catch (er)
  92.           {
  93.           txt=txt + "<td> </td>";
  94.           }
  95.         }
  96.  
  97.         xx=x[i].getElementsByTagName("LNAME");
  98.         {
  99.         try
  100.           {
  101.             txt=txt +  xx[0].firstChild.nodeValue + "</td>";
  102.           }
  103.         catch (er){
  104.           txt=txt + "<td> </td>";
  105.           }
  106.         }
  107.  
  108.       txt=txt + "</tr>";
  109.       }
  110.  
  111.  
  112.     z=xmlhttp.responseXML.documentElement.getElementsByTagName("CONTACT");
  113.  
  114.     for (i=0;i<z.length;i++)
  115.       {
  116.       //txt=txt + "<tr>";
  117.  
  118.       zz=z[i].getElementsByTagName("EMAILID");
  119.         {
  120.         try
  121.           {
  122.                 txt=txt + "<td>Contact</td><td>Email ID</td><td>" + zz[0].firstChild.nodeValue + "</td></tr>";
  123.           }
  124.         catch (er)
  125.           {
  126.           txt=txt + "<td> </td>";
  127.           }
  128.         }
  129.  
  130.       zz=z[i].getElementsByTagName("ALT_EMAILID");
  131.         {
  132.         try
  133.           {
  134.               txt=txt + "<tr><td></td><td>Alternate Email ID</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  135.           }
  136.         catch (er)
  137.           {
  138.           txt=txt + "<td> </td>";
  139.           }
  140.         }
  141.  
  142.         zz=z[i].getElementsByTagName("CONTACT_PHONE");
  143.         {
  144.         try
  145.           {
  146.           txt=txt + "<tr><td></td><td>Contact Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  147.           }
  148.         catch (er)
  149.           {
  150.           txt=txt + "<td> </td>";
  151.           }
  152.         }
  153.  
  154.         zz=z[i].getElementsByTagName("ALT_PHONE");
  155.         {
  156.         try
  157.           {
  158.           //document.writeln(xx[0].firstChild.nodeValue);
  159.           txt=txt + "<tr><td></td><td>Alternate Phone</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  160.  
  161.           }
  162.         catch (er)
  163.           {
  164.           txt=txt + "<td> </td>";
  165.           }
  166.         }
  167.  
  168.         zz=z[i].getElementsByTagName("ALT_PHONE2");
  169.         {
  170.         try
  171.           {
  172.           //document.writeln(xx[0].firstChild.nodeValue);
  173.           txt=txt + "<tr><td></td><td>Alternate Phone 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  174.  
  175.           }
  176.         catch (er)
  177.           {
  178.           txt=txt + "<td> </td>";
  179.           }
  180.         }
  181.  
  182.         zz=z[i].getElementsByTagName("ADD_LINE1");
  183.         {
  184.         try
  185.           {
  186.           //document.writeln(xx[0].firstChild.nodeValue);
  187.           txt=txt + "<tr><td></td><td>Address Line 1</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  188.  
  189.           }
  190.         catch (er)
  191.           {
  192.           txt=txt + "<td> </td>";
  193.           }
  194.         }
  195.  
  196.         zz=z[i].getElementsByTagName("ADD_LINE2");
  197.         {
  198.         try
  199.           {
  200.           //document.writeln(xx[0].firstChild.nodeValue);
  201.           txt=txt + "<tr><td></td><td>Address Line 2</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  202.  
  203.           }
  204.         catch (er)
  205.           {
  206.           txt=txt + "<td> </td>";
  207.           }
  208.         }
  209.  
  210.         zz=z[i].getElementsByTagName("ADD_LINE3");
  211.         {
  212.         try
  213.           {
  214.           //document.writeln(xx[0].firstChild.nodeValue);
  215.           txt=txt + "<tr><td></td><td>Address Line 3</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  216.  
  217.           }
  218.         catch (er)
  219.           {
  220.           txt=txt + "<td> </td>";
  221.           }
  222.         }
  223.  
  224.         zz=z[i].getElementsByTagName("CITY");
  225.         {
  226.         try
  227.           {
  228.           //document.writeln(xx[0].firstChild.nodeValue);
  229.           txt=txt + "<tr><td></td><td>CITY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  230.  
  231.           }
  232.         catch (er)
  233.           {
  234.           txt=txt + "<td> </td>";
  235.           }
  236.         }
  237.  
  238.         zz=z[i].getElementsByTagName("ZIP");
  239.         {
  240.         try
  241.           {
  242.           //document.writeln(xx[0].firstChild.nodeValue);
  243.           txt=txt + "<tr><td></td><td>ZIP</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  244.  
  245.           }
  246.         catch (er)
  247.           {
  248.           txt=txt + "<td> </td>";
  249.           }
  250.         }
  251.  
  252.         zz=z[i].getElementsByTagName("COUNTRY");
  253.         {
  254.         try
  255.           {
  256.           //document.writeln(xx[0].firstChild.nodeValue);
  257.           txt=txt + "<tr><td></td><td>COUNTRY</td><td>"+ zz[0].firstChild.nodeValue +"</td></tr> ";
  258.  
  259.           }
  260.         catch (er)
  261.           {
  262.           txt=txt + "<td> </td>";
  263.           }
  264.         }
  265.  
  266.  
  267.       txt=txt + "</tr>";
  268.       }
  269.  
  270.       a=xmlhttp.responseXML.documentElement.getElementsByTagName("PHOTOS");
  271.       txt = txt + "<tr><td>Photos</td><td><img src=" +a[0].firstChild.nodeValue + " width=100 height=100 border=2></td></td></tr>";
  272.  
  273.  
  274.  
  275.     txt=txt + "</table></center>";
  276.     document.getElementById('copy').innerHTML=txt;
  277.     }
  278.  
  279.  
  280.     </script>
  281.  
  282.     <body bgcolor="lightblue">
  283.     <form name="ff">
  284.     <center>
  285.     <br><br>
  286.     <div id="copy">
  287.     <b>Enter Customer ID<input type="text" name="tf1" ><br><br>
  288.     <input type="button" onclick="loadXMLDoc('customerinfo.xml')" value="submit">
  289.     </div>
  290.     </center>
  291.  
  292.     </form>
  293.     </body>
  294.  
  295.     </html>
  296.  
  297.  

//////////////////////////////////////////////////////////////////////

This is my latest version of code.
Can you please check the code and give me the correct code.
Please help me out.
Jun 18 '08 #24

acoder
Expert Mod 15k+
P: 16,027
I tested your code and it works fine.

Are you sure there's no errors? I type in 1111 and click on the button and the form is replaced with the details of the customer from the XML file.
Jun 18 '08 #25

P: 18
Finally It worked..Thanks for your help.
Jun 18 '08 #26

acoder
Expert Mod 15k+
P: 16,027
Well, that's good to hear. What was the problem in the end?
Jun 18 '08 #27

P: 18
form name tag is in the wrong position.

Anyway I have got another problem now....
In my customerinfo.xml file I have this tag also after photos tag.


Expand|Select|Wrap|Line Numbers
  1.  
  2. <profile>
  3.      <pref>
  4.          <name=public>Antony </name>
  5.          <photos=community>jeep.gif </photos>
  6.          <family=private>house.gif </family>
  7.       </pref>
  8.    </profile>
  9.  
  10.  
////////////////////////////////////////////////
If I put the above code in the xml file and run, it does not work I don't know why??

Please help me out...
Jun 18 '08 #28

acoder
Expert Mod 15k+
P: 16,027
Have you modified the code to parse and display the added tags?
Jun 18 '08 #29

P: 18
If I put that profile tag the program doesnot work at all.....
I didn't modify the code. Just if I put that tag it doesnot work at all
Jun 19 '08 #30

acoder
Expert Mod 15k+
P: 16,027
Perhaps the reason is that the XML is invalid. I think the <name=public> syntax may be causing the problem.
Jun 19 '08 #31

P: 18
Still I didn't understand what is that tag for??
Please can you tell me briefly..........
Why is it invalid?
But in my task they asked me to add this also
Please help me out
Jun 19 '08 #32

acoder
Expert Mod 15k+
P: 16,027
See some basic syntax rules. You probably want to use something like <name type="public">
Jun 19 '08 #33

P: 18
Thanks for solving.....

What is that profile tag actually for?///

In xml file can we have same name tag???
I have name tag in my xml file
and also I have in profile tag I also have another name tag...
Can you tell me what about rules of naming tags in xml???
Jun 19 '08 #34

acoder
Expert Mod 15k+
P: 16,027
Thanks for solving.....
Glad that's solved.

What is that profile tag actually for?///
You posted it! Ask the person who added it to the XML file(!) Seriously, though, I think profile just means the profile of that customer, which has a prefs tag to include their preferences.

In xml file can we have same name tag???
I have name tag in my xml file
and also I have in profile tag I also have another name tag...
Can you tell me what about rules of naming tags in xml???
For these XML questions, I suggest you start a new thread in the XML forum.
Jun 19 '08 #35

Post your reply

Sign in to post your reply or Sign up for a free account.