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

cannot load data from xml file, html not affected

P: 7
my ajax function is triggered on window.load but it doesn't affect html at all. Here's my ajax:

Expand|Select|Wrap|Line Numbers
  1. function titleTopic(url)
  2. {
  3. var xmlhttp;
  4. var txt,txt2,xxx,xx,x;
  5. if (window.XMLHttpRequest)
  6.   {// code for IE7+, Firefox, Chrome, Opera, Safari
  7.   xmlhttp=new XMLHttpRequest();
  8.   }
  9. else
  10.   {// code for IE6, IE5
  11.   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  12.   }
  13. xmlhttp.onreadystatechange=function()
  14.   {
  15.   if (xmlhttp.readyState==4 && xmlhttp.status==200)
  16.     {
  17.     x=xmlhttp.responseXML.documentElement.getElementsByTagName("ARTICLE");
  18.  
  19.       xx=x[0].getElementsByTagName("TITLE");
  20.       txt=xx[0].firstChild.nodeValue;
  21.       xxx=x[0].getElementsByTagName("AUTHOR");
  22.       txt2=xxx[0].firstChild.nodeValue;
  23.  
  24.  
  25.     document.getElementByTagName('h3').innerHTML=txt;
  26.     document.getElementByTagName('span').innerHTML=txt2;
  27.     }
  28.   }
  29. xmlhttp.open("GET",url,true);
  30. xmlhttp.send();
  31. }
Jan 13 '14 #1
Share this Question
Share on Google+
10 Replies


Rabbit
Expert Mod 10K+
P: 12,365
How do you know it triggers?

On line 25 and 26, it's getElementsByTagName, not getElementByTagName.
Jan 13 '14 #2

P: 7
Yeah ive changed the code but it still doesn't work, ive runthe website on google console and the errors ive got are
Uncaught SyntaxError: Unexpected end of input for line 1 of moje.js
Uncaught ReferenceError: process is not defined for line 71 of webdesign.html which is basically the button with process() function

So it's basically the first line of my javascript file: var xmlHttp = createXmlHttpRequestObject();
and then a button that triggers my function in html

