I was working with a Ajax form submission where the form contains a tinyMCE wrapped
textarea. I was using prototype library for Ajax. Problem is when I called
Form.serialize('form_id'), it couldn't retrieve the value of the textarea as it is wrapped by
tinyMCE. At last I got a solution by just calling a tinyMCE method before the
Ajax operation. Here is the stepwise detail:
1. My tiny MCE declaration was very simple like:
<script type="text/javascript" language="Javascript">
tinyMCE.init({
theme:"simple",
mode:"exact",
elements:"desc"
});
</script>
2. Following is my HTML form:
<form onsubmit="return processForm()" name="submitForm" id="submitForm" method="post" action="request.php">
<label for="name">Name: </label><br />
<input type="text" name="name" id="name"><br />
<label for="desc">Description: </label><br />
<textarea id="desc" name="desc"></textarea><br />
<input type="submit" value="Submit">
<div id="response" class="message" >response will be shown here....</div>
</form>
3. My Javascript function:
function processForm(){
tinyMCE.triggerSave() #IMPORTANT!!
params = Form.serialize('submitForm')
new Ajax.Updater('response','request.php', {
parameters: params }
);
return false
}
4. Ajax requested is processed by the following code:
<?php $response = ""; $response .= '<h3> Hi '.$_POST['name'].'!! Thanks for submission</h3>'; $response .= 'Your Message:<br />'.$_POST['desc']; echo $response; ?>
Note the calling of
tinyMCE.triggerSave()function. By calling this function you will get the formatted written content in actual text area that you created in the form. Then you can get this value in a serialized format for ajax request by only a simple call
Form.serialize()of prototype library.
Eventually you can get the formatted value of the textarea by calling
document.getElementById('text_area_id')For example in this case:
document.getElementById('desc')I would like to have comments with better suggestions or details of using ajax with tinyMCE.
Thank u.
Samiron

nice trick.
ReplyDeleteSamiran, I was facing this problem using tinyMce with ajax, and your post helped me. :)
ReplyDeleteGood work. keep it up.
Thanks
ReplyDeleteThanks for your posting! I was facing problem while using tinyMce in ajax form.
ReplyDeleteThanks!
ReplyDeleteworked like a charm.. thank you!!
ReplyDelete