Ajax form submission with tiny MCE editor
Hi,
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:
2. Following is my HTML form:
3. My Javascript function:
4. Ajax requested is processed by the following code:
Note the calling of
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
of prototype library.
Eventually you can get the formatted value of the textarea by calling
For example in this case:
I would like to have comments with better suggestions or details of using ajax with tinyMCE.
Thank u.
Samiron
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 for your posting! I was facing problem while using tinyMce in ajax form.
ReplyDeleteThanks!
ReplyDeleteworked like a charm.. thank you!!
ReplyDeleteThanks! I was using the jQuery Form plugin to send data from a WordPress wp_editor(), which uses TineMCE.
ReplyDeleteThe jQuery Form plugin's ajaxForm has an option to specify a "beforeSerialize" callback function. That's where I put the call to tinyMCE.triggerSave(). Works like a charm!!!
Nice! Thanks for sharing how you used with jquery.
Delete