Question

I want to trigger this function, which uses the jquery’s post method, when a form is submitted:

function update_point_session(){
    $.post('/update_point_session/', 
           {session: true},
           function(data){}
    );
    return true;
}

I uses the onsubmit to trigger it.

The problem is that it won’t send it when the form is submitted. But if I return false; it will (though the form itself, of course, will not). It looks as if the $.post is not send before the page is directed to another one by the form..

So I think I somehow have to return true; AFTER the $.post. I tried to do this by putting it inside function(data){} but it did not work..

How can I send BOTH the post from jquery and from the form?

Answer 1

There are a couple of things you can do.

Make the AJAX synchronous

Since $.post is, according to the documentation, equivalent to

$.ajax({
    type: 'POST',
    url: url,  
    data: data,
    success: success  
    dataType: dataType
});

You can simply replace $.post with the equivalent $.ajax call, and also add async: false to the options. This will submit the form with AJAX and then, due to the return true; from the function, will also let the browser post the form normally.

Submit the form only after the AJAX completes

This involves some event handler juggling:

// attach submit event handler to the form
$("#myform").submit(function() { 
    // Handler immediately detaches itself, so that
    // we don't have an infinite loop when we call
    // $(this).submit() ourselves below
    $(this).unbind('submit');

    // Do the AJAX
    $.post(
        '/update_point_session/', 
        {session: true},
        function(data){
            // When the AJAX completes, tell the browser
            // to re-submit the form
            $(this).submit();
        }
    );

    // Prevent the browser from submitting it NOW,
    // because the AJAX is still running
    return false;
});