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.

Do you have a URL we can see? If you are using fire bug are you getting any errors? What kind of feedback do you see under the Net tab? — khollenbeck
– khollenbeck, Commented Mar 21, 2012 at 4:17

Ben Lee · Accepted Answer · 2012-03-21 04:20:22Z

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!');
    }
});

edited Mar 21, 2012 at 4:20

answered Mar 21, 2012 at 4:14

Ben Lee

53.5k15 gold badges129 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cocorico Over a year ago

I think this was it, my backend script seemed to be throwing up some errors all of a sudden.. to be honest it's a bit of a blur right now, but yeah, I think this was the problem :|

Greg Pettit · Accepted Answer · 2012-03-21 04:17:54Z

1

When you click, the form is also being submitted the standard way. Modify your click handler like this:

$(document).on('click', "#reply_submit", function(e) {
  e.preventDefault(); // prevent the default submit event
  var formData = $('#reply').serialize();
  // ...
});

Although I think document.body should be a valid node to wrap in jQuery, I've also modified it to the more commonly used document.

On that note, if the form is never destroyed by an Ajax event or other DOM modification, you could bind to #reply instead of document (or body).

answered Mar 21, 2012 at 4:17

Greg Pettit

10.8k5 gold badges57 silver badges73 bronze badges

Comments

Nirav Gandhi · Accepted Answer · 2012-03-21 05:09:07Z

1

I'm simply assuming that you want to submit a form without reloading the whole page. Based on that assumption, following code will serve the purpose.

$(document).ready(function(){

//on form submit event
$('form#reply').submit(function(){
    $.post('newpost.php',$(this).serialize(),function(){
        alert("Message or do something with the response data if you are expecting one");
    });

    //prevent default action
    return false;   
});

});

Please ignore the post if this is not the functionality you are looking for in your project.

answered Mar 21, 2012 at 5:09

Nirav Gandhi

1,9951 gold badge25 silver badges32 bronze badges

Collectives™ on Stack Overflow

Ajax with Jquery - Callback not executing

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related