Archive for category ‘jQuery’

I ran into a strange issue today. I wrote a plugin for jQuery that used the load events from jQuery attached to an image. This plugin worked perfectly in Firefox, Safari, and Opera on PC, Mac, and Ubuntu. The only browser that it had problems with was IE.

I know. Completely unheard of right? I mean Internet Explorer is the best browser ever. Everything works perfectly in IE. (In case you didn’t catch that, that was sarcasm)

What the plugin was doing was creating an image element and adding it to the DOM. Once the image was added to the DOM I added the load event to it. The problem was that IE would only see the load event maybe 10% of the time at best. The only way I could get it to work in IE was add the image element to the DOM but don’t give it a src. Once the image element was added to the DOM, I created the load event listener. Once the load even was created, then I went back to the image and gave it an src.

This was an issue only on images with a smaller file size. The larger images didn’t seem to have as big of an issue with it except when I was testing locally. However, even the larger images weren’t consistently calling the load event.

Hopefully this helps out someone else. This drove me nuts for about an hour.

If you have come to this post, you are in the same situation I was in. Many Javascript/AJAX framesworks like jQuery do not work with XML namespaces. I came upon an instance at work where I needed to display data from an RSS feed from Zoho Creator. Part of the problem was some of the nodes had default namespaces and others had custom namespaces. I needed to access the data in the custom namespaces and it just wouldn’t work in Firefox or IE. It worked just fine in Safari.

This is a sample output of the RSS feed from Zoho with the data replaced with dots:

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<rss version=”2.0″ xmlns:zc=”http://creator.zoho.com/rss/”>
<channel>
<title>…</title>
<link>…</link>
…
<item>
<title>…</title>
<link>…link>
<description>…</description>
<guid isPermaLink=”true”>…</guid>
<zc:image>…</zc:image>
<zc:location>…</zc:location>
<zc:startdate>…</zc:startdate>
<zc:enddate>…</zc:enddate>
</item>
…
</channel>
</rss>

What I was doing with jQuery was looping over the “item” nodes using the jQuery each() method as such:

var items = $(data).find(“item”);
jQuery.each(items, function(i)
{
alert($(this).find(“location”).text())
});

The problem was that this only worked in Safari. In Firefox and IE nothing was returned. Firefox and IE don’t like the custom namespaces. The only way I have found to get this to work is to use this method:

var items = $(data).find(“item”);
jQuery.each(items, function(i)
{
alert($(this).find(“[@nodeName=zc:location]“).text())
});