Question

I’m working on a bookmarklet which needs access to jquery-ui as well as jquery min. The concern of course being that the page may already have jQuery loaded and conflicts should be avoided.

Using Ben Alman’s code at found at http://benalman.com/code/javascript/jquery/jquery.ba-run-code-bookmarklet.js I’ve been able to gracefully introduce jQuery and hacked in UI to load as well but there seems to be an issue with the delay and jQuery UI is not ready to go right away…

Is there a better way to handle loading both scripts in sequence before executing the actual code?

(function( window, document, jQuery, req_version, callback, callback_orig, parent, script ){

  if ( !window[jQuery] || req_version > window[jQuery].fn.jquery ) {
    parent = document.documentElement.childNodes[0];
    script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js';
    parent.appendChild(script);

    callback_orig = callback;
    callback = function($, L) {
      '$:nomunge, L:nomunge';
      $(script).remove();
      callback_orig( $, L );
    };
  }

  if (typeof jQuery.ui == 'undefined'){
   parent = document.documentElement.childNodes[0];
   scriptui = document.createElement('script');
   scriptui.type = 'text/javascript';
   scriptui.src = 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.js';
   parent.appendChild(scriptui);
   alert('Loading your matches...');
  } 

  (function loopy($){
    '$:nomunge'; // Used by YUI compressor.

    ( $ = window[jQuery] ) && req_version <= $.fn.jquery
      ? callback( parent ? $.noConflict(1) : $, !!parent ) : setTimeout( loopy, 50 );
  })();

})( window, document, 'jQuery', '1.3.2',

 function($,L) {
    '$:nomunge, L:nomunge';   

<all the jquery stuff goes here>

There’s a similar question at Using jQuery UI in a Bookmarklet with in-depth answers but I have been unable to translate this from CoffeeMarklet to “standard” js.

Answer 1

See my gist here – This is a bookmarklet template for loading jQuery, but you can specify additional scripts and css to load before execution.

https://gist.github.com/2897748

You initialise it like this.

Edit: If you need to load dependencies, you can create an array and push things into it depending on different conditions.

var jsDependencies = [];

// This will only load jQuery UI if it does not exist already.
// Of course if you rely on the page's copy, you have to do some 
// more advanced things to check for versions and whatnot.
if(!window.jQuery || !window.jQuery.ui){
  jsDependencies.push('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js');
}

var MyBookmarklet = MyBookmarklet || new Bookmarklet({
  // debug: true, // use debug to bust the cache on your resources
  css: ['/my/style.css'],
  js: jsDependencies,
  // jqpath: '/my/jquery.js', // defaults to google cdn-hosted jquery
  ready: function(base) { // use base to expose a public method
    base.init = function(){
      // doStuff();
    }    
    base.init();
  }
});