Question

I am using:

FireFox 4.0
jquery 1.5.1
jquery UI 1.8.13
HTMLBox 4.0.3

My javascript looks like the following:

$(document).ready(function() {
var box;
box = $("#EmailContent").htmlbox({
    about: false,
    idir: "/pics/",
    toolbars: [
     ["cut", "copy", "paste", "separator", "bold", "italic", "underline", "strike", "sub", "sup", "separator",
     "left", "center", "right", "justify", "separator", "ol", "ul", "indent", "outdent", "separator", "link", "unlink", "image"],
     ["code", "removeformat", "striptags", "separator", "quote", "paragraph", "hr"]]
});

$(":button").not("#save").click(function() {
    var myClass = $(this).attr("class");
    box.set_text($("div.body." + myClass).html());

    //change the title of our modal dialog
    $("#edit").dialog("option", "title", ("Edit "));

    var my_buttons = {};
    my_buttons["Save"] = function() {
        saveInventory();
    };

    my_buttons["Cancel"] = function() {
        $('#edit').dialog("close");
    };        

    $('#edit').dialog({
        buttons: my_buttons
    });

    $("#edit").dialog("open");

});

$('#edit').dialog({
    autoOpen: false,
    height: 450,
    width: 700,
    modal: true
}); //end dialog box    
});

Before I add in all the jQuery dialog(basically everything from where I change the title of the modal), the above code generates an HTMLBox and it works correctly… I can interact with the HTMLBox.

However, upon adding in the dialog code, HTMLBox breaks. The textarea for the HTML box does not allow focus.

In comparing the working and non-working using Firebug, I found one difference. The working copy has the following in the tag generated by HTMLBox:

<link rel="stylesheet" href="data:text/css,body%7Bmargin%3A3px%3Bfont-family%3Averdana%3Bfont-size%3A11px%3B%7Dp%7Bmargin%3A0px%3B%7Dbody%7Bbackground%3Awhite%3B%7Dbody%7Bbackground-image%3Aurl%28/pics/logo.gif%29%3Bbackground-position%3Atop%20right%3Bbackground-repeat%3Ano-repeat%3B%7D">

Anyone have any idea on how I might fix this?

A search here popped up a potential Firefox issue with textarea and modal dialogs:
FireFox textarea issue in modal dialog

Answer 1

After a bunch of research and experimenting, I solved my problem.

Apparently Firefox 4.0 doesn’t play nice with iFrames within a jQuery UI Dialog.

The fix is to move where and how the HtmlBox is initialized. Instead of the above, I changed it to the following:

$(document).ready(function() {
var box;
var myClass;


$(":button").not("#save").click(function() {
    myClass = $(this).attr("class");
    $("#class").html(myClass);
    $("#EmailTo").val($("div.to." + myClass).html());
    $("#EmailSubject").val($("div.subject." + myClass).html());

    //change the title of our modal dialog
    $("#edit").dialog("option", "title", ("Edit "));

    var my_buttons = {};
    my_buttons["Save"] = function() {
        if saveEmail() {
            $('#edit').dialog("close");
        }
    };

    my_buttons["Cancel"] = function() {
        $('#edit').dialog("close");
    };

    $('#edit').dialog({
        buttons: my_buttons
    });

    $("#edit").dialog("open");
});

$('#edit').dialog({
    autoOpen: false,
    height: 450,
    width: 700,
    modal: true,
    open: function(event, ui) {
        if (box == null) {
            box = $("#EmailContent").htmlbox({
                about: false,
                idir: "/pics/",
                css: "body{font-family:verada;font-size:11px;}",
                toolbars: [
                     ["cut", "copy", "paste", "separator", "bold", "italic", "underline", "strike", "sub", "sup", "separator",
                     "left", "center", "right", "justify", "separator", "ol", "ul", "indent", "outdent", "separator", "link", "unlink", "image"],
                     ["code", "removeformat", "striptags", "separator", "quote", "paragraph", "hr"]]
            });
        }

        box.set_text($("div.body." + myClass).html());
    }
}); //end dialog box

For some reason, putting the initialize code for HtmlBox in the open event of the jQuery UI Dialog, it works. However, I found that I needed to check if the box variable was null otherwise I would get a LOT of editors.

To expand this generically for iFrame plugins, I believe one should put the initialization for the iFrame based plugin into the open event of the jQuery UI Dialog