CODEWITHSUNDEEP
javascriptjqueryajax
user1063998
user1063998

Reputation: 602

multiple jQuery ajax calls - previous calls are throwing fails

I have a login form on my website that uses ajax to send the login information to php. Once logged in, the user can then logout and be redirected to the login page again. My problem is that every time you login after logging out previously, the fail method triggers with an abort error message.

For example:

*user logs in successfully*
*user logs out*
*user logs in successfully*
The following error occurred: abort abort
*user logs out*
*user logs in successfully*
The following error occurred: abort abort
The following error occurred: abort abort
*user logs out*

It just keeps on going on like that, with more errors being thrown each time.

When the user clicks on the login form submit button, this is the code that is executed:

p.onMouseClick = function()
{
    var savedRef = this;

    $('#loginForm').on('submit', function(e){

        if(this.request){
            this.request.abort();
        }

        var form = $(this);
        var inputs = form.find("input, select, button, textarea");
        var serializedData = form.serialize();

        inputs.prop("disabled", true);

        this.request = $.ajax({
            url: "http://***********/login.php",
            type: "post",
            data: serializedData
        });

        this.request.done($.proxy(function(result){
            if(result['returnCode'] == 1){
                playerInfo = new PlayerInfo(result['returnMessage']);
                savedRef.loggedIn();
                inputs.prop("disabled", true);
            }
        }, this));
        this.request.fail(function (jqXHR, textStatus, errorThrown){
            // log the error to the console
            console.error(
                    "The following error occured: "+
                    textStatus, errorThrown
            );
        });
        this.request.always(function(){
            inputs.prop("disabled", false);
        });

        e.preventDefault();
    });
};

Upvotes: 0

Views: 107

Answers (1)

EduSanCon
EduSanCon

Reputation: 1929

It seem that the error is because this:

if(this.request){
    this.request.abort();
}

I think it's for prevent the function of doing a call during another call. Try to do this instead:

if(this.request){
    return false;
}

Also, and very important. take the form.submit event out of the click event.

on click event just call submit function:

var savedRef;

p.onMouseClick = function()
{   
    savedRef = this;    
    $('#loginForm').submit();
};

$('#loginForm').on('submit', function(e){

    if(this.request){
        this.request.abort();
    }        

    var form = $(this);
    var inputs = form.find("input, select, button, textarea");
    var serializedData = form.serialize();

    inputs.prop("disabled", true);

    this.request = $.ajax({
        url: "http://***********/login.php",
        type: "post",
        data: serializedData
    });

    this.request.done($.proxy(function(result){
        if(result['returnCode'] == 1){
            playerInfo = new PlayerInfo(result['returnMessage']);
            savedRef.loggedIn();
            inputs.prop("disabled", true);
        }
    }, this));
    this.request.fail(function (jqXHR, textStatus, errorThrown){
        // log the error to the console
        console.error(
                "The following error occured: "+
                textStatus, errorThrown
        );
    });
    this.request.always(function(){
        inputs.prop("disabled", false);
    });

    e.preventDefault();
});

Upvotes: 2

Related Questions