Problema invio dati da form via jQuery ajax con TinyMCE Editor

Questo articolo nasce come guida per aggirare il problema di TinyMCE editor nell’invio dei dati via POST con ajax non passando di fatto la variabile. Vediamo come risolvere il problema.

Il Problema : Ajax su TinyMCE

Durante l’uso del noto editor TinyMCE in una textarea quest’ultima non passa il valore della variabile tramite POST usando jQuery Ajax sul form in cui è presente l’editor. Questo articolo vi sarà utile se avete questo tipo di problema e non volete cambiare uno dei migliori editor web in assoluto.

Come risoleverlo. Step1: Programmazione dei JS

Dopo aver incluso come sempre le librerie jQuery ecco il codice corretto per far andare il vostro editor:

<script>
$(document).ready(function(){

$("#add-form").click(function(){

//al click sul form di invio ajax elimino il controllo tinymce
tinyMCE.execCommand('mceRemoveControl', false, 'descrizione_cat');

//esegui l'invio dei dati
var targetweb= $("#targetweb").val();
var targetweb_mito = $("#targetweb_mito ").val();
$.ajax({
type: "POST",
url: "classes/add.php",
data: "targetweb_mito =" + targetweb_mito + "&targetweb=" + targetweb,
dataType: "html",
success: function(msg)
{

//se tutto va a buon fine rimetto il controllo editor TinyMCE
tinyMCE.execCommand('mceAddControl', false, 'targetweb');

//e faccio apparire il messaggio di aggiunta
$("#risultato").html(msg).delay(2000).fadeOut();

},
error: function()
{
alert("Chiamata fallita, si prega di riprovare...");
}
});

}); //add form 

});
</script>

<script type="text/javascript" src="plugins/editor/tinymce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "none", //non lo faccio caricare al load
theme : "advanced"

...

});

</script>
<!-- /TinyMCE -->

Ecco alcune precisazioni:

– grazie al mode:”none” di TinyMCE disabilito il supporto alle textareas durante il caricamento della pagina.

– Quando clicco per inviare i dati via POST con Ajax prima disabilito il supporto TinyMCE per evitare il conflitto, dopodichè elaboro l’invio dati come siamo abituati. In questo modo le variabili vengono passate correttamente.

– In caso di invio  con successo, riabilito il supporto alle textareas di MCE.

Risultato: l’utente non si accorge di nulla e funziona tutto perfettamente ;).

Step2. Programmazione del form

Ecco cosa modificare invece nel vostro html:

<form  id="add-cat">

<div id="risultato"></div>

<p class="title">Titolo </p>
<input type="text" name="targetweb_mito" id="targetweb_mito" placeholder="Inserisci titolo" style=" width:99%;" required />

<p class="desc">Descrizione </p>
<textarea name="targetweb"  id="targetweb" rows="15" cols="80" style="width:90%;"></textarea>

<!-- Aggiungo il supporto all'editor nel load-->
<script>tinyMCE.execCommand('mceAddControl', false, 'targetweb');</script>

<input type="button" id="add-form" value="Salva">

</form>

Come vedete mi è bastato inserire nuovamente il supporto di TinyMCE (disattivato in precedenza al document.ready della pagina) alla mia textarea con la funzione mceAddControl. In questo modo l’utente non si accorge di nulla e i dati vengono passati via POST correttamente.

Ecco fatto, potete continuare ad usare il vostro editor TinyMCE senza problemi, con funzionalità ajax nei vostri form!!

Ti è piaciuto questo articolo? fammi sapere cosa ne pensi nei commenti o sui social network! Enjoy!