Parsing XML with namespaces using jQuery $().find

Question

I'm trying to get the contents of a XML document element, but the element has a colon in it's name.

This line works for every element but the ones with a colon in the name:

$(this).find("geo:lat").text();

I assume that the colon needs escaping. How do I fix this?

Solution 1

Use a backslash, which itself should be escaped so JavaScript doesn't eat it:

$(this).find("geo\\:lat").text();

Solution 2

That isn't just an ordinary element name. That's a qualified name, meaning that it is a name that specifically refers to an element type within a namespace. The element type name is 'lat', and the namespace prefix is 'geo'.

Right now, jQuery can't deal with namespaces very well, see bug 155 for details.

Right now, as a workaround, you should be able to select these elements with just the local name:

$(this).find("lat").text();

If you have to distinguish between element types with the same local name, then you can use filter():

var NS = "http://example.com/whatever-the-namespace-is-for-geo";
$(this).find("lat").filter(function() { return this.namespaceURI == NS; }).text();

Edit: my mistake, I was under the impression that patch had already landed. Use Adam's suggestion for the selector, and filter() if you need the namespacing too:

var NS = "http://example.com/whatever-the-namespace-is-for-geo";
$(this).find("geo\\:lat").filter(function() { return this.namespaceURI == NS; }).text();

Solution 3

if you have a jquery selector problem with chrome or webkit not selecting it try

$(this).find('[nodeName=geo:lat]').text();

this way it works in all browsers

Comments

[Mike Grace]

@Vaske, I was seeing the same thing in Chrome using one of the latest versions of jQuery. Using the second half of node name after the colon worked for me. Used .find("lat") instead of .find("geo\\:lat") and it worked for me.

[vaske]

@Mike yes that helps but I had namespace problem, general problem with my returning XML that it contains <title> and <mine:title> and chrome in that case pull it together :(

[Macario]

It isn't working for me in FF but I found this answer: stackoverflow.com/questions/853740/…

[ArnisAndy]

It's worth noting that as of jQuery 1.7 there were issues with some of the work-arounds for finding namespaced elements. See these links for more information: bugs.jquery.com/ticket/10377 steveworkman.com/html5-2/javascript/2011/…

[Valjas]

Definitely recommend checking out the 2nd link ArnisAndy provided in his comment above. It beats all of the other solutions.

[avernet]

.find just like getElementsByTagName doesn't behave the same across browsers (in particular Chrome and Firefox). If you're interesting in the direct children, use .children, which does work across browsers. More on: wiki.orbeon.com/forms/doc/contributor-guide/…

[Michal Stefanow]

I referenced @MikeGrace's comment in the answer to the related question: stackoverflow.com/a/30040350/775359

[kosemuckel]

The link to steveworkman really helped. This works in Chrome and FF for me: $(xData.responseXML).find("z\\:row, row").each(function() { // Do stuff });