How to query an XML string via DOM in jQuery

Question

Hi. I would like to take a string and treat it as XML. Then I will be able to query with DOM via the jQuery.find. Everything was working fine in Firefox, but I realized this is not working in IE.

I am doing this:

  var t = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
  alert("[" + $(t).find("outer").html() + "]");

In Firefox 3 it prints:

[<inner>abc</inner><inner>def</inner>]

In IE 7 it prints:

[]

Any workarounds for getting this to work across browsers?

Thanks.

Answer 1

First off, the jQuery constructor takes HTML not XML... that being said, your XML may work - but it depends on a lot of browser dependent behavior. Also, you may have better success by appending the newly created elements to a hidden element on the page somewhere and then trying to query it:

var xml = "<books><book><title>Title</title></book></books>";
$(xml).appendTo("#hidden");
alert($("#hidden books").length);

Answer 2

There are a 2 ways to approach this.

1. Convert the XML string to DOM, parse it using this plugin or follow this tutorial
2. Convert the XML to JSON using this plugin.

Answer 3

Would it be possible to store the XML as JSON (I would assume it would be)? For instance, in PHP, you can convert XML to an Array or Object and then convert that into JSON with json_encode. You could then echo that out as a javascript variable like so:

In PHP:

<?php
$xml = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
$xml_object = simplexml_load_string(xml);
$json = json_encode($xml_object);
?>
<script language="javascript">
$(function() {
    // eval() is okay to use if you know where the JSON is 
    // coming from (and, of course, you do...) 
    var data = eval('<?php echo $json; ?>');
    $(document).data('myapp.data',data);
});
</script>

And now, whenever you need to access that data, you can just get it like so:

function some_function() {
    var data = $(document).data('myapp.data');
    $.each(data.div.outer,function() {
        // Would alert 'abc' then 'def'
        alert(this.inner);
    });
}

I hope all that makes sense. At least you won't have to worry about XML anymore on the client side. Of course, if you absolutely need to, I've found that this has worked for me in the past:

var xml = "<div><outer><inner>abc</inner><inner>def</inner></outer></div>";
var $xml = $('<div />').append(xml);
alert("[" + $xml.find("outer").html() + "]");

Edit I modified my code to use the actual XML you provide--not sure where I mixed up there (must've grabbed the snippet from someone else's answer on accident). You should really give my first suggestion a shot--it should work.

Answer 4

With string xml in ie you need to use .filter as it doesnt want to recognise the xml node tree.

Try this in ie8 with the debugger visible to get the console output.

Answer 5

So what about instead of storing the XML dataset in the DOM, convert it to an HTML table and make it invisible. That should solve the jQuery problems... at least the browser specific issues. Then back to work on refining your selectors.

Answer 6

I know this is a little late but I think this link explains why it doesn't work in IE and how to fix it: http://dev.jquery.com/ticket/3143

Answer 7

It's been a while, but I just realized that I forgot to post how I solved the problem with your combined ideas.

I needed an entirely client side database (no PHP).

I created a div with an HTML comment in it containing the XML. I parsed the HTML comment with this and then I converted the XML to JSON with this.

   var xmltext = $("#piecelist").comments();
   var json = $.xml2json(xmltext.html());

You can see my method in action here: http://wesculpt.net/art.html

Maybe I should turn this method into a jQuery plugin.

Thanks for all your help everyone.