How to ajax-submit a textarea form from CKEditor?

Question

I use CKEditor, jQuery and jQuery form plugin , and I would like to submit the contents of the CkEditor form using an Ajax request. Here is my code:

<form id="article-form" name="article-form" method="post" action="/myproject/save"> <textarea name="bodyText" style="visibility: hidden; display: none;"></textarea> <script type="text/javascript"> CKEDITOR.replace('bodyText'); </script> <a onClick="$("#article-form").ajaxSubmit();">Submit</a> </form> 

Unfortunately, it seems that the Ajax request does not pass the bodyText parameter;

What have I done wrong or how can I achieve what I need?

Thank.

Answer 1

you need to call the following first so that CKEDITOR updates the related fields.

 for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); 

So

HTML

 <a onClick="CKupdate();$('#article-form').ajaxSubmit();">Submit</a> 

and javascript

 function CKupdate(){ for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); } 

Answer 2

This works best for me: beforeSerialize callback

 $('form#description').ajaxForm({ beforeSerialize:function($Form, options){ /* Before serialize */ for ( instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); } return true; }, // other options }); 

Answer 3

If you use the jQuery plugin , you can use the beforeSubmit option for a more elegant solution:

 $("#form").ajaxForm({ beforeSubmit: function() { /* Before submit */ for ( instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); } }, // ... other options }); 

Answer 4

In my case, the following helped me: I just use these two lines before I archive the form.

  for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); var data = $('#myForm').serializeArray(); 

Answer 5

I tried something like this:

First I had to put id = "#myForm" in @ Html.BeginForm after that, I put them in my part of the scripts, where I use the script:

 <script type="text/javascript"> $(document).ready(function CKupdate() { $('#myForm').ajaxForm(function () { for (instance in CKEDITOR.instances) { CKEDITOR.instances[instance].updateElement(); } }); }); </script> 

and then I did something like this =] for my submit button, and it works fine for me, no more pressing the submit button twice =]

 <button type="submit" id="submitButton" onclick="CKupdate();$('#myForm').ajaxSubmit();">Submit</button> 

Answer 6

I just did it like this:

 $('#MyTextArea').closest('form').submit(CKupdate); function CKupdate() { for (instance in CKEDITOR.instances) CKEDITOR.instances[instance].updateElement(); return true; }