web-dev-qa-db-fra.com

Comment ajax-soumettre une entrée de zone de texte de formulaire à partir de CKEditor?

J'utilise CKEditor, jQuery et plugin de formulaire jQuery et je voudrais soumettre le contenu du formulaire CkEditor via une requête Ajax. Voici mon 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>

Malheureusement, il semble que la requête Ajax ne passe pas le paramètre bodyText;

Qu'est-ce que j'ai fait de mal ou comment puis-je obtenir ce dont j'ai besoin?

Merci.

javascriptjqueryckeditorformsjquery-forms-plugin
50
fabien7474

vous devez d'abord appeler ce qui suit, pour que les CKEDITOR mettent à jour leurs champs associés.

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

alors

HTML

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

et javascript

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

Cela fonctionne le mieux pour moi: callback beforeSerialize

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

Si vous utilisez plugin de formulaire jQuery , vous pouvez utiliser l'option beforeSubmit pour une solution plus élégante:

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

  // ... other options
});
8
Crewone

Dans mon cas, ce qui suit m'a aidé, j'utilise simplement ces deux lignes avant de saisir le formulaire.

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

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

J'ai essayé quelque chose comme ça:

J'ai d'abord dû mettre un id = "#myForm" sur @ Html.BeginForm ensuite, je les ai mis dans ma partie scripts où j'utilise le script:

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

puis j'ai fait quelque chose comme ceci =] pour mon bouton d'envoi et cela fonctionne très bien pour moi, plus besoin d'appuyer deux fois sur le bouton Soumettre =]

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

Je l'ai juste fait comme ça:

$('#MyTextArea').closest('form').submit(CKupdate);

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