Ajax with Jquery - Callback not executing

Question

I have tried so many things, cannot figure this out, I am using this code, and I know that the start is working, because the script it connects to sticks some info in the db, but the callback never runs.

<script type="text/javascript">
$(document).ready(function() {
    $(document.body).on('click', "#reply_submit", function() {
            var formData = $('#reply').serialize();


            $.post("newpost.php",formData, function(data){
                    alert("hi");
             }, "json");
    });

});

My form's id is "reply" and the button I am using to submit it is "reply-submit", just to make sure those things are clear.

It also doesn't work if I remove that last "json" thing btw.

Answer 1

If you read the docs for jQuery.post(), it says this about the callback:

success(data, textStatus, jqXHR)
A callback function that is executed if the request succeeds.

If it's not getting called, it means that request did not succeed. There is probably an error in newpost.php (sometime after the data insert, but before it would normally exit).

You can also catch error conditions by using the long-form jQuery.ajax() instead of the post shorthand:

$.ajax({
    url: 'newpost.php',
    data: formData,
    type: 'post',
    dataType: 'json',
    success: function(data, textStatus, jqXHR) {
        alert('success');
    },
    error: function(jqXHR, textStatus, errorThrown) {
        alert('error!');
    }
});