Question

Edit: Details updated to add differences in Firefox/Chrome behavior

I am trying to create a bookmarklet that will load both jQuery and jQueryUI. The jQuery load uses javascript, but I figured since jQuery was loaded I’d go ahead and use it for the UI loading. More than getting it to work I really want to understand why this doesn’t work. I’m still wrapping my head around scope/closures/etc. But I just don’t see why in firefox $ doesn’t work but “jQuery” does! The $ works fine in Chrome but I get a DIFFERENT issue there.

Notes:
1) In FireBug/FireFox I get ‘$(“head”) is undefined’
2) In Chrome the “$” works fine, but the jQueryUI call fails with Object [object Object] has no method ‘dialog’
3) the callback guarantees jQuery is loaded by the time I try to use it. In Firefox if I replace “$” with “jQuery” ( such as jQuery(“head) ) then the code works!.
4) there are no other libraries on the page already using $
5) Even more frustrating, in Firefox if I just give in and use “jQuery” rather than “$” and then set the callback from $(“#jquilib”).load() to call a third function, jQueryUI functions such as .tabs() and .dialog() are unavailalble even though the callback itself was triggered by jQueryUI being available!
6) In Chrome the jQueryUI issue goes away if I use setTimeout() to 100ms. If I go down to 1ms or something than the issue persists.

I am using the getScript function from this post: http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet.

Below is my code:

function getScript(url,success){
    var script=document.createElement('script');
    script.src=url;
    var head=document.getElementsByTagName('head')[0],
        done=false;
    // Attach handlers for all browsers
    script.onload=script.onreadystatechange = function(){
      if ( !done && (!this.readyState
           || this.readyState == 'loaded'
           || this.readyState == 'complete') ) {
        done=true;
        success();
        script.onload = script.onreadystatechange = null;
        head.removeChild(script);
      }
    };
    head.appendChild(script);
}

function initializejQueryUI(){
    if (typeof jQuery.ui == 'undefined'){
        // jQueryUI library & jQueryUI cupertino theme
        $('head').append("<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css' type='text/css' rel='stylesheet'>");
        $('head').append("<script id='jquilib' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js'></script>");
    }
    $("#jquilib").load($("<div>jQuery & UI Loaded!</div>").dialog());
}
getScript('https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js', initializejQueryUI); // call initializejQueryUI as callback when jQuery loads

Answer 1

Ok, figured it out after a lot of trial an error. I went ahead and continued developing my script in Chrome seems it seemed I got further than in Firefox. When I completed my bookmarklet I tried it on a whim in Firefox and it worked there too! Here’s what I learned:

1) The $("#jquilib").load($("<div>jQuery & UI Loaded!</div>").dialog()); call doesn’t work because jQuery removes elements added via append from the DOM after processing the script! It was easier just to re-use the getScript() function to also get jQueryUI and put the alert in a function called from the callback. The tab creation issue I encountered (item #5 in the question above) was a result of this quirk.

Reference: http://api.jquery.com/append/
Search for Karl Swedberg saying “yes, it’s normal”

2) Firebug seems to make use of the “$” while in the console, leading a situation like my description above where “$” doesn’t work but jQuery() does work. There seem to be some rules governing when it releases the “$” because if i just try running the script again jQuery’s $ shortcut suddenly works. This was the most frustrating part because it made it appear like a scope and/or timing issue!