0

here's the sample code (fully working - just copy to an empty html file and it will work):

<html>
<head>
<title></title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript" language="javascript">
    function Init()
    {
        var doc = document.getElementById("iView").contentWindow.document;

        doc.designMode = "On"

        doc.open()
        doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
        doc.close();
    }
</script>
</head>
<body>

<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey">
    <iframe id="iView" style="width: 200px; height:70px" frameborder="0"></iframe>
</div>

<script type="text/javascript">

    var dlg = null;
    jQuery(document).ready(function() {

        Init();

        dlg = jQuery("#dlgDiv").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            width: 400
        })

        dlg.dialog('open');
    })

</script>
</body>
</html>

Now, when I run this in IE, I can edit contents of iframe; also using IE Developer Toolbar I can see that body of iframe preserves class "some-class" I specified. But, when running this in FF, iframe is not editable, and when inspecting its DOM with firebug, i see that iframe's body is empty and has no class. So looks like for FF dialog makes a shallow copy of the div instead of using the div itself (dlgDiv) for dialog, or something like that...

Basically that means that NONE of javasript based rich text editors would work in a jQuery dialog in FF (and btw Google Chrome as well) - thats a big bad issue (I have tried two so far and that's how I started looking into this issue)!

Any ideas/comments/suggestions on how I could approach this, are highly appreciated!

Thank you, Andrey

Andrey
  • 20,487
  • 26
  • 108
  • 176
  • I have tracked it down to a particular line in jquery-ui that causes the problem: line 7173 in juqey-ui (v 1.7.2) where the div is being added to the dialog: var uiDialogContent = this.element .show() .removeAttr('title') .addClass( 'ui-dialog-content ' + 'ui-widget-content') .appendTo(uiDialog) The last line (.appendTo) for some reason trims the class off the body of the iframe, and it only does that in FF/Chrome/Opera but works fine in IE. Any suggestions? – Andrey Nov 19 '09 at 17:50

1 Answers1

0

the init should be after the open

var dlg = null;
jQuery(document).ready(function() {



    dlg = jQuery("#dlgDiv").dialog({
            autoOpen: false,
            bgiframe: true,
            modal: true,
            width: 400
    })

    dlg.dialog('open');

    Init();
})
honsali
  • 16
  • 1