Using jQuery, jQuery UI and similar libraries

From Chickenfoot Script Repository

If you have ever tried using jQuery with Chickenfoot, you know the task can be a little daunting. However there is a sure fire way to use jQuery as long as you make certain concessions.

First, lets look at the code to use jQuery.

The loading script needs a little work, but for the most part it should do the job.

// ==UserScript==
// @name ChaChaQuestionDisplayer
// @when Pages Match
// @includes *
// ==/UserScript==

//This is a part of the scripts included with Chickenfoot for the read/write commands.
include('fileio.js');

//Get the path to the profile in use.
var file = Components.classes["@mozilla.org/file/directory_service;1"]
                     .getService(Components.interfaces.nsIProperties)
                     .get("ProfD", Components.interfaces.nsIFile);

var GM_JQ = document.createElement('script');
var GM_JQUI = document.createElement('script');

GM_JQ.type = 'text/javascript';
GM_JQUI.type = 'text/javascript';

//You can place the libraries any where you would like. This will just us the
//normal scripts directory for Chickenfoot. You could also source them to 
//a web server.
GM_JQ.innerHTML = read(file.path + '\\chickenfoot\\jquery-1.2.6.js');
GM_JQUI.innerHTML = read(file.path + '\\chickenfoot\\jquery-ui-personalized-1.5.2.min.js');

// Check if jQuery's loaded
function GM_wait()
{
    //Greasemonkey uses their unsafeWindow. An unsafeWindow in Chickenfoot
    //would be the best way to go which would make Chickenfoot and jQuery
    //fully compatible. However, the chromeWindow is the next best thing.
    var jQueryInjected = false;
    if (typeof chromeWindow.content.wrappedJSObject.jQuery == 'undefined')
    {
        //Only inject if jQuery is undefined.
        document.getElementsByTagName('head')[0].appendChild(GM_JQ);
        document.getElementsByTagName('head')[0].appendChild(GM_JQUI);
        jQueryInjected = true;
        window.setTimeout(GM_wait, 100);
    }
    else
    {
        $ = chromeWindow.content.wrappedJSObject.jQuery;
        
        //Releasing the injected jQuery so that other scripts can operate
        //Does not effect the operation of your functions.
        if(jQueryInjected = true)
        {
            chromeWindow.content.wrappedJSObject.jQuery.noConflict();
        }

        //You coud begin your jQuery coding here.
        letsJQuery();
    }
}

// All your jQuery code must be inside this function or from functions called by this 

function letsJQuery()
{
   //You can now use
   $("#GetMyElement")[0].style.zindex = "1002";
}

GM_wait(); //<--For best results place at the end of the file.

Ok so that's the code that will get jQuery and jQuery UI to operate through Chickenfoot. But remember, there are concessions you have to make. I only know of a few, but there maybe more.

Events and jQuery UI

With jQuery you can not use the built-in event system. You have to create your own events and attach them. For example, if you want to know when a Draggable item has been moved you can't use the Options for draggable(). Instead you can,

    //Warning - This event will fire every time the styles change. There is probably a better
    //event for this, but I save the possition of my draggable in a cookie so I can have the
    //Draggable set to that position when I visit the page where it is used again.
    document.getElementById("Draggable").addEventListener("DOMAttrModified", DraggableMoved, false);