jquery - using .done() successively is giving the same results as .then() / .done()

Question

Edit - please see notes at the bottom on why I don\'t believe this is a duplicate question

Using jquery 3.2.1 and Bootstrap 3.3.7

Part of my application

Answer 1

This question is duplicate. jquery-deferreds-and-promises-then-vs-done

In short:

promise.then( doneCallback, failCallback )
// was equivalent to
promise.done( doneCallback ).fail( failCallback )

Answer 2

If I had correctly understood what you're trying to do, it seems that you need to update the modal content with the step 2 response, but only after loading the content in step 3. if that is the Problem, then :

$('#notifierModal .modal-body').on('click', '.toggle-notifier a', function(e) {
    e.preventDefault();

    // Step 2
    $.ajax({
        url: $(this).attr('href'),
        method: 'get'
    }).then(function(outcome) {

        // Step 3
        $.ajax({
            url: '/notifier-modal',
            method: 'get'
        }).then(function(response) {
            $('#notifierModal .modal-body').html(response);
            // Step 4
            if (outcome.result == 'error') {
                $('#notifierModal .modal-body .outcome').html(outcome.message); 
            }
            if (outcome.result == 'success') {
                $('#notifierModal .modal-body .outcome').html(outcome.message); 
            }
        });       
    }); 
});