Witheringtree » jQuery

$(“#objectID”) != document.getElementById(“objectID”)

David Freerksen — Sun, 11 Apr 2010 01:13:12 +0000

Using document.getElementById(“…”) in plain ol’ Javascript will return a reference the DOM element by the given name. In jQuery, we use $ for everything. So I assumed using $(“#…”) would be the same thing. This is wrong. $(“#…”) will return an associative array (object) which is what allows us to change properties of the DOM element. If I am looking to return the reference to the DOM element alone in jQuery, then you need to use $(“#…”).get(0) which will return the first instance of that object. The zero is important because .get() return an array. So if you have more than one instance of what you are looking for, you can target a specific instance of it.

If you can’t bring yourself to use .get() you can also use $(“#…”)[0] which would do the same thing.

Image Load Event Binding With IE Using jQuery

David Freerksen — Sat, 30 May 2009 04:08:45 +0000

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.

XML Namespaces With jQuery (Solved)

David Freerksen — Mon, 04 May 2009 15:52:50 +0000

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:

…
…
…

…
…link>
…
…
…
…
…
…

…

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())
});