2

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?

2 Answers 2

3

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();

Sign up to request clarification or add additional context in comments.

1 Comment

You are right. Didn't notice that. Now works, thank you.
0

I test this code CKEDITOR.instances.subject.updateElement(); in my project but did not fixed my problem. In this URL i found the right answer:

 CKEDITOR.instances['editor1'].updateElement();//CKEditor  bilgileri  aktarıyor

If we add this code after event.preventDefault(); , the problem will solve completely.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.