CKEditor disappears after second ajax load

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: hi开发者_开发知识库dden; "></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.

---

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();
}

---

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);
   });
});

---

I'm guessing that you're trying to populate the same instance of ckeditor with different content, correct?

If so, then there are other methods to change that content. Trying to create an additional instance will cause you problems.

http://ckeditor.com/blog/CKEditor_for_jQuery

Scroll down to 'Code interaction with editor instances'

---

The correct way is like this:

jQuery.each(CKEDITOR.instances, function(){
     eval("CKEDITOR.instances."+this.name+".destroy(true)");
});