CKedit data not recognize in PHP validation Codeigniter

Question

First of all I dont really now how to explain this but its sounds complicated to me. It makes my brain broken and I really dont know if there`s somebody that can help me to my problem with CKeditor.

My Controller Codes:

      public function reply_topic()
    {
        $this->load->helper('form');
        $this->load->library('form_validation');

        $this->form_validation->set_rules('comment', 'Comment Field Required', 'required');
        //$this->form_validation->set_rules('g-recaptcha-response', 'recaptcha validation', 'required|callback_validate_captcha');
        //$this->form_validation->set_message('validate_captcha', 'Please check the the captcha form');

        if ($this->form_validation->run() == FALSE)
        {
            $this->load_reply_to_topic_view($this->input->post('topic_id'));
        }
        else
        {
            $topic_id = $this->input->post('topic_id');
            $this->topic_model->postReplyTopic();
            echo '<div class="alert alert-success">'.lang_key('reply_submited').'</div>';
            $this->load_reply_to_topic_view($topic_id='');
        }
    }

This codes does not have a problem to begin with its working fine. But when I trying to submit the data it always come up with an error. Like the comment field is empty even though I already imputed a data to comment section - this error will come up if I am using a CKeditor. But if I only use ordinary textarea its really working fine.

<!-- Javascript -->
<script type="text/javascript">
CKEDITOR.replace( 'comment' );
</script>

And here is the code where the comment section appeared

<script type="text/javascript">
var loadUrl = '<?php echo base_url("threads/load_reply_to_topic_view/".$item['id']);?>';
    jQuery.post(
        loadUrl,
        {},
        function(responseText){
            jQuery('.reply-topic-form-holder').html(responseText);
            init_reply_topic_js();
        }
    );



function init_reply_topic_js()
{
    jQuery('#replytopic-form').submit(function(e){
            var data = jQuery(this).serializeArray();
            jQuery('.topic-loading').show();
            e.preventDefault();
            var loadUrl = jQuery(this).attr('action');
            jQuery.post(
                loadUrl,
                data,
                function(responseText){
                    jQuery('.reply-topic-form-holder').html(responseText);
                    jQuery('.alert-success').each(function(){
                        jQuery('#replytopic-form textarea').each(function(){
                            jQuery(this).val('');
                        });
                    });

                    jQuery('.topic-loading').hide();
                    init_reply_topic_js();
                }
            );
        });
}
</script>

Answer 1

CK doesn't actually make use of the textarea field, it is just a 'placeholder' for it so to speak. So you have to make sure that the data in CK gets added to the textarea or you will get no data for that field when you post it via AJAX. When posting normally this is not a problem due to autoUpdateElement.

Before var data = jQuery(this).serializeArray(); add CKEDITOR.instances.comment.updateElement();. This will ensure that the internal markup of CK editor gets added to the textarea so it will populate the field before serializing the array.

Documentation on the method here.

jQuery('#replytopic-form').submit(function (e) {
    CKEDITOR.instances.comment.updateElement();
    var data = jQuery(this).serializeArray();
    jQuery('.topic-loading').show();
    e.preventDefault();
    var loadUrl = jQuery(this).attr('action');
    jQuery.post(
            loadUrl,
            data,
            function (responseText) {
                jQuery('.reply-topic-form-holder').html(responseText);
                jQuery('.alert-success').each(function () {
                    jQuery('#replytopic-form textarea').each(function () {
                        jQuery(this).val('');
                    });
                });
                jQuery('.topic-loading').hide();
                init_reply_topic_js();
            }
    );
});