CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Bob M
Bob M

Reputation: 411

ckeditor fails to post results when with ajax save

I have a form set up to do a dynamic save with ajax. It works great with a standard textarea but after enabling ckeditor using the ckeditor class it does not respond. The form looks like:

<div class="form-group">
  <div class="float auto clear">
    <textarea class="ckeditor saveData" name="introtext" itemid="<?php echo $id; ?>" id="editor1" ><?php echo "$introtext"; ?></textarea>
  </div>
</div>

ckeditor is the class ckeditor uses to load the editor. saveData is the class I use to initiate the javascript function to save the textarea data. The javascript:

// ckeditor textarea
$(document).on('keyup','.saveData',function()
{
  var DATA = CKEDITOR.instances.editor1.getData();
  var cleaned=remove_whitespaces(DATA);
  var ID=$(this).attr('itemid');
  if(cleaned !=''){
    var dataString = 'introtext='+ cleaned  +'&id='+ ID;
    $.ajax({
      type: "POST",
      url: "save.php",
      data: dataString,
      cache: false
    });
  }
})
// END SAVE BASE


// ordinary textarea
$(document).on('keyup','.saveData2',function()
{
  var DATA=$(this).val();
  var cleaned=remove_whitespaces(DATA);
  var ID=$(this).attr('itemid');
  if(cleaned !=''){
      var dataString = 'introtext2='+ cleaned  +'&id='+ ID;
    $.ajax({
      type: "POST",
      url: "save.php",
      data: dataString,
      cache: false
    });
  }
})

You can see the form at www.dottedi.us/ckeditor. I tried using both:

var DATA=$(this).val();

and

var DATA = CKEDITOR.instances.editor1.getData();

but neither work.

Upvotes: 0

Views: 901

Answers (1)

Manik Arora
Manik Arora

Reputation: 4792

Try using the below-

<div class="form-group">
  <div class="float auto clear">
    <textarea class="ckeditor saveData" name="introtext" itemid="<?php echo $id; ?>" id="editor1" ><?php echo "$introtext"; ?></textarea>
  </div>
</div>

// ckeditor textarea
var editor = CKEDITOR.replace('editor1');
editor.on('change', function()
{
  var DATA = this.getData();
  var cleaned=remove_whitespaces(DATA);
  var ID=$('#editor1').attr('itemid');
  if(cleaned !=''){
    var dataString = 'introtext='+ cleaned  +'&id='+ ID;
    $.ajax({
      type: "POST",
      url: "save.php",
      data: dataString,
      cache: false
    });
  }
})
// END SAVE BASE

Upvotes: 2

Related Questions