Showing loading indication while loading XML

Question

I have a webpage that I load my data from XML files to DIVs. In this Example I have DIV with this attribute: class="Group"; Also this is my JS code:

$(document).ready(function () {
    $.get(Root + "/Feed_Products/Groups", {}, function (xml) {
        var output = '';
        $('item', xml).each(function (i) {
            var Name = $(this).find("Name").text();
            var Id = $(this).find("Id").text();

            var Link = Root + '/Group' + Id;

            output += '<a href="' + Link + '">' + Name + '</a>';
        });
        $(".Group").append(output);
    });
});

As you know, loading XML has delay and its not as fast as direct database request.

How can I show small loading GIF on each DIV that is loading XML?

Image: https://i.stack.imgur.com/BPWcg.png

Something like this? http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation — Frank van Puffelen, Aug 26 '14 at 15:37
Hi. Thanks for your comment. My question is different. If you see in my code, loading XML is after `Document Loaded` event. So,,, my main loading image was shown and hided before. After that loading image, I wanna show small loading images on different DIVs. An example for my question is `Inbox` of Stackoverflow loading image that is separated from its main loading. Another exmple is Facebook and Twitter lazy loading. — Tayyebi, Aug 26 '14 at 15:43

score 0 · Accepted Answer · answered Aug 26 '14 at 15:42

0

$(document).ready(function () {
    $(".Group").addClass("loading");
    $.get(Root + "/Feed_Products/Groups", {}, function (xml) {

        var output = '';
        $('item', xml).each(function (i) {
            var Name = $(this).find("Name").text();
            var Id = $(this).find("Id").text();

            var Link = Root + '/Group' + Id;

            output += '<a href="' + Link + '">' + Name + '</a>';
        });
        $(".Group").append(output).removeClass("loading");

    });
});

Then in your css define :

.Group.loading{
   background-image: url("yourGIF.gif");
   /* other rules */
}

answered Aug 26 '14 at 15:42

Charleshaa

2,218
2
21
25

That's true. I wanna use a global code which is stored in a `ContentManagerFile.js` file. – Tayyebi Aug 26 '14 at 15:45
Dear @Charleshaa,,, There are too many of these type of requests in my page and I haven't access to code. Because this website is based on ASP.NET MVC (Closed Source) and I'm just a content manager! – Tayyebi Aug 26 '14 at 15:47
Ah ok, well first, if you do not have access to code, why ask us how to do it ? Second, the answer I gave you works even if you have hundreds of DIVs in the page. – Charleshaa Aug 26 '14 at 15:49
This code works without any problem and your answer is respected for me! But this is not something that I want! – Tayyebi Aug 26 '14 at 15:49
Ok... Then what do you want ? If my answer works for what you asked, you need to click _accept answer_ – Charleshaa Aug 26 '14 at 15:51
My friend @Charleshaa I told you that I am just a content manager in this company! – Tayyebi Aug 26 '14 at 15:51
Lol yes I got that, but how would you want to do it if you cannot change the code ?? You seem very confused – Charleshaa Aug 26 '14 at 15:52
I'm glad to hear that... That code is store in dynamic pages and we dont have FTP access to them. Each content manager in our company has access to a CSS and JS File that is auto generated on page based on admins Username. e.g-> headadmin.js , mrt.js , tayyebi.js , ... – Tayyebi Aug 26 '14 at 15:56
Ok... I got a bit more details here, that's a good start. So you cannot change _ANY_ code ? right ? – Charleshaa Aug 26 '14 at 15:58
Yes. Just I have access to my JS file on page and a FTP access to a limited folder that contains my JS and CSS file. – Tayyebi Aug 26 '14 at 16:00
Well... if you use the code I gave you and put it in your JS file which you have access to, it should work. I do not understand your concern. Just put the GIF in your folder, and use an absolute path to your GIF in the CSS. – Charleshaa Aug 26 '14 at 16:02
I dont have reputation to put this image in my post: http://i.stack.imgur.com/BPWcg.png – Tayyebi Aug 26 '14 at 16:09
Ok my friend. I think I can't ask my question clear! I will accept your answer but please think on my question. – Tayyebi Aug 26 '14 at 16:11
I understand your Question, and I answered it I think. The fact that you cannot change the HTML is not on our hands. Just ask the developer at your company to check my answer if he has trouble. – Charleshaa Aug 26 '14 at 16:15

Showing loading indication while loading XML

1 Answers1