Why TinyMCE doesn't detect changes in text when the content is posted through jQuery?

Question

I'm using TinyMCE in my website to edit a text area and post the content to the database. However, the problem I experience is that when I press the Submit button of the form and post the content (through ajax - jQuery) to a PHP file, in many cases the text posted is equal to null (i.e. the changes in the TinyMCE textarea are not detected).

Here is my code for the form with TinyMCE associated to the class "richArea"

<form id="uploadMixedBoxForm" method="post" action="'.$websiteURL.'/resources/changeText.php">
<p><strong>'._("Text:").'</strong></p>
<textarea name="mixTextAdd" class="richArea"></textarea>
<input type="submit" class="nicerButton" value="'._("Submit").'" />
</form>

And here is the PHP file that receives the data

<?php

if (!isset($_POST[mixTextAdd]) or $_POST[mixTextAdd] == "") { 
echo '<div class="error"><i class="icon-thumbs-down icon-2x"></i> '._("No text content.").'</div>';
exit;
}

addToDatabase(mixTextAdd);

?>

The PHP file that receives the data from the form has a simple control that, if the content of the textarea is null, outputs an error. The behavior is that when I type text in the tinymce area and I press submit, I always receive the error telling that the text is missing, however, if I press submit a second time, the text is detected and thus no error appears. This happens always, sistematically. If I disable the post through jQuery and simply post to a second page without using ajax, everything works fine.

I read that the fact that TinyMCE doens't detect changes of text might be due to performance issues linked to the control the undo function, however in my case when I type text, an undo level is activated (i.e. the undo button becomes active, hence the change of text is detected by TinyMCE).

Clart Tent Clart Tent · Accepted Answer · 2013-10-24T09:29:30

To access the content of the tinyMCE editor in JavaScript you need to use

tinyMCE.get('mixTextAdd').getContent();

Rather than accessing the textarea directly (via, say, $('#mixTextAdd')). Could that be the issue? (Obviously I'm guessing here as you didn't post the code you use to make the AJAX call - so apologies if you've already got this covered!)

Why TinyMCE doesn't detect changes in text when the content is posted through jQuery?

2 Answers