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!
