Can a JavaScript written on HTML page get info from XML?

Question

Lets say i have this javascript code in an html pages

<script type="text/javascript">
$(document).ready(function(){ $('.info2').CreateBubblePopup({ position : 'left', align : 'center',
innerHtml: 'some text ',
innerHtmlStyle: { color:'#FFFFFF', 'text align':'center' },
themeName: 'all-black',
themePath: 'images/jquerybubblepopup-themes' }); }); 
</script>

I want to make this script get the "info2" and the "some test" from the xml files i have in which i added a tag for "info2" called <-INFOID-> and a tag for "some text" called "<-INFODATA-> (without the -, just added them coz the tags where disappearing) so i used this code below to connect the xml and to write the script

<script type="text/javascript">
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","scores.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 

document.write("<script type='text/javascript'>");
var x=xmlDoc.getElementsByTagName("GAME");
for (i=0;i<x.length;i++)
  { 
  document.write("$(document).ready(function(){ $('.");
  document.write(x[i].getElementsByTagName("INFOID")[0].childNodes[0].nodeValue);
  document.write("').CreateBubblePopup({ position : 'left', align : 'center',");
  document.write("innerHtml: '");
  document.write(x[i].getElementsByTagName("INFODATA")[0].childNodes[0].nodeValue);
  document.write("',");
  document.write("innerHtmlStyle: { color:'#FFFFFF', 'text-align':'center' },");
  document.write("themeName: 'all-black',");
  document.write("themePath: 'images/jquerybubblepopup-themes' }); });");

  }
document.write("</script>");
</script>

I have no idea if XML works in Javascript i was just giving it a try but it didnt work so does xml work with javascript? if yes what is wrong in my code?

My scores.xml file looks :

<SCORES>
<GAME>
<DATE>14.5.2012 12:05</DATE>
<TIME>FT</TIME>
<HOMETEAM>Team1</HOMETEAM>
<SCORE>4 - 0</SCORE>
<AWAYTEAM>Team2</AWAYTEAM>
<OTHER> </OTHER>
<INFO><![CDATA[<img class='info1' src='images/info.png' width='14px' height='14px' border='0' />]]></INFO>
<INFOID>info1</INFOID>
<INFODATA>FIRST BUBBLE</INFODATA>
</GAME>

<GAME>
<DATE>14.5.2012 12:05</DATE>
<TIME>FT</TIME>
<HOMETEAM>Team3</HOMETEAM>
<SCORE>2 - 0</SCORE>
<AWAYTEAM>Team4</AWAYTEAM>
<OTHER> </OTHER>
<INFO><![CDATA[<img class='info2' src='images/info.png' width='14px' height='14px' border='0' />]]></INFO>
<INFOID>info2</INFOID>
<INFODATA>SECOND BUBBLE</INFODATA>
</GAME>
</SCORES>

the other tags i used them in the page... the last 2 tags are to configure this script which is a pop up bubble for a lil img

Could you post an example bit of xml? – n00dle May 14 '12 at 10:51 — n00dle, May 14 '12 at 10:51

n00dle · Accepted Answer · 2012-05-14T12:06:45.230

1

Look into jQuery's XML parser: http://api.jquery.com/jQuery.parseXML/.

It'll also do the AJAX retrieval for you and can in fact handle XML immediately: http://api.jquery.com/jQuery.get/

Example below (relatively untested):

<script type="text/javascript">
$(document).ready( function ( ) {
    // Get the XML data from your file
    $.get('demo.xml', function( data ) {

        // Because we've given jQuery the XML datatype, we can jump straight to finding the element.    
        $(data).find('GAME').each( function ( ) {

            // The current object now holds a single "GAME" - find the elements we need
            var game_id = $(this).find('INFOID').text( );
            var game_info = $(this).find('INFODATA').text( );

            // Create the popup.
            $('.'+game_id).CreateBubblePopup({
                    position : 'left', align : 'center',
                    innerHtml: game_info,
                    innerHtmlStyle: { color:'#FFFFFF', 'text align':'center' },
                    themeName: 'all-black',
                    themePath: 'images/jquerybubblepopup-themes'
            });
        }); // end of each
    }, 'xml'); // The 'xml' tells jQuery to expect XML back from the request
});
</script>

edited May 14 '12 at 12:06

answered May 14 '12 at 10:41

n00dle

5,949
2
35
48

hey mate, i rly appreciate your help, but sadly the code did not work sorry im newbie in javascript :( PS: i edit the post and added how my xml looks like the scrit is for a pop up bubble script thanks – Chta7 May 14 '12 at 11:55
I've made a quick change to the `createbubble` bit - I realised I'd not prefixed the `infoid` with a `.` to signify that it was a CSS class. If it's a CSS ID instead, change that `.` to a `#`. I've tested everything but the CreateBubblePopup bit and the information definitely gets retrieved from the XML. Is there a JS error message? If so, what does it say? – n00dle May 14 '12 at 12:09
the code for the pop are we editing it are just the settings of it and what i want to do is add 1 bubble for each img in each game... each game is on a row the games im adding them through an xml i created it so i was trying to make also the settings of the scripts gets repeated for every image coz each bubble has its own settings and it gets created by adding class="something" to an image and add this class in the settings which i called INFOID in the tags and the INFODATA is what i want to write in this bubble – Chta7 May 14 '12 at 12:10
In which case I'm pretty sure the reason it didn't work is that change that I just mentioned in my last comment. Give it a go and let me know. – n00dle May 14 '12 at 12:11
HEY MATE I LOVE YOU THANKS ALOTTTTTTTTTTTTTTTTT!!!!! Much appreciated :D... it works just perfect!!! – Chta7 May 14 '12 at 12:15
Cool beans, glad I could help :) Please could you accept and upvote this answer if it's correct. – n00dle May 14 '12 at 12:16
i accepted it :)... vote up repuires 15 reputation lol... ill keep the link of the tread and try to get 15 reputation after that ofc i will vote up.. thanks again! – Chta7 May 14 '12 at 12:19

Can a JavaScript written on HTML page get info from XML?

1 Answers1