Open jQuery ui Dialog in Firefox extension

0
votes

I need to open jQuery ui dialog by clicking the button in the Firefox toolbar (developed as the Firefox extension). I've added the .js files in the .xul file, but it doesn't work from some reason. I use the Mozilla Firefox 4. Here is my source code:

.xul file:

..

<script type="application/x-javascript" src="chrome://tuttoolbar/content/tuttoolbar.js" /> 
<script type="application/x-javascript" src="chrome://tuttoolbar/content/scripts/jquery-1.4.2.min.js" /> 
<script type="application/x-javascript" src="chrome://tuttoolbar/content/scripts/jquery-ui-1.8.4.custom.min.js"/>

...

<toolbarbutton id="Example" tooltiptext="UI Dialog" label="Open jQ dialog" oncommand="objTutorialToolbar.sayHello1(event); event.stopPropagation();"/>

tuttoolbar.js:

   ....

   var objTutorialToolbar = {

   ......

   sayHello1 : function(aEvent) {

    var docUrl =  window.content.document.location.href;

    var div = document.createElement("div");

    div.setAttribute("id", "dialog_dummy");

    var body = document.getElementsByTagName("body").item(0);

    body.appendChild(div);

    $dialog = $('#dialog_dummy').html('').dialog(
    {
      title : 'Title',
      modal : false,
      autoOpen : false,
      show : 'slide',
      hide : 'slide',
      url : docUrl,
      height: 550,
      width: 1050
    });

       $dialog.dialog("open");
    },

   ...

}

Does somebody know where is the mistake in the code above?

2
jquery-uifirefox-addon
It would help if you explained what exactly doesn't work, including error messages if there are any is helpful as well. This will save us time locating the mistake in your code. – Wladimir Palant
There is some strange exception: “TypeError: r is null”. And I can't open current page from the browser in the jQuery dialog... – sonjafon

2 Answers

0
votes

document in your code above is the XUL document your code is executing in. It isn't an HTML document so it doesn't have a <body> element (document.getElementsByTagName("body") gives you an empty list). And even if it had one, I'm pretty certain that jQuery's "dialogs" are built for the positioning system of HTML, not for the box model that is used in XUL. In other words - it cannot work. What you probably wanted was showing a <panel> element (see https://developer.mozilla.org/en/XUL/panel). Or maybe even a full-fetched XUL dialog window (see https://developer.mozilla.org/en/XUL/dialog and https://developer.mozilla.org/en/DOM/window.openDialog).

0
votes

But, I have the problem: I can't delete location from the title bar. Because of that I've tried to create and open an inline jQuery dialog that will hide the location in title. Do you know a better way how to do that?

Xul dialogs and prompts are customizable:

Dialogs and Prompts

Prompt Service

Prompt:

var promptService = Components.classes["@mozilla.org/embedcomp/prompt-service;1"]
.getService(Components.interfaces.nsIPromptService);

var result = promptService.confirm(null, "Title of this Dialog", "Are you sure?");

// result is now true if OK was clicked, and false if cancel was clicked

Dialog:

<dialog
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  id="myDialogId"
  title="My Dialog"
  ondialogaccept="return onOK();"
  onload="onLoad();"
  persist="screenX screenY width height"
  windowtype="myDialogWindowType">

  <script type="application/javascript" src="chrome://myext/content/mydialog.js"/>
  <grid>
    <columns><column/><column/></columns>
    <rows>
      <row align="center"><label value="Name:"/><textbox id="name"/></row>
      <row align="center"><label value="Description:"/><textbox id="description"/></row>
      <row align="center"><spacer/><checkbox id="enabled" label="Check to Enable"/></row>
    </rows>
  </grid>
</dialog>