XML parsing using jQuery

Question

I have the following xml:

<?xml version="1.0" encoding="utf-8"?>
<Area xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"&gt;
 <Scenes>
   <Scene Index="1" Name="Scene1" />
   <Scene Index="2" Name="Scene2" /> 
 </Scenes>
</Area>

Which i am trying to parse with jquery:

<script>
        $(document).ready(function(){
            $.ajax({
                type: "GET",
                url: "list.xml",
                dataType: "xml",
                success: function(xml) {
                    $(xml).find('scenes').each(function(){
                            $(this).find('scene').each(function(){
                            var name = $(this).attr('name');                            
                            $('<div class="items" ></div>').html('<p>'+name+'</p>').appendTo('#page-wrap'); 

                        });                     
                    });
                }
            });
        });
</script>

Why is this not working? Help!! first attempt at javascript/jquery This is based on a example I found, but have so far been unable to adapt it to my usage. / Lars

Answer 1

Try changing this:

$('<div class="items" ></div>')

to this:

$('.items')

Answer 2

Try running the code from your browser's console instead of when the document is ready. It will allow you to iterate on things much quicker. Try FireBug in Firefox for starters. I find the FB console to be much easier to use when debugging complex actions than what you get in a Webkit based browser.

You might also try adding error and complete callback functions to your $.ajax() call.

$.ajax({
    // ...
    error: function (req, err_type, ex) { console.log("error..."); },
    complete: function (req, status) { console.log("complete..."); }
});

You can also try tossing in some alerts or console.logs inside your success handler. Just enough to make sure you know it is being called and is getting the xml result that you expect it to get.

Answer 3

This code works for me in Safari and (surprisingly) Firefox:

$.ajax({
    type: "GET",
    url: "list.xml",
    dataType: "xml",
    success: function(xml) {
  $(xml).find('Scenes').each(function(){
      $(this).find('Scene').each(function(){
          var name = $(this).attr('Name');                            
          $('<div class="items" ></div>').html('<p>'+name+'</p>').appendTo('#page-wrap'); 
             });                     
         });
    },
    error:function(a,b,c) { console.log( c ) }
});

The reason it doesn't work in some browsers is likely due to the fact that you're hosting from the filesystem (assuming you are). Chrome and Firefox tend to give trouble when accessing the filesystem via AJAX request due to Same Origin Policy.

The javascript is fine. You're just either getting an empty response, or an error.

This question may be applicable:

http://stackoverflow.com/questions/2541949/problems-with-jquery-getjson-using-local-files-in-chrome