JQuery.hoverIntent.js in Firefox extension not loading

Question

According to this guide, I tried to load jQuery into the Firefox extension.

var Myext = {

  loadJQuery: function(wnd) {
      var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
        .getService(Components.interfaces.mozIJSSubScriptLoader);
      loader.loadSubScript("chrome://myext/content/jquery-1.7.2.min.js", wnd);
      var jQuery = wnd.jQuery.noConflict(true);
      try {
        loader.loadSubScript("chrome://myext/content/jquery.hoverIntent.js", jQuery);
      catch (Except) {
        alert(Except.toString());
      }
      return jQuery;
  },

  onLoad: function(e) {
    Myext.jQuery = Myext.loadJQuery(window);
  },

  showDialog: function(e) {
    var $ = Myext.jQuery;
    /* JQuery code */
  }

}

window.addEventListener("load", function(e) { Myext.onLoad(e); }, false);
window.addEventListener("DOMContentLoaded", function(e) { Myext.showDialog(e); }, false);

The bootloader has a boot problem jquery.hoverIntent.js. I downloaded it here

error message: "Type Error: $ is undefined"

Answer 1

To use .dialog(), you need to enable jQuery UI . Place the following line immediately after loading the jQuery library:

loader.loadSubScript("chrome://myext/content/jquery-ui-1.8.18.custom.min.js", wnd);

The latest jQuery user interface library you can download from here .

Answer 2

This line:

onLoad: function(e) {
    Myext.jQuery = Myext.loadJQuery(window);
  },

Must not be?

onLoad: function(e) {
    Myext.jQuery = loadJQuery(window);
  },