Question

I’m building a simple email sending form and wanted to make it with ajax. The form submits correctly the first time but if you make any subsequent changes to the text in the form and then submit again then jquery does not pick up on the changes and posts the old data. Whats going on?

<script type="text/javascript">
var $j = jQuery.noConflict();

$j(document).ready(function() {
    var submit_url = "mail_submit.php";
    var send_email = $j("#sendemail");

    send_email.click(function() {
        var form = $j("#post");

        $j.post(submit_url, form.serialize(), function(data) {
            alert(data);
        });

    });
});

Answer 1

I ran into this problem again.

To solve it you need to use tinyMCE.triggerSave();
The method is outlined here http://maestric.com/doc/javascript/tinymce_jquery_ajax_form

My final code is:

<script type="text/javascript">
var $j = jQuery.noConflict();

$j(document).ready(function() {
    var submit_url = "mail_submit.php?action=";
    var actions = $j("#sendEmail, a#previewEmail, a#saveEmail, a#updateEmail");
    var loading = $j("img#ajax-loading");
    var status = $j("span#post-status-display");

    actions.click(function() {
        tinyMCE.triggerSave();
        var form = $j("#post");
        var action = $j(this).attr("id");
        var update_div = $j("#update-div");
        loading.show();

        $j.post(submit_url + action, form.serialize(), function(data){
            update_div.html(data);
            update_div.fadeIn();
            loading.hide();
        });

    });
});