Cannot Insert php data with CKEDITOR via ajax

Question

I have include the CKEDITOR (html editor) in order to manipulate the text in the textarea. I tried only with php (without ajax) and the data are inserted succesfully to the database.
The problem is, when i use ajax, cannot retrieve the data from textarea. More specific all the data inserts in the database except the data from textarea with the CKEDITOR included.

Here what i tried so far:

HTML

<form id='editClass' enctype="multipart/form-data">
  <label for="title"><div class='category_title theTitle'><p>Title</p></div>
  <textarea id='title' name='title' placeholder="Enter your title"></textarea>
</label>
<label for="subject"><div class='category_title theSubject'><p>Subject</p></div>
  <textarea id='subject' name='subject' placeholder="Enter your subject"></textarea> <!-- THE TEXTAREA THAT I HAVE INCLUDE THE CKEDITOR -->
</label>
  <br>
<label for='articlePicture'><div class='category_title thePicture'><p>Upload picture</p></div>
  <input type='file' id='articlePicture' name='articlePicture'>
</label>
<label for='articleVideo'><div class='category_title theVideo'><p>Upload video</p></div>
  <input type='file' id='articleVideo' name='articleVideo'>
</label>
  <br>
  <label for="category"><div class='category_title theCategory'><p>Category</p></div>
  <select id='category' name='category'>
    <option value=''>Choose category</option>
    <option value='literature'>Literature</option>
    <option value='poetry'>Poetry</option>
    <option value='music'>Music</option>
    <option value='cinema'>Cinema</option>
    <option value='beauty'>Beauty</option>
  </select>
</label>
<p>must read</p><input type='checkbox' value='true' id='must' name='must'>
  <input type='hidden' id='articleDate' name='articleDate' value="<?php echo date('Y-m-d H:i:s'); ?>">
  <input type='hidden' id='postArticle' name='postArticle' value='create'>
  <button type='submit' id='post_btn' name='post_btn'>Post article</button>
</form>

<script>
CKEDITOR.replace('subject');
</script>

AJAX

I use the FormData object in order to include files also.

$("#editClass").on('submit', function(e) {
  e.preventDefault();
  var form_data = new FormData(this);

  $.ajax({
    url: '../controls/handlers.php',
    type: 'POST',
    data: form_data,
    datatype: "text",
    contentType: false,
    cache: false,
    processData: false,
    beforeSend: function() {
      $("#post_btn").attr("disabled", true);
      $("#post_btn").html("Please wait...");
    },
    success: function(response) {
      alert(response);
      window.location.href = 'blog_oop_index.php';
      $("#post_btn").attr("disabled", false);
      $("#post_btn").html("Post");
    }
  });
});

PHP

if(input::get('postArticle') == 'create') {

  $validate = new validate();
  $validation = $validate->check($_POST, $items = array(
    'title' => array(
      'required' => true,
      'min' => 5,
      'max' => 300
    ),

    'category' => array(
      'required' => true
    )
  ));
if(!$validate->isPassed()) {
  foreach ($validate->errors() as $error) {
    echo $error;
  }
}
  // new version
  if($validate->isPassed()) {
    $files = new files();
    $session_username = $_SESSION['username'];
    $picture = $_FILES['articlePicture'];
    $video = $_FILES['articleVideo'];
    if(empty($picture['name'])) {
      $picture_location = null;
    }
    if(empty($video['name'])) {
      $video_location = null;
    }
    if(!empty($picture['name'])) {
      $files->checkPicture($picture);
      if(!$files->isPassed()) {
        // error picture
        foreach($files->getError() as $error) {
          echo "<p>$error</p>";
        }
      } elseif($files->isPassed()) {
        $picture_name = $picture['name'];
        $picture_tmp = $picture['tmp_name'];
        $picture_explode = explode('.', $picture_name);
        $picture_extension = strtolower(end($picture_explode));
        $random_picture_name = $session_username.rand(0, 9999).rand(0, 9999).'.'.$picture_extension;
        $picture_location = "../media/articlesImages/".$random_picture_name;
        move_uploaded_file($picture_tmp, $picture_location);
      }
    }
    if(!empty($video['name'])) {
      $files->checkVideo($video);
      if(!$files->isPassed()) {
        // error video
        foreach($files->getError() as $error) {
          echo "<p>$error</p>";
        }
      } elseif($files->isPassed()) {
        $video_name = $video['name'];
        $video_tmp = $video['tmp_name'];
        $video_explode = explode('.', $video_name);
        $video_extension = strtolower(end($video_explode));
        $random_video_name = $session_username.rand(0, 9999).rand(0,9999).'.'.$video_extension;
        $video_location = "../media/articlesVideosImages/".$random_video_name;
        move_uploaded_file($video_tmp, $video_location);
      }
    }
    if(input::get('must') == 'true') {
      $must = 'true';
    } else {
      $must = 'false';
    }
    //insert article

    $article = new articles();
    $article->create('articles', array(
      'title' => input::get('title'),
      'subject' => input::get('subject'),
      'articlePicture' => $picture_location,
      'articleDate' => input::get('articleDate'),
      'category' => input::get('category'),
      'articleVideo' => $video_location,
      'commentsCount' => 0,
      'must_read' => $must
    ));

  }
}

Of course any of these classes that you've seen above such input, articles, validate, works perfect.
So, PHP works fine i think, the problem with CKEDITOR is in ajax. Any ideas?

csb csb · Accepted Answer · 2018-04-06T01:07:14

I believe when you call e.preventDefault();, you prevent CKEditor from automatically updating the contents of the <textarea />.

As quoted from this page:

Please note that the replaced <textarea> element is updated automatically by CKEditor straight before submission. If you need to access the <textarea> value programatically with JavaScript (e.g. in the onsubmit handler to validate the entered data), there is a chance that the <textarea> element would still store the original data. In order to update the value of replaced <textarea> use the editor.updateElement() method.

You'll need to call:

CKEDITOR.instances.subject.updateElement();

after e.preventDefault();

Cannot Insert php data with CKEDITOR via ajax

2 Answers