CKEditor + Yii loaded with AJAX : $_POST doesn't contain the updated value

Question

in short:

1. i'm using Yii Framework

2. i have a one Ckeditor window on my page ( php/ yii framework - works fine)

3. when i hit a button, a new CKeditor window is being generated and shown through AJAX call

4. THE PROBLEM: this new CKEditor window correctly displays the text stored in the database BUT : when i hit "Save" (an ajax button generated together with the rest of the form) the values from this new CKeditor window will not save : CKeditor sends back the old values that it got from the database.

When i remove the Ckeditor and leave the plain <textarea> : everything is ok so i know that the controller is fine.

Please, anybody went through something like this?

Answer 1

Sounds like a typical post-AJAX JS binding issue. :) There are a few possibilities for how to fix it, depending on what is going wrong.

This post in the Yii forum should be money for you, it's where I got most of these suggestions: http://www.yiiframework.com/forum/index.php?/topic/9341-ckeditor-widget-in-a-cactiveform/

1. Use a widgetized Yii extension which has already solved this problem (NHCKEditor?)
2. Add an onClick callback to the submit button which saves the CKEditor content to the hidden 'textarea' ('onclick'=>'CKEDITOR.instances.TEXTAREA_ID.updateElement()',
3. Use jQuery to get the data from the CKEditor iFrame to use... wherever. AJAX validation, etc.

Good luck!

Answer 2

You can let CKEDITOR update the textarea before validating, and clientside/ajax validation will work as expected:

<?php $form = $this->beginWidget('CActiveForm', array(
    'enableAjaxValidation' => true,   // one or both
    'enableClientValidation' => true, // one or both
    'clientOptions' => array(
        'validateOnSubmit' => true,   // optional
        'beforeValidate' => new CJavaScriptExpression('function(form) {
            for(var instanceName in CKEDITOR.instances) { 
                CKEDITOR.instances[instanceName].updateElement();
            }
            return true;
        }'),
    ),
)); ?>