CKEditor not working after Ajax call

1
votes

I'm using CKEditor as a wysiwyg editor. My page has some form elements on them which are loaded through an Ajax call. When i fill in all the data including the wysiwyg editor and then hit the Save button nothing is saved. The submitting is also done through an Ajax call.

Nothing is saved because CKEditor isn't updating the original textarea properly. I found an answer that said to do the following before the submit:

for(var instanceName in CKEDITOR.instances) {
    console.log(instanceName);
    CKEDITOR.instances['element[1][content]'].updateElement();
}

This is triggered everytime before i submit my form. But this code still doesn't update the real textarea with the content that the CKEditor has...

Anyone any idea how i can solve this problem?

I'm using the latest CKEditor (3.6.5, released on 10 October 2012).

Edit

Just noticed through the console of Firefox that updateElement() is undefined when i run the following command:

CKEDITOR.instances['element[1][content]'].updateElement();

But when i run this, then it does return an object:

CKEDITOR.instances['element[1][content]'];
3
ckeditor

3 Answers

1
votes

Your first code is bad. Why do you use a loop when you call the method on the same object? This one is better:

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

If something's still wrong, please share the code that you use for creating editors. Perhaps your textareas are incorrectly associated with editor instances.

1
votes

There is alternate solution, where you can add data in ckeditor without edit value of instance.

e.g.

in Script part in View:

<script>
$(function(){
    $("#editBasic").click(function(){
        url = "<?=$this->webroot?>derivedItineraries/getDetail/<?=$derived_itinerary_id?>";
        var div = '#basic_detail';
        var data = {id: 1};
        callajax(url, data, $(div));
        return false;
    });
});
</script>

In Ajax Calling function:

function callajax2(url, data, divname){
$.ajax({
        type : 'POST',
        url : url,
        dataType : 'text',
        data: data,

        success: function(data) {
            divname.text('');
            divname.append(data);
            divname.show(500);
            if (data.error === true)
                 divname.show(500);
        }
});
return false;

}

In Controller Page:

public function getDetail($id = null) {
    $this->request->onlyAllow('ajax');
       $this->viewClass = 'Json';

       $this->loadModel('Destination');

        $this->DerivedItinerary->recursive = -1;
        $derivedItineraries = $this->DerivedItinerary->findById($id);

        $destination_covered = $this->destination_covered($id);
        $destinations = $this->Destination->find('list');

        $arrData=array(
            'itinerary'=>$derivedItineraries,
            'destination_covered' => $destination_covered,
            'destinations' => $destinations
        );
        $this->set('data', $arrData);
        $this->render('derived_basic', 'ajax'); 
}

There should be file in View, named "ControllerName"/json/derived_basic.ctp

file content in "derived_itineraries/json/derived_basic.ctp":

<?php
 echo $this->Html->script('/ckeditor/ckeditor', false);
  echo $this->Form->create();
  echo $this->Form->input('inclusion', array('type'=>'textarea', 'class'=>'ckeditor', 'required'=>'true', 'div'=>'required', 'style'=>'width:200px;', 'value'=> "Test data"))."      </td></tr>";
  echo $this->Form->end();
 ?>

Try it.

0
votes

You can use done() and then() methods after ajax

$.ajax({
    type: "POST",
    url: url
}).done(function(data){
     $('#content').html(data);
}).then(function(){
     //create ckeditor
});