my full ajax:
Expand|Select|Wrap|Line Numbers
  1. var xmlHttp = createXmlHttpRequestObject();
  2.  
  3. //create object
  4. function createXmlHttpRequestObject() {
  5.     var xmlHttp;
  6.     if (window.XMLHttpRequest){
  7.         xmlHttp = new XLHttpRequest();
  8.     } else {
  9.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.     }
  11.     return xmlHttp;
  12. }
  13.  
  14. //called onload
  15.  
  16. function process() {
  17.     if(xmlHttp) {
  18.         try{
  19.             xmlHttp.open("GET", "C:/xampp/htdocs/webdesign.xml", true);
  20.             xmlHttp.onreadystatechange = handleStateChange;
  21.             xmlHttp.send(null);
  22.         }
  23.         catch(e) {
  24.             alert(e.toString());
  25.         }
  26. }
  27.  
  28. //when state changes
  29. function handleStateChanges() {
  30.     if (xmlHttp.readyState==4) {
  31.         if(xmlHttp.status==200) {
  32.             try {
  33.                 handleResponse();
  34.  
  35.             }
  36.             catch(e) {
  37.                 alert(e.toString());
  38.             }
  39.         } else {
  40.             alert(xmlHttp.statusText);
  41.         }
  42.     }
  43. }
  44.  //handle the response from the server
  45.  function handleResponse() {
  46.     var xmlResponse = xmlHttp.responseXML;
  47.     root = xmlResponse.documentElement;
  48.     articles = root.getElementsByTagName("TITLE");
  49.     authors = root.getElementsByTagName("AUTHOR");
  50.  
  51.     var stuff = "";
  52.     for (var i=0; i<articles.length; i++) {
  53.         stuff = articles.item(i).firstChild.data + " - " + authors.item(i).firstChild.data + "<br/>";
  54.  
  55.     }
  56.     super2 = document.getElementByID("super2");
  57.     super2.innerHtml = stuff;
  58.  }
  59.  
  60.  
and the mentioned html
Expand|Select|Wrap|Line Numbers
  1.         <article id='super2'>
  2.         <button onclick="process()">Get XML data</button>
  3.  
  4.         </article>
Jan 13 '14 #3

Rabbit
Expert Mod 10K+
P: 12,365
The first error that jumps out at me is that on line 7 of your javascript code block, XLHttpRequest should be XMLHttpRequest
Jan 13 '14 #4

P: 7
oh you're right, fixed it but it still doesn't work
I'm using xampp but ajax is just ignored other javascript works just fine.
Still im getting the same error from the console
Uncaught ReferenceError: process is not defined webdesign.html:71
onclick
Jan 13 '14 #5

P: 7
ok, i kind of made stupid mistake and fixed it, i lacked one curly bracket that's it and started getting error alerts
but i get an error from xml I found it and fixed it but it's still the same:
Expand|Select|Wrap|Line Numbers
  1. <?xml version="1.0" encoding="ISO-8859-1"?>
  2. <!-- Edited by XMLSpy® -->
  3. <RESPONSE>
  4.     <TOPICS>
  5.         <ARTICLE>
  6.             <TITLE>The Lean UX Manifesto: Principle-Driven Design</TITLE>
  7.             <AUTHOR>Anthony Viviano</AUTHOR>
  8.             <YEAR>2014</YEAR>
  9.             <TEXT>My colleague Ajay and I have been working at incorporating lean UX at the enterprise level for over two years. In studying it, I find that there is a temptation to lay down rules, and if the rules arent followed. well, then, you cant call it lean UX. At the end of the day, though, some lean UX is better than none.</TEXT>
  10.         </ARTICLE>
  11.         <ARTICLE>
  12.             <TITLE>Killer Responsive Layouts With CSS Regions</TITLE>
  13.             <AUTHOR>CJ Gammon</AUTHOR>
  14.             <YEAR>2013</YEAR>
  15.             <TEXT>As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option.</TEXT>
  16.         </ARTICLE>
  17.         <ARTICLE>
  18.             <TITLE>Original And Innovative Web Layouts</TITLE>
  19.             <AUTHOR>Shavaughn Haack</AUTHOR>
  20.             <YEAR>2013</YEAR>
  21.             <TEXT>The layout is the foundation of your website. It guides the user through the sections and tells them what is most important. It also sets the aesthetic of the website. Therefore, you need to carefully think through how you lay out content.</TEXT>
  22.         </ARTICLE>
  23.     </TOPICS>
  24. </RESPONSE>
XML Parsing Error: mismatched tag. Expected: </AUTHOR>. Location: moz-nullprincipal:{b3ef63a7-15a2-4c24-8903-7e94bdda5807} Line Number 16, Column 5:

</ARTICLE>
------------------^

Probably it's a stupid mistake too oh well..

Thx for your help anyway
Jan 13 '14 #6

P: 7
it just hasn't updated the file, i fixed it but it's still not displaying anything
Jan 13 '14 #7

Rabbit
Expert Mod 10K+
P: 12,365
Where is the code getting stuck at now? And what's your newly modified code? It sounds like you made more than a few changes.
Jan 13 '14 #8

P: 7
ok fixed it, i just needed a monologue i guess xD
Jan 13 '14 #9

Rabbit
Expert Mod 10K+
P: 12,365
Can you post your final solution? In case someone else runs into the same issue and stumbles upon this thread.
Jan 13 '14 #10

P: 7
They were mostly typos of methods and one essential bracket was missing, final version:
Expand|Select|Wrap|Line Numbers
  1. var xmlHttp = createXmlHttpRequestObject();
  2.  
  3. //create object
  4. function createXmlHttpRequestObject() {
  5.     var xmlHttp;
  6.     if (window.XMLHttpRequest){
  7.         xmlHttp = new XMLHttpRequest();
  8.     } else {
  9.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  10.     }
  11.     return xmlHttp;
  12. }
  13.  
  14. //called onload
  15.  
  16. function process() {
  17.     if(xmlHttp) {
  18.         try{
  19.             xmlHttp.open("GET", "webdesign1.xml", true);
  20.             xmlHttp.onreadystatechange = handleStateChange;
  21.             xmlHttp.send(null);
  22.         }
  23.         catch(e) {
  24.             alert(e.toString());
  25.         }
  26. }
  27.  
  28. //when state changes
  29. function handleStateChange() {
  30.     if (xmlHttp.readyState==4) {
  31.         if(xmlHttp.status==200) {
  32.             try {
  33.                 handleResponse();
  34.  
  35.             }
  36.             catch(e) {
  37.                 alert(e.toString());
  38.             }
  39.         } else {
  40.             alert(xmlHttp.statusText);
  41.         }
  42.     }
  43. }
  44.  //handle the response from the server
  45.  function handleResponse() {
  46.     var xmlResponse = xmlHttp.responseXML;
  47.     root = xmlResponse.documentElement;
  48.     articles = root.getElementsByTagName("TITLE");
  49.     authors = root.getElementsByTagName("AUTHOR");
  50.  
  51.     var stuff = "";
  52.     for (var i=0; i<articles.length; i++) {
  53.         stuff = "<p>" + articles.item(i).firstChild.data + " - " + authors.item(i).firstChild.data + "</p>";
  54.  
  55.     }
  56.     super2 = document.getElementById("super2");
  57.     super2.innerHTML = stuff;
  58.  }
  59.  
  60. }
  61.  
Jan 13 '14 #11

Post your reply

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