CODEWITHSUNDEEP
jqueryhtmlajaxxml
Jonathan Britt
Jonathan Britt

Reputation: 53

Attempting to parse an XML document using jQuery Ajax

I have been desperately trying to display some XML data on a webpage for a school project. I've seen several different examples so far but I'm not sure what I am doing wrong. I am a relative newbie to Javascript and have really been struggling. What I am trying to do is pull some of this information out from the XML file and then display it on an HTML web-page. I have attached my code. Any help would be wonderful. 

<bbgame source="STAT CREW Basketball" version="4.15.03" generated="12/17/2013">
  <gametracker gameid="1288244"></gametracker>
  <venue gameid="GAME11"
           visid="MSU" visname="MISSOURI STATE"
           homeid="LOU" homename="LOUISVILLE"
           date="12/17/2013" location="KFC Yum! Center, Louisville, KY"
           time="9:05PM" attend="21335" schednote="" start="" end="" duration=""
           leaguegame="N" neutralgame="N" postseason="N">
    <officials text="Doug Sirmons, Rick Crawford, Tim Nestor"></officials>
    <rules prds="2" minutes="20" minutesot="5" fouls="5" qh="H"></rules>
  </venue>
  </bbgame>

  <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="mainstyles.css">
<title>Louisville Cardinals Statistics</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>

<script> 
$(document).ready(function(){ // ready document to be loaded
    $.ajax({
        type: "GET",
        url: "lou.xml",
        dataType: "xml",
        success: function(xml_parse) {
            // the return of a ajax trough a xml file, is a xml parsed object, using $, this will be a jquery xml object;
            // find all 'gametracker' entryes;
            // (each) iteration trough founded entryes;
            $(xml_parse).find('gametracker').each(function(){
                // select a container were you want to put your data, them append data in it;;
                $('.container').append($(this).attr('gameid'));
            });
        }
    });
});
</script>
<div class='container'></div>
</body>
</html>

My code seems like it should be working properly. I have the index.html and the xml file in the same folder. I am also struggling with trying to display the variables in the actual HTML document. Would I just surround this document.write with a div in order to maneuver it around the page and style it?

EDIT: Thanks for the help so far guys. I had a couple more quick questions and I did not want to make another post.

  1. Can I call this parse_xml function again without being in the $(document).ready(function(){ ? I'm still learning jQuery / Javascript and I am embarrassed to say that I am having a hard time keeping up with all of these brackets. I have quite a few things that I need to pull out a relatively large and complex XML file.

  2. Is there a way to display some of the data in a table? For example the XML node on venue has several pieces of information I need to pull out and if I could load them into a table it would be more convenient than storing each one individually?

Thanks again for the help fellas.

Upvotes: 1

Views: 4634

Answers (1)

Dreanmer
Dreanmer

Reputation: 752

For starting, your src for jquery wrong, you forgot the http: on the url;

Second, variables declared with var will be available only inside the function where declared, for creating a global variable call them without var;

you can't run this direct on browser, the ajax will don't function, therefore you can use a localhost apache to run them...

<script> 
$(document).ready(function(){ // ready document to be loaded
    $.ajax({
        type: "GET",
        url: "lou.xml",
        dataType: "xml",
        success: function(xml) {
            // the return of a ajax trough a xml file, is a xml parsed object, using $, this will be a jquery xml object;
            // find all 'gametracker' entryes;
            // (each) iteration trough founded entryes;
            $(xml).find('gametracker').each(function(){
                // select a container were you want to put your data, them append data in it;;
                $('.container').append($(this).attr('gameid')+' - ');
            });
        }
    });
});
</script>

this script will put the entryes on the div with class 'container', separating them with ' - '

<div class='container'></div>

i think you are learning this trough the hardest way... try starting with this: http://learn.jquery.com/javascript-101/

sorry bad english :) happy coding

edit: try devtools of Chrome, (f12 on windows or alt+command+i on mac) on the console view you can run js code in realtime, if you do a console.log(var) on your code, the result will show on this console of devtools.

Upvotes: 1

Related Questions