How to run an ajax call after another ajax call?

Question

Here is the problem that I am having. The user can log in but if they don't refresh the page they can not log back out. So how do I call another ajax call right after another?

The log out link is being loaded by the fist ajax call, could that be the problem?

Here is the log in jquery code:

 $(".bt_login").click(function (){
     $.ajax({
            type: 'POST',
            url: 'widgets/Login/loginProcess.php',
            data: dataString,
            success: function(data){
                if(data == 'error'){
                    alert('Wrong username and/or password!');
                }else{
                    $('#loginForm').html(data);
                    $('#greet').html('Hello '+username+'!').fadeIn();
                    $('#open').html('Open Panel');
                }
            }
        });
    });

Here is the log out jquery code:

$('.bt_logout').click(function (){
        var dataString = 'process=logout';
        $.ajax({
            type: 'POST',
            url: 'widgets/Login/loginProcess.php',
            data: dataString,
            success: function(data){
                $('#loginForm').hide().html(data).fadeIn();
                $('#greet').html('Hello Guest!');
                $('#open').html('Log In | Register');
            }
        });
    });

Answer 1

You need to only run the second code snippet once the logout link has been written in order to bind the event. It's nothing to do with consecutive Ajax calls, but everything to do with adding the link in the success method of the first call and then not binding its click event.

Answer 2

If you want to make a call right after another, put the code to call the second call inside the "success" function of your first call.

Answer 3

In that case:

$(".bt_login").click(function (){
 $.ajax({
        type: 'POST',
        url: 'widgets/Login/loginProcess.php',
        data: dataString,
        success: function(data){
            if(data == 'error'){
                alert('Wrong username and/or password!');
            }else{
                $('#loginForm').html(data);
                $('#greet').html('Hello '+username+'!').fadeIn();
                $('#open').html('Open Panel');

                // because .bt_logout only exists after this point:

                $('.bt_logout').click(function (){
                    var dataString = 'process=logout';
                    $.ajax({
                        type: 'POST',
                        url: 'widgets/Login/loginProcess.php',
                        data: dataString,
                        success: function(data){
                            $('#loginForm').hide().html(data).fadeIn();
                            $('#greet').html('Hello Guest!');
                            $('#open').html('Log In | Register');
                        }
                   });
               });
            }
        }
    });
});