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:
<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 callingdocument.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

Comments

  1. nice trick.

    ReplyDelete
  2. Samiran, I was facing this problem using tinyMce with ajax, and your post helped me. :)
    Good work. keep it up.

    ReplyDelete
  3. Thanks for your posting! I was facing problem while using tinyMce in ajax form.

    ReplyDelete
  4. worked like a charm.. thank you!!

    ReplyDelete
  5. Thanks! I was using the jQuery Form plugin to send data from a WordPress wp_editor(), which uses TineMCE.

    The 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!!!

    ReplyDelete
    Replies
    1. Nice! Thanks for sharing how you used with jquery.

      Delete

Post a Comment

Popular posts from this blog

Samsung BADA, Starting with sample application

Bada tutorial: Application basics