Ajax POST failing on first attempt

Question

I have a wierd issue with the below code:

<script type="text/javascript">
    $(document).ready(function(){
        $('#loginSubmit').click(function () {
            //start the ajax
            var f = $("#loginForm");
            request = $.ajax({
                //this is the php file that processes the data
                url: "app/index.php",
                type: "POST",
                data: f.serialize(),
                dataType:"json",
                cache: false
            });
            request.done(function (response, textStatus, jqXHR){
                // log a message to the console
                console.log("Hooray, it worked!");
                // callback handler that will be called on failure
                request.fail(function (jqXHR, textStatus, errorThrown){
                    // log the error to the console
                    console.error(
                        "The following error occured: "+
                        textStatus, errorThrown
                    );
                    alert("fail")
                });
                // callback handler that will be called regardless
                // if the request failed or succeeded
                request.always(function () {
                    // reenable the inputs
                    alert("ok")
                });
            });
        });
    });
</script>

I am using firebug to debug the code and basically when the submit button is clicked, the post request receives no response, however if I then resend the post data using firebug it all works fine?

Any ideas?

UPDATE - FORM CODE

<form id="loginForm" action="" method="post" name="loginForm">
    <h1>Login Form</h1>
    <div>
        <input type="text" placeholder="Email" required="" id="email" name="userEmail" />
    </div>
    <div>
        <input type="password" placeholder="Password" required="" id="userPassword" name="userPassword" />
    </div>
    <div>
        <input type="hidden" value="login" id="tag" name="tag" />
        <input type="submit" value="Log in" id="loginSubmit" name="loginSubmit" />
        <a href="#">Lost your password?</a>
    </div>
</form>

Is that a button of type `submit`? – tymeJV Apr 08 '14 at 18:24 — tymeJV, Apr 08 '14 at 18:24
correct, sorry I will add my html code there as well. – dave Apr 08 '14 at 18:25 — dave, Apr 08 '14 at 18:25

score 1 · Accepted Answer · edited Apr 08 '14 at 19:20

1

change your button type for preventing default submission of FORM

submit to button

Or change your event of click to submit

$('#loginform').submit(function(event){
    event.preventDefault();

    $.ajax({
        //this is the php file that processes the data
        url: $(this).attr("action"),
        type: "POST",
        data: $(this).serialize(),
        dataType:"json",
        cache: false
    })
        .done(function (response, textStatus, jqXHR){
            // log a message to the console
            console.log("Hooray, it worked!");
        })
        .fail(function (jqXHR, textStatus, errorThrown){
            // log the error to the console
            console.error(
                "The following error occured: " + textStatus, 
                errorThrown
            );
            alert("fail");
        })
        .always(function () {
            // callback handler that will be called regardless
            // if the request failed or succeeded
            // reenable the inputs
            alert("ok");
        });
});

edited Apr 08 '14 at 19:20

Saeverix

397
5
18

answered Apr 08 '14 at 18:27

Manwal

23,450
12
63
93

well that did it! thanks that was nice and simple, in the interest of education, why is this so? – dave Apr 08 '14 at 18:30
sorry the edit went in before I replied, I was responding ot the changing submit to a button? – dave Apr 08 '14 at 18:31
Great. This is because default form submit was happening that time. – Manwal Apr 08 '14 at 18:32
You should use "event.preventDefault();" instead of "return false;". I changed your answer. – Saeverix Apr 08 '14 at 18:49
Thanks for edit @Werner why "event.preventDefault()" is better from "return false"? can you please explain – Manwal Apr 08 '14 at 18:53
@Manwal I think it's well explained in the accepted answer of this question: http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – Saeverix Apr 08 '14 at 19:16

score 1 · Answer 2 · answered Apr 08 '14 at 18:29

You're button has a typesubmit within a form. The default action is to POST back to the server, causing a postback. Your AJAX is most likely being cancelled because of this. A couple of solutions:

-Use the event property of your click handler and preventDefault

$('#loginSubmit').click(function (e) {
    e.preventDefault();
    ...
});

-return false from your click method

$('#loginSubmit').click(function () {
    ...
    return false;
});

Ajax POST failing on first attempt

UPDATE - FORM CODE

2 Answers2