This project has moved. For the latest updates, please go here.

Does not work on firefox 3.6.3 when inside a jQueryUI dialog (does work on ie7,ie8)

Jun 19, 2010 at 5:05 PM

Below I've included a sample document where the html area is inside of a dialog and the html view does not work in firefox 3.6.3.  It does work in Ie7 and Ie8.   If you remove the call to instantiate the dialog, then the html editor works.  Does anyone have an idea how to fix this bug?

For demo.css - use the default that comes with jHtmlArea.  This sample references jHtmlArea 0.7.0.

Snippet - demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<title>jHtmlArea inside a dialog</title>
	
	<link rel="stylesheet" href="css/redmond/jquery-ui-1.8.redmond.css" type="text/css" />	
	<link rel="stylesheet" href="demo.css" type="text/css" />	
	
	<script type="text/javascript" src="src/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="src/jquery-ui-1.8.min.js"></script>
	<script type="text/javascript" src="src/jHtmlArea.js"></script>
</head>
<body>
	<script type="text/javascript">
jQuery(function(){
$('#CA27_C_share-dialog_form_tabs_body_Body').htmlarea({ toolbar: [
['html'], ['bold''italic''underline''strikethrough''|''subscript''superscript'],
['increasefontsize''decreasefontsize'],
['orderedlist''unorderedlist'],
['indent''outdent'],
['justifyleft''justifycenter''justifyright'],
['link''unlink''horizontalrule'],
[{ css: 'image', text: 'Image Gallery',
action: function (btn) {
jHtmlArea_API['#CA27_C_share-dialog_form_tabs_body_Body'] = $(this);
var gallery = window.open('/ImageGallery?jHtmlArea=CA27_C_share-dialog_form_tabs_body_Body''gallery''width=700,height=600,toolbars=0,resizable=1');
gallery.focus();
}
}],
['p''h1''h2''h3''h4''h5''h6'],
['cut''copy''paste']
]});
$('#CA27_C_share-dialog_form_tabs').tabs(); 
$('#CA27_C_share-dialog').dialog({ width: 'auto', modal: true, maxWidth: 900 });
//remove the dialog and the editor works.  
});
</script> <h1>jHtmlArea does not work in a dialog for Firefox 3.6.3 (it does work for ie7 and ie8)</h1> <div id="CA27_C_share-dialog" name="CA27_C_share-dialog" class="activity-notice-create"> <form id="CA27_C_share-dialog_form" name="CA27_C_share-dialog_form" method="post" action="http://test.nexul.com/social/stream/group/Everyone I Know/">
<input id="__EVENTTARGET" name="__EVENTTARGET" type="hidden" value="" />
<input id="__EVENTARGUMENT" name="__EVENTARGUMENT" type="hidden" value="" />
<div id="CA27_C_share-dialog_form_tabs" name="CA27_C_share-dialog_form_tabs">
<ul>
<li><a href="#tab_CA27_C_share-dialog_form_tabs_common"><span>Common</span></a></li>
<li><a href="#tab_CA27_C_share-dialog_form_tabs_body"><span>Formatted Text Body</span></a></li>
</ul>
<div id="tab_CA27_C_share-dialog_form_tabs_common">
<div id="CA27_C_share-dialog_form_tabs_common" name="CA27_C_share-dialog_form_tabs_common">
This tab is not relevant to reproduce error
</div>
</div>
<div id="tab_CA27_C_share-dialog_form_tabs_body">
This html editor does not work in firefox (when in a tab that is in a dialog)
<div id="CA27_C_share-dialog_form_tabs_body" name="CA27_C_share-dialog_form_tabs_body">
<textarea id="CA27_C_share-dialog_form_tabs_body_Body" name="CA27_C_share-dialog_form_tabs_body_Body" title="The full description of the event." style="width:690px;height:425px;"></textarea>
</div>
</div>
</div>
</form>
</div> <p> <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a> </p> </body> </html>
Sep 6, 2010 at 6:21 PM

I've got the same issue as well. When inside a jQuery Dialog in FireFox 3.6.3+, you can't actually enter text into the jHtmlArea. Currently investigating why this only impacts FF and not IE.

Sep 7, 2010 at 2:33 PM

The good(ish) news is that if you do not initialise your jHTMLArea until it the textarea is visible (and obviously its parent tag too), it works as you would expect and with no hitches.

The bad news is that this seems to be a bug in jQuery-UI - a bit of googling reveals that jHTMLArea is not the only component impacted and it's to do with a subtle difference in how FireFox seems to handle componentWindow on hidden elements. Doesn't look like a fix will be arriving in the near future!

Sep 7, 2010 at 3:30 PM

Me again. I noticed that I still had an issue when the dialog was re-opened - and because I'm using the in such a fashion that this is necessary (and I don't really want to destroy them every time), I had to attack jHTMLArea again.

So, for anyone who is having issues when opening a jQuery dialog containing a jHTMLArea for the second time:

If you call "dispose"

$('.jhtmleditor').htmlarea('dispose');

In the dialog close event AS WELL AS only calling .htmlarea() once the textarea is visible, then you should be fine - I can't post a working example at present, but will try to find a few moments to put one together.

 

Not ideal, but at least it works!

 

 

Aug 2, 2011 at 3:07 AM

Hi,

I'm having this exact problem with Firefox 5.  I am calling htmlarea('dispose') in the close event, etc, but it's not working.  Somehow, the iFrame body always still has the last text that was in there - even when I destroy it.  I'm verifying that the elements are gone using Firebug.  Somewhere it's saving that value in a variable and bringing it back, and I would love to know where to hack in to manually clear out that variable.