Jquery Ajax HTML - Add Loading

Question

I have tried this code locally and I can't seem to get it to display the contents of the html file in my country_slide div. I've tried playing around with it a bit all to no avail. I can't seem to see any code to actually tell the ajax where to put the content.

http://jsfiddle.net/spadez/uhEgG/23/

window.onload = function () {
    var a = document.getElementById("country_link");
    a.onclick = function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            success: function (data, textStatus) {
                $("#country_slide").show();
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            }
        });
        return false;
    }
}

Answer 1

I usually insert the content into the parent element using the .html function

window.onload = function () {
    var a = document.getElementById("country_link");
    a.onclick = function () {
        $.ajax({
            type: 'GET',
            dataType: 'html',
            url: '/ajax/test.html',
            timeout: 5000,
            success: function (data, textStatus) {
                $("#country_slide").html(data);
                alert('request successful');
            },
            error: function (xhr, textStatus, errorThrown) {
                alert('request failed');
            }
        });
        return false;
    }
}

This way the spinner can initially be placed inside the parent, and then be overwritten when the content is returned from the server

Answer 2

You can use beforeSend and complete methods to show or hide the loading symbol

beforeSend : function() {
   $('.loader').show();
}, 
success: function (data, textStatus) {
    $("#country_slide").show();
    alert('request successful');
},
error: function (xhr, textStatus, errorThrown) {
    alert('request failed');
},
complete : function() {
   $('.loader').hide();
},