I am creating a login function with ajax and am having an issue where the success function (SuccessLogin) fires before getting an ajax response. I am running the code as google web app from eclipse and I can see when debugging the java class file, that the javascript is throwing an alert for the success response from the class being false before the debugger catches the break point in the class file. I have only been writing code for a couple months now so I am sure its a stupid little error on my part.

$(document).ready(function() {

    sessionChecker()

    // sign in
    $('#signInForm').click(function () {
        $().button('loading')
           var email = $('#user_username').val();
           sessionStorage.email = $('#user_username').val();
           var password= $('#user_password').val();

           var SignInRequest = {
                type: "UserLoginRequest",
                email: email,
                password: password
           }

           var data= JSON.stringify(SignInRequest);

           //disabled all the text fields
           $('.text').attr('disabled','true');

           //start the ajax
           $.ajax({

               url: "/resources/user/login", 

               type: "POST",

               data: data,     

               cache: false,

               success: successLogin(data)
           });       

       });

    //if submit button is clicked
   $('#Register').click(function () {
        $().button('loading')
        var email = $('#email').val();       

        if ($('#InputPassword').val()== $('#ConfirmPassword').val()) {
            var password= $('input[id=InputPassword]').val();
        } else {alert("Passwords do not match");
            return ;}
        var UserRegistrationRequest = {
                type: "UserRegistrationRequest",
                email: email,
                password: password
        }

        var data= JSON.stringify(UserRegistrationRequest);

        //disabled all the text fields
        $('.text').attr('disabled','true');

        //start the ajax
        $.ajax({

            url: "/resources/user/register", 

            type: "POST",

            data: data,     

            cache: false,

            success: function (data) {              

                if (data.success==true) {
                    //hide the form
                    $('form').fadeOut('slow');
                    //show the success message
                    $('.done').fadeIn('slow');
                } else alert('data.errorReason');
            }
        });

        return false;
    });
}); 

function successLogin (data){
       if (data.success) {
            sessionStorage.userID= data.userID
            var userID = data.userID
            sessionChecker(userID);
        } else alert(data.errorReason);
       }

//session check
function sessionChecker(uid) {
    if (sessionStorage.userID!= null){
        var userID = sessionStorage.userID
    };

    if (userID != null){

        $('#user').append(userID)
        $('#fat-menu_1').fadeOut('slow')
        $('#fat-menu_2').append(sessionStorage.email).fadeIn('slow') };
}

success: successLogin(data)

There's a difference between a function call and a function definition:

• A function definion uses the function keyword and contains a function body {...}
• A function call appends parentheses (argument list) to the function name and actually calls the function to return a value

If you assign a function call to the property, it will return a value and that will be what is stored. To avoid this, if your function does not take any parameters you can use the function name, or if your function does take a parameter, embed your function call in another function's definition:

• No parameter: success: successLogin
• Has parameter: success: function() { successLogin(data); }

more