jQuery UI Dialog Throw Errors When Invoked from Greasemonkey

Question

I'm getting this awkward error any time I try and create a dialog from Greasemonkey... I believe it has to do with the limitations of XPCNativeWrapper https://developer.mozilla.org/en/XPCNativeWrapper#Limitations_of_XPCNativeWrapper , though I am not 100% sure.

None of the core jQuery methods that I've used have caused errors (append, css, submit, keydown, each, ...).

It is possible that this could be an error in Greasemonkey or due to the interaction between Greasemonkey and jquery ui, but I am really interested in figuring out how to get them to work together.

// ==UserScript==
// @name           Dialog Test
// @namespace      http://strd6.com
// @description    jquery-ui-1.6rc6 Dialog Test
// @include        *
//
// @require        http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
// @require        http://strd6.com/stuff/jqui/jquery-ui-personalized-1.6rc6.min.js

// ==/UserScript==

$(document).ready(function() {
 $('<div title="Test">SomeText</div>').dialog();
});

Error: [Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///home/daniel/.mozilla/firefox/.../components/greasemonkey.js :: anonymous :: line 347" data: no] [Break on this error] if (line) {

Firefox version: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.6) Gecko/2009020911 Ubuntu/8.04 (hardy) Firefox/3.0.6

Update: The focus() method from the standard jQuery library also throws the same error:

$('body').focus();

Maybe the UI is calling the focus method at some point?

Any help will be greatly appreciated!

Answer 1

This thread is pretty old but the way to use Greasemonkey with Jquery to focus() is to add a [0] to the jquery object to turn it back to a DOM element.

      //Example:  
      $('#obj').focus();                          //Does not work
      document.getElementById('obj').focus();     //Works

      //Hybrid:
      $(#obj)[0].focus();                         //Work around

Answer 2

Here is one workaround, but there are still other less dramatic problems involved.

// ==UserScript==
// @name           Dialog Test
// @namespace      http://strd6.com
// @description    jquery-ui-1.6rc6 Dialog Test
// @include        *
//
// @resource       jQuery               http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
// @resource       jQueryUI             http://strd6.com/stuff/jqui/jquery-ui-personalized-1.6rc6.min.js

// ==/UserScript==

// Inject jQuery into page... gross hack... for now...
(function() {
  var head = document.getElementsByTagName('head')[0];

  var script = document.createElement('script');
  script.type = 'text/javascript';

  var jQuery = GM_getResourceText('jQuery');
  var jQueryUI = GM_getResourceText('jQueryUI');

  script.innerHTML = jQuery + jQueryUI;
  head.appendChild(script);

  $ = unsafeWindow.$;
})();

$(document).ready(function() {
  $('<div title="Test">SomeText</div>').dialog();
});

The problems having now stem from $ being in the unsafeWindow context, so certain GM methods cannot be called from the unsafe context (like GM_getValue when inside $.each). There's got to be a way to get to the root of this and have jQueryUI work from within Greasemonkey. I'm 90% certain that it's an XPCNativeWrapper issue, so there should be an simple workaround by changing some code in the dialog plugin.

Answer 3

Not a direct answer, but:

If you're not married to Greasemonkey, but want good jQuery integration and Greasemonkey-like functionality in Firefox, you should check out Mozilla Ubiquity. It's got jQuery built-in, good access to the browser window, relative freedom with regards to loading content from arbitrary locations, an on-every-page-load execution option (a la Greasemonkey), an external script loader (this is how I'd go about trying to load jQuery UI..) and a bunch of other really cool stuff. I found it a lot easier to play in and get running within minutes as opposed to messing around with GM / Firefox addon weirdness.