17

I'm trying to use jQuery inside a Firefox extension, and actually want to use jQuery to manipulate the DOM of the current page, as opposed to the context of the XUL file. Thus, I load jQuery in my XUL file, and pass it to some of my scripts in a sandbox (using the Greasemonkey extension compiler http://arantius.com/misc/greasemonkey/script-compiler). Since jQuery was not loaded with the page DOM, I want to set its selector context to the page DOM instead of always passing it into jQuery calls.

I followed the solution at How to use jQuery in Firefox Extension and it almost achieves what I want.

jQuery.noConflict();
$ = function(selector,context){ return new jQuery.fn.init(selector,context||example.doc); };
$.fn = $.prototype = jQuery.fn;

I'm able to make calls to the jQuery() function, and the page DOM will be used as the context. However, I can't use functions like jQuery.trim as those are not defined.

I thought this line from the solution

$.fn = $.prototype = jQuery.fn;

will let my own jQuery object inherit all of the jQuery prototype properties, but it apparently doesn't.

Give a vanilla jQuery object, how do I redefine it to use a certain element as the selector context, while preserving all jQuery functions?

Community
  • 1
  • 1
pmc255
  • 1,499
  • 2
  • 19
  • 31
  • I hope it works for you. When I tried to use jQuery in an extension and loaded it in a XUL overlay, it somehow broke the overlays of other plugins like the Webdeveloper toolbar. Maybe it works better now. Just watch out for this! – Felix Kling Sep 11 '10 at 10:53

3 Answers3

11

.trim(), .ajax() etc are static methods, meaning they are bound to the jQuery constructor and not it's prototype. 

jQuery.noConflict();
$ = function(selector,context){ return new jQuery.fn.init(selector,context||example.doc); };
$.fn = $.prototype = jQuery.fn;
jQuery.extend($, jQuery); // copy's trim, extend etc to $

However a perhaps nice way is to leave jQuery intact and do the following:

var fromDoc = $(document);
// and if you want to find stuff:
fromDoc.find('div').doSomething();
fromDoc.find('.someClass').doSomethingElse();

This is also an optimisation since the context doesnt have to be manually set anymore with each query.

BGerrissen
  • 21,250
  • 3
  • 39
  • 40
  • Nice one! I was struggling for hours and completely forgot about `$.extend`. I end up finding another solution. – BrunoLM Apr 03 '12 at 23:11
4
var jQueryInit = $.fn.init;

$.fn.init = function(arg1, arg2, rootjQuery){
    arg2 = arg2 || window.document;
    return new jQueryInit(arg1, arg2, rootjQuery);
};
Gerry
  • 10,584
  • 4
  • 41
  • 49
2

Another way of doing it is overriding the constructor:

var initjQuery = jQuery.fn.init;
$.fn.init = function(s,c,r) {
    c = c || window.document;
    return new initjQuery(s,c,r);
};
BrunoLM
  • 97,872
  • 84
  • 296
  • 452
  • That last parameter "r" stands for "rootjQuery" and if you don't include it you will keep getting errors saying "rootjQuery is undefined". I learnt that one the hard way. The first two parameters are flexible, so there isn't really a good name for them. – Gerry Jun 14 '12 at 04:28