I'm using CKEditor with jQuery 1.4.2. The page I'm trying to build dynamically loads one of two forms based on the user's selection of a radio button. I've noticed a bug though when the user "toggles" back-and-forth between two forms. The first two clicks function properly and the $('textarea.editor').ckeditor(); statement runs just fine. However after that the textarea completely disappears on subsequent clicks.
To recreate (at least in FireFox 3.6.3):
1. Create TWO different HTML forms each with a <textarea> that you'll use for the CKEditor (make each form unique enough to be different interfaces). Name them "formA.html" and "formB.html".
2. Create this page:
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Form Tester</title> <link rel="stylesheet" href="/js/ui/jquery.ui.all.css" type="text/css" /> <script language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script language="JavaScript" src="/js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script> <script type="text/javascript" src="/js/ckeditor/ckeditor.js"></script> <script type="text/javascript" src="/js/ckeditor/adapters/jquery.js"></script> </head> <body> <input type="radio" name="FormType" id="FormType" value="FormA" />Form A <input type="radio" name="FormType" id="FormType" value="FormB" />Form B <div id="FormViewer"></div> <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ $(function() { $('#FormViewer').hide(); //Event handler for the item type radio buttons //This will dynamically load the appropriate form interface //depending on the radio button clicked. $("input[name^='FormType']").click(function(){ $('#FormViewer').hide('slow').html(''); var ItemType =$(this).attr('value'); var pageLoad; if(ItemType=='FormA'){ pageLoad = 'formA.html'; }else{ pageLoad = 'formB.html' } $('#FormViewer').load(pageLoad,function(){ $('textarea.editor').ckeditor(); }).fadeIn("slow"); }); }); /*]]>*/ </script> </body> </html>3.
Load the page in your browser. Click on the FormA radio button and then FormB and finally swap back to FormA. Initial click of FormA has the form display just fine, click FormB and the form is fine again. However the third (and subsequent clicks) to FormA/FormB and the CKEditor disappears entirely (at least it does for me).
Normally this issue would not come up as you'd not want a user to "hot swap" between entry forms so it's a minor glitch. For example I would disable the swap triggering button(s) (or hide them outright until needed again) as soon as a form is chosen. But it's a behavior I've seen and I thought I should make the developers aware of (I'm too new to javascript/jQuery to hunt it down on my own).
I'm sure I'll read more and find out that I need to use a .destroy() or something?
Edit: just found that if you click on a radio button 2x in a row the behavior will show as well.
Re: CKEditor disappears when using AJAX form loads.
Re: CKEditor disappears when using AJAX form loads.
Learn to bind events using jQuery's .live() function.
Thanks,
Zanpakutō