Hey all, I'm trying to use JQuery under XULRunner to write a custom web based GUI - problem is, when I'm using the JQuery selector, it doesn't recognize the element subtype of the XUL DOM. I don't know if JQuery is designed or equipped for this kind of usage or not, but it seems to work fine with Mootools. (have not tried prototype).
JQuery is preferred because there are already a number of web application already using it, there's an obvious long term benefit in using a unified JS framework across multiple projects. But this is a big roadblock for me, and I would like to at least try to resolve it before deciding to ditch JQuery for Mootools. --- main.xul --- This is the main chrome .xul, this is the document DOM I am working against. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="root" title="BlackHawk Browser" width="1200" height="768" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" > <!-- load library --> <script type="text/javascript" src="lib/jquery-1.3.2.min.js"></ script> <script type="text/javascript" src="lib/zugiart-xul-util.js"></ script> <!-- event handler --> <script type="text/javascript" src="event.js"></script> <hbox style="padding-top: 10px;"> <caption label="URL:" style="padding-top: 5px;"/> <textbox flex="1" id="address" onchange="address_onchange();"/> </hbox> <browser flex="1" id="browser" style="border: 1px solid #000; margin: 5px;" /> <vbox> <space minheight="10px" flex="1"/> <caption label="DEBUG LOG CONSOLE" /> <textbox id="debug" readonly="true" multiline="true" style="height: 100px;" /> </vbox> <script> // call init after everything is loaded init(); </script> </window> --- extract from event.js, containing event handler functions --- Within event.js, when I use the JQuery selector to pick a single element by ID: var browserElement = $('#browser'); alert(browserElement); JQuery was able to find the browser element. Problem is, it recognizes this browser element not as a XULelement, but as an Object. As a result, I can not invoke the function that is available within it. That is, I can not call browserElement.loadURI('www.google.com'); Note: When I tested this against mootools, I was able to do $('browser').loadURI('www.google.com'); without a problem. However I would still like to use JQuery if possible, so any pointers / tips you can provide will be much appreciated!