How to ajax-submit a form textarea input from CKEditor?

Question

I am using CKEditor, jQuery and jQuery form plugin and I would like to submit contents of the CkEditor form via an Ajax query. 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 did I do wrong or how can I achieve what I need?

Thank you.

Phocis

by itself it is not needed to hide the textarea, CKEDITOR will take care of that. In case CKEDITOR is not loading, than the user still gets an input field. – Krenek

Answer 1

you need to first call the following, to make the CKEDITORs update their 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();
}

Carlenacarlene

Thank you. Where do I need to place this call : before CKEDITOR.replace or before ajaxSubmit() ? – Phocis

Ok. It works when placed before ajaxSubmit(). Thank you very much – Phocis

@fabien, i believe your CKEDITOR.replace should have as parameter the name of the textarea and not the ID of the form .. so it should be CKEDITOR.replace('bodyText') – Carlenacarlene

after loading editor by replace, you may add this line >>> CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances.textAreaClientId.updateElement();}); – Clemente

Answer 2

This works for me best: beforeSerialize callback

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

Redbird

This is correct. You need to do it beforeSerialize because otherwise the data you are updating using updateElement() isn't going to be updated until the next time you try to serialize the data. – Sumerology

Thanks a lot!! Only this works for me and i agree with #stormlifter – Elinorelinore

Answer 3

If you use the jQuery form 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
});

Harding

Answer 4

In my case the following helped me,i just use these two lines before seializing the form.

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

  var data = $('#myForm').serializeArray();

Zosi

Answer 5

I tried something like this:

First I had to put an id = "#myForm" on @Html.BeginForm afterwards, I put these in my scripts part where in 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 twice =]

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

Vair

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;
        }

Filings