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;
    }
}

There are two questions here it seems, which is it? Are you trying to display a loading variable or trying to display the result data when the request completes? — Matt Dodge
– Matt Dodge, Commented Jun 5, 2013 at 23:23
You're mixing and matching JQuery, which is not invalid, but it is odd. Are you sure that there are no Javascript errors occuring? — pickypg
– pickypg, Commented Jun 5, 2013 at 23:23
In your JSFiddle example, div#country_slide has no content, and therefore show will display nothing. Not to mention that it is visible by default. You must be looking for something along the lines of TGH's answer. — pickypg
– pickypg, Commented Jun 5, 2013 at 23:25

TGH · Accepted Answer · 2013-06-05 23:30:15Z

4

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

edited Jun 5, 2013 at 23:30

answered Jun 5, 2013 at 23:23

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sushanth -- · Accepted Answer · 2013-06-05 23:23:46Z

1

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();
},

answered Jun 5, 2013 at 23:23

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

Jquery Ajax HTML - Add Loading

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related