read xml file using jquery in an html file

Question

I am new to jQuery and am trying to read in an xml file. I have created a simple html file as shown below and in the same directory have an xml file called allTasks.xml. I see the alert when the document is loaded and I see the second alert 'Here Now'. However when I try and use the find method I cannot traverse the xml correctly. Is there a good way to test if I am actually loading the xml file at all? Also should this work in a html file or should I be using php?

Any help would be greatly received !

html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Read XML File</title>
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function(){
        alert('Loaded');

         var $myXML;

         $.get('allTasks.xml', function(data) {
            $myXML = data; ;
             }, 'xml');

             alert('Here now ');

             alert($myXML.find("Tasks>Task>TaskId").text());
      });
  </script>

</head>
<body>

<div data-role="page" id="page1">
  <div data-role="header" class="ui-bar ui-bar-b" style="height:50px;">
  </div>      <!-- end of header  -->


  <div data-role="content">
  <div id='names'></div>

  </div>    <!-- end of content  -->


</div> <!-- end of page div -->

</body>
</html>

xml

<TaskList>
  <Tasks>
    <Task>
      <TaskId>1</TaskId>
      <Name>Name of Task 1</Name>
    </Task>
    <Task>
      <TaskId>2</TaskId>
      <Name>Name of Task 2</Name>
    </Task>
  </Tasks>
</TaskList>

Alert or console.log your $myXML within the callback function of $.get. $.get is asynchronous so your last alert will fire earlier that your $.get is done. — putvande
– putvande, Commented Aug 2, 2013 at 11:46

amakhrov · Accepted Answer · 2013-08-02 11:48:33Z

1

$.get('allTasks.xml', function(data) {
    var parsed = $(data);
    alert( parsed.find('Tasks>Task>TaskId').text() );
}

answered Aug 2, 2013 at 11:48

amakhrov

3,9691 gold badge15 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Smith Over a year ago

Hi amakhrov - I tried your solution but i still get no result - I am just coding this in an html file and launching it in my browser should I be doing all of this within a web server istalled on my windows machine ?

amakhrov Over a year ago

if you use exactly the same code, then take into account that ajax request ($.get) for file:// URL's are prohibited by default - so yeah, you need to host it via the local webserver. But the parsing code works regardless on how you run the web page

Collectives™ on Stack Overflow

read xml file using jquery in an html file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related