tinymce blank content on ajax form submit?

Question

My form uses TinyMCE to format HTML, but somehow the content is always blank on first submission. This is what I have for the submit function:

$('#commentForm').click('submit', function () {
        tinyMCE.triggerSave(true, true);
        $(this).ajaxSubmit({
            success: function (result) {
                if (result.success) {
                    $('#commentForm')[0].reset();
                    var newComment = { comment: result.comment };
                    // Append the new comment to the div
                    $('#commentTemplate').tmpl(result.comment).appendTo('#commentsTemplate');
                }
                $('#commentFormStatus').text(result.message);
            }
        });
        return false;
    });

I've added tinyMCE.triggerSave(true,true); but it doesn't seems to work. Any suggestion?

Thanks.

Answer 1

Try to replace

tinyMCE.triggerSave(true, true);

by

tinyMCE.get("id").save();

where "id" is the ID of your textarea.

Answer 2

$('form').on('submit', function(form){
    // save TinyMCE instances before serialize
    tinyMCE.triggerSave();

    var data = $(this).serialize();
    $.ajax({
        type:       'POST',
        cache:      false,
        url:        'inc/process.php',
        data:       data,
        success:    function(){
                        console.log("Updates have successfully been ajaxed");
        }
    });
    return false;
});