Repeating an AJAX request after login

Question

I'm sending some information via AJAX to a PHP-Script to get some text, which should be displayed. So far there is no problem. But if the user is logged out, the result would be false and a modal with a login-form is shown.

If the user gets logged in, the first information (var data) should be send one more time, as the first sending wasn't accepted.

$.ajax({ 
 url: "script.php", type: "POST", data: data, dataType: "json" 
})
.done(function( json ) {
    if (json.result === false) { 
        showModal("login"); return; 
    }
     else {
        $('#result').html(json.result);
     }
});

The showModal function is also connected to an ajax request, so the user is getting logged in... After that the first data should be send one more time...

function showModal() {
    $('body').append('<form>...'); // Show Modal with form to login
}

// With submit form, the user will be logged in
$('body').on('submit','#loginform',function(event){
$.ajax({
    url: "login.php",
    type: "POST",
    data: { 'username': username, 'password': password },
    dataType: "json"
})
.done(function( json ) {
    // User is now logged in
    // Now repeat first request
});
});

Answer 1

Put your code inside a function. You can call a function whenever you need it:

var sendData = function() {
    $.ajax({ url: "script.php", type: "POST", data: data, dataType: "json" })
.done(function( json ) {
        if (json.result === false) { 
            showModal("login"); return; 
        }
        else {
            $('#result').html(json.result);
        }
    });
};

// now run sendData() when you want to trigger it

---

Where to call sendData() the second time depends on how your login (showModal) works. Find a way to catch a 'successful login' event.

---

You can pass sendData to the showModal function and call it there. This way showModal does not need to know anything about data:

var sendData = function() {
    $.ajax({ url: "script.php", type: "POST", data: data, dataType: "json" })
.done(function( json ) {
        if (json.result === false) {
            // The function sendData is passed as a parameter - will be called after a successful login
            showModal("login", sendData); return; 
        }
        else {
            $('#result').html(json.result);
        }
    });
};

Then, where showModal is defined:

function showModal(dialog, loginCallback) {
    $('body').append('<form>...'); // Show Modal with form to login
    // With submit form, the user will be logged in
    $('#loginform').on('submit', function(event) {
        $.ajax({
            url: "login.php",
            type: "POST",
            data: { 'username': username, 'password': password },
            dataType: "json"
        })
        .done(function( json ) {
            // User is now logged in
            // Now repeat first request
            loginCallback();
        });
    });
}

Answer 2

You can have the ShowModal function to accept another argument as ajax Options. The if ajax options are defined just call them in the done.

function showLoginModal(ajaxOptions){
    $.ajax({
        url: "login.php",
        type: "POST",
        data: { 'username': username, 'password': password },
        dataType: "json"
    })
    .done(function( json ) {
        if(ajaxOptions!== undefined){
            $.ajax(ajaxOptions);
        }
    });
}

Then pass the ajaxOptions from your calling function

$.ajax({ 
 url: "script.php", type: "POST", data: data, dataType: "json" 
})
.done(function( json ) {
    if (json.result === false) { 
        showLoginModal(this); 
    }
     else {
        $('#result').html(json.result);
     }
});