jQuery in Opera User JS Doesn't Work

Question

Hello ::- ). I'm playing with some Opera User JS. I included "1jquery.min.js" in my User JS folder (1 in front because Opera loads them alphabetically). Unfortunately, it doesn't appear to be working.

window.onload = OnWindowLoad;

$(document).ready(function()
{
  alert ($('#area_19'));
});

function OnWindowLoad ()
{
  alert ($('#area_19'));
  alert(document.getElementById("area_19"));
}

What's interesting about this code is that the first two alerts come back in NULL, but the last one does find the object! So the element definitely exists in the page, but my jQuery seems unable to get it. What's even stranger is that the jQuery "ready" function works, indicating that I do have jQuery capability.

I'm quite puzzled about all this ::- /. Hopefully somebody can give me a clue ::- ).

Answer 1

I suspect you are running the script on a page that uses another JS framework, probably Prototype.js.

If Prototype were included by the target page it would overwrite your jQuery copy of $ with its own that gets an element by ID, not selector. Since there is no element with ID #area_19 (# not being a valid character in an ID), it would return null. jQuery would never return null for a non-existant element, you'd only get an empty wrapper object.

(The $(document).ready() code would still execute because the $ was called before Prototype was included and changed the behaviour of $.)

Try using the explicit jQuery function rather than the $ shortcut.

These sorts of interferences are common when mixing multiple frameworks, or even mixing two copies/versions of the same framework. From jQuery's side its interactions can be reduced, but not eliminated, with noConflict. Personally for code like user scripts that might have to live in a wide range of contexts not controlled by myself, I would avoid using wide-ranging frameworks like jQuery.