2

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.

Community
  • 1
  • 1
Ted S
  • 327
  • 2
  • 13

1 Answers1

3

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();
  }
});
Jon Jaques
  • 4,262
  • 2
  • 23
  • 25
  • Ahhh, spoke too soon. The page I was viewing already had UI loaded up and adding in js: ['http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js'], is producing the error: arr is not defined, line 74 (63 of the git pub) – Ted S Jul 03 '12 at 23:47
  • Oops. My apologies. ```arr``` should be changed to ```scripts```. I have updated the gist. – Jon Jaques Jul 05 '12 at 01:10
  • Also, make sure you either use 'https://', 'http://', or '//'. The last of which being a protocol-relative url. The script requires a fully qualified URI to load stuff. – Jon Jaques Jul 05 '12 at 01:19
  • hmm, you could try replacing $ with jQuery. it's possible they have jQuery loaded in noConflict mode. I'll try one of my own bookmarklets thats based on this and let you know what i find out. – Jon Jaques Jul 05 '12 at 08:23
  • Follow up on this... By replacing $() with jQuery() we were able to get jQuery's base to load on Amazon and a variety of other sites which had issues. However a conflict remains in loading UI of some sort and all UI functions fail. Don't suppose you have any ideas on how to get around that? – Ted S Sep 05 '12 at 23:12