PageTracker

Saturday, September 27, 2008

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

6 comments:

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

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

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

    ReplyDelete