CODEWITHSUNDEEP
ckeditor
John Kjøller
John Kjøller

Reputation: 87

CKEditor and Ajax - not updating on second instance

Im having trouble getting my CKEditor to work properly.

I am inserting my instance using Jquery. And set up my own Ajax save function for the editor.

My instances are always inserted just fine. The editor appears as it should, - and seem to work. HOWEVER: it turns out that the 2. time I insert the instance, - the textarea is not being updated - thus no updated data sent to the Ajaxcall. It sends the old data.

After sending to the ajax call, I destroy my instance: CKEDITOR.instances[currentInstance].destroy(); And the editor seem to be destroyed properly, every time. OnClick I then re-insert the editor (Same instancename. I also remove the textarea when I destroy the instance, and then reinsert the textarea, when I reinsert the instance. Same textareaname).

Can anyone tell me why I can insert the instance again and again, - but the editor only updates the textarea the first time?

Ive tried:

for ( var instance in CKEDITOR.instances ) {
            CKEDITOR.instances[instance].updateElement(); }

inserted in the save function - just before the ajaxcall. But still no update.

This is the build of the instance. Via Jquery I insert this as html() :

<script type="text/javascript">
    CKEDITOR.replace('tekstindhold233',
    { height:'250px',width:'575px' });
</script>

And heres the savefunction:

CKEDITOR.plugins.add('popwebsave',
{
init: function(editor)
{
var pluginName = 'popwebsave';


editor.addCommand( pluginName,
{
exec : function( editor )
{

for ( var i in CKEDITOR.instances ){
   var currentInstance = i;
   break;
}
for ( var instance in CKEDITOR.instances ) {
            CKEDITOR.instances[instance].updateElement(); }

var sprog = $('#lan_holder').text();
var vis = $('#vis_holder').text();
var pageId = $('#pageId_holder').text();
var tekstIndhold = CKEDITOR.instances[currentInstance].getData();
var tekstIndholdBox = currentInstance.replace('tekstindhold','');
var contentOrden = $('#content_orden' + tekstIndholdBox).text();
var dataString = 'lan=' + sprog + '&tekstindhold=' + tekstIndhold + '&eid=' + tekstIndholdBox + '&vis=' + vis + '&id=' + pageId + '&contentOrden=' + contentOrden;

$("#tekstindhold_box" + tekstIndholdBox).animate({ 
    opacity: 0  
        } , { 
    duration: 500,  
    complete: function() {
    $("#textarea_box" + tekstIndholdBox).text('');

$.ajax({
type: "POST",
url: "includes/JQ_opdater_tekst.php",
data: dataString,
dataType: "json",
cache: false,
success: function(databack){  
$("#textarea_box" + tekstIndholdBox).animate({
        height: 100
      }, 500, function() {
        $("#tekstindhold_box" + tekstIndholdBox).html(databack.tekstindhold_db);
        $("#tekstindhold_box" + tekstIndholdBox).animate({
        opacity: 1
      }, 500, function() {

CKEDITOR.instances[currentInstance].destroy();

        });
});

    }

});


        }
    });

},
canUndo : true
});

/*
editor.addCommand(pluginName, 
new CKEDITOR.dialogCommand(pluginName)

);
*/

editor.ui.addButton('Popwebsave',
{
label: 'Gem',
command: pluginName,
className : 'cke_button_save'
});
}
});

Upvotes: 1

Views: 1509

Answers (1)

John Kj&#248;ller
John Kj&#248;ller

Reputation: 87

Nevermind! I figured it out. Turns out that the instance needs to be present in the DOM, on destroy() I switched the order of events around so that destroy() happens first, and THEN removed the textarea. Works just fine now.

Upvotes: 1

Related Questions