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">
 <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

@icktoofay: It is not case sensitive @jAndy: not working means that not is displayed - not sure how else to explain it :o). This is my first time with js - any tips on debugging/fault finding this code. I have tried adding alerts/messageboxes. it enters $.ajax but after that nothing happens if i move the alert further "into" the code — lmkk
– lmkk, Commented Jun 7, 2010 at 9:09
Works for me when you correct capitalization: .find('Scenes'), .find('Scene'), $(this).attr('Name');. — user113716
– user113716, Commented Jun 7, 2010 at 12:18
Works in safari now - but not in chrome and firefox @patrick - which browser did you use? — lmkk
– lmkk, Commented Jun 8, 2010 at 7:21

Community · Accepted Answer · 2017-05-23 12:30:45Z

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:

Problems with jQuery getJSON using local files in Chrome

istruble · Accepted Answer · 2010-06-07 15:24:39Z

0

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.

answered Jun 7, 2010 at 15:24

istruble

13.8k2 gold badges51 silver badges54 bronze badges

1 Comment

lmkk Over a year ago

Found two problems and solved one of them. It is case sensitive after all - Thanks to icktoofay and Patrick. But for some reason this only works in safari, but not in chrome or firefox. isn´t safari and chrome the same in terms of javascript - webkit engines?

LPL · Accepted Answer · 2011-12-19 17:56:56Z

0

Try changing this:

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

to this:

$('.items')

edited Dec 19, 2011 at 17:56

LPL

17.1k6 gold badges54 silver badges98 bronze badges

answered Jun 7, 2010 at 9:35

thedude

1

Collectives™ on Stack Overflow

XML parsing using jQuery

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related