Is It Me or the Browser?
I had a Safari bug on a project I’m rushing to get out the door. We’re using a Flickr feed to populate a div with link+thumbnail to some flickr images. In Firefox/Internet Explorer I simply did the following to build the links:
flickr : function(obj) {
//get the full list of items
var items = obj.getElementsByTagName("item");
//make sure it's not empty
if (items.length > 0 ) {
//start the HTML block
var blob = "<div id='flickrFeed'>";
//loop through the items (we only want 5) and build some links)
for (var i = 0; i< 5 ; i++) {
//get the link
var flink = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
//get the thumbnail
var flurl = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
//smash them into the string
blob+="<a href='"+flink+"'><img height='75' width='75' src='"+flurl+"' /></a>";
};
//close the div
blob+="</div>";
//pop it onto the shelf, for later use
$("hyperspace").innerHTML+=blob;
} else {
//if there's somethign wrong with the feed, go to default contentk
social.fallBack.flickr();
}
}
For some reason the var flurl = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url"); line failed in Safari. In fact, items[i].getElementsByTagName("media:thumbnail").length returned 0.
In the name of time, I put together this beast:
flickr : function(obj) {
var items = obj.getElementsByTagName("item");
if (items.length > 0 ) {
var blob = "<div id='flickrFeed'>";
for (var i = 0; i< 5 ; i++) {
var flink = items[i].getElementsByTagName("link")[0].childNodes[0].nodeValue;
//Does it return 0?
if (items[i].getElementsByTagName("media:thumbnail").length == 0) {
//if so, we use this hand rolled getElementsByTagName (and weep about it)
var test= items[i].childNodes.length;
for (var j=0; j <test; j ++ ) {
if (items[i].childNodes[j].nodeName == "media:thumbnail") {
var flurl = items[i].childNodes[j].getAttribute("url")
}
}
} else {
var flurl = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
}
blob+="<a href='"+flink+"'><img height='75' width='75' src='"+flurl+"' /></a>";
};
blob+="</div>";
$("hyperspace").innerHTML+=blob;
} else {
social.fallBack.flickr();
}
}
The question is- am I missing something simple that I could have done to fix it without the hand rolled getElementsByTagName? Or is there a bug in Webkit’s implementation of getElementsByTagName that chokes on the namespace prefix? A quick Google search looks at first looks promising, but doesn’t seem to hit this specific problem. Which seems impossible.
Anyone have any insight?
[Edited to Add…]
Since I sometimes can’t let these things go, I did some further research. It seems like getElementsByTagNameNS seems to be the standard way to go. Which means I have another rewrite to do.
Which would be annoying if I didn’t love this stuff. I’ll report on that tomorrow.
I believe getElementsByTagNameNS isn’t supported by IE so you might need to have some browser detection to use getElementsByTagNameNS with Safari 🙁
Hey ryan, I actually covered that in a later post.
This works on FF and Chrome for the node “media:thumbnail”:
elBoard.getElementsByTagNameNS(“*”,”thumbnail”);
For people debugging similar problems, tag names of the form x:y (ie: “media:thumbnail”) are termed “Qualified Names”. http://www.w3.org/2001/tag/doc/qnameids
Had the same exact problem as above and it was driving me ‘crazy’ – I am using google’s feed API for an rss feed and chrome wasn’t supporting media:thumbnail in getElementsByTagName method. So Thank you Russell for you’re wisdom and I’m using getElementsByTagNameNS(“*”,”thumbnail”); and using getElementsByTagName for IE with some browser sniffing thanks again for this post