CKEditor disappears after second ajax load

Question

I'm getting this code via ajax:

<script>
$(function(){
$('#responseContent').ckeditor();
});
</script>
<textarea id='responseContent'></textarea>

It successfully generates a CKEditor pane for beautiful text editing.

When this same piece of code is called a second time, I get a blank area. Oddly, when I do an "inspect element" on where the textarea/ckeditor should be, it says:

<textarea id="responseContent" style="visibility: hidden; "></textarea>

So, being the professional hack that I am, I jQuery'd it so be visibility:visible. The CSS stuck but the results didn't look any different.

How do you make ckeditor work... all the time... with ajax generated data?

EDIT: Just to be clear, I don't believe this is a CSS issue. I believe it's a jquery/ckeditor issue.

Answer 1

Found answer here: CKEditor instance already exists

if(CKEDITOR.instances[editorName]) {
delete CKEDITOR.instances[editorName];
CKEDITOR.replace(editorName);
}

One thing that I wasn't sure of (being a ckeditor noob) was the "editorName". This is the ID of the element that it is created on. I believe it could be the classname as well, if you used that to create it.

So, in my example in the original question:

<script>
    $(function(){
    $('#responseContent').ckeditor();
});
</script>
<textarea id='responseContent'></textarea>

I would fix it like this:

if(CKEDITOR.instances["responseContent"]) {
    delete CKEDITOR.instances["responseContent"];
    // I replaced this step
    // CKEDITOR.replace("responseContent");
    // With this:
    $('#responseContent').ckeditor();
}

Answer 2

This script can help you with ajax loaded textareas with '.ckeditor' class:

$('#edytuj_promocje').load('your_php_file_with_ckeditor_textarea.php', function(){

   $.each(CKEDITOR.instances, function(){
     eval("CKEDITOR.instances."+this.name+".destroy(true)");
   });
   $('.ckeditor').each( function(){ 
    CKEDITOR.replace(this);
   });
});