Unable to show a loading image while the rest api call is being executed

Question

I am working on sharepoint server 2013. and i have a list named "links" of type prompted links. now i write the following jQuery code to query the links and show them inside a page:-

$(function () { 
var htmlinit = "";
htmlinit = "<image  id= 'customloader' src= '/resources/ajax-loader.gif'></image>";
$("#inserhere").after(htmlinit);
var html="<div ><div ><a  href='/Lists/UsefulLinks/AllItems.aspx'> Links </a> </div><ul >";

$.ajax({
     url: "/_api/web/lists/getbytitle('Useful Links')/items?$select=Title,LinkLocation&$orderby=TileOrder asc",
     method: "GET",   
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){
            var items=data.d.results;
            for(var i=0;i<items.length;i++){        
                var nurl = items[i].LinkLocation.Url.toString();
                var ntitle = items[i].Title.toString();
                html+="<ul ><li ><a href=" + nurl + " target='_blank'>"+ ntitle + "</a></li></ul>";
            }
            html+="</ul></div>";
            $("#inserhere").after(html);
            $("#customloader").hide();
        }
     },
     error: function (data) {   
     }
});
$("#customloader").hide();

});

this code should do the following:-

show a loading image
call the api rest endpoint of a list
show the list items.
hide the loading image.

now the above will show the items the way i want without any problem. but the only issue i am facing is that the

<image  id= 'customloader' src= '/resources/ajax-loader.gif'></image>

is not being shown, even if the links takes around 10 seconds to load,, no loading image will be shown. now if i remove the $("#customloader").hide(); the loading image will be shown always (but of course this is not what i am looking for). so can anyone advice why i can not show the loading image till the rest api call construct the output ??

you can try removing your second call to $("#customloader").hide(); at the end of the ajax call. — HarryB
– HarryB, Commented Dec 14, 2016 at 17:05
@HarryB worked well when i remove the second call to $("#customloader").hide();,, so why this call was the problem ? i added it to make sure the loading image will be hidden even if an exception occurred!! — John John
– John John, Commented Dec 14, 2016 at 17:13
Exception handling logic should be added to your error function. Ajax call being async- your second $("#customloader").hide(); call was getting executed before the success/error function. — HarryB
– HarryB, Commented Dec 14, 2016 at 17:22
@HarryB so the ajax call will be done async ... so this explain my problem well. thanks — John John
– John John, Commented Dec 14, 2016 at 17:23
@johnG You can assume that anything that happens in js that takes over seconds will either freeze your browser or be run in async. You can turn this of: "async: false," however this will freeze your browser. — Raoul Mensink
– Raoul Mensink, Commented Dec 14, 2016 at 17:57

Danny '365CSI' Engelman · Accepted Answer · 2016-12-15 09:43:07Z

I use StackOverflow to give my students programming assignments and have them optimize code.

Note! They usually do not test the code, so there could be typos

Here is their version:

$(function () {
    var inserthere = '#inserthere';
    var html = "<img src='/resources/ajax-loader.gif'/>";
    $(inserthere).html(html);
    $.ajax({
        url: "/_api/web/lists/getbytitle('Useful Links')/items?$select=Title,LinkLocation&$orderby=TileOrder asc",
        method: "GET",
        headers: {"Accept": "application/json; odata=nometadata"}
    }).then(function (data) {
        if (data.d.results.length > 0) {
            html = "<ul>" + data.d.results.map(function (item) {
                    return "<li><a href=" + item.LinkLocation.Url + " target='_blank'>" + item.Title + "</a></li>";
                }).join('') + "</ul>";
        } else {
            html = "There are no useful links";
        }
        $(inserthere).html("<div><div><a href='/Lists/UsefulLinks/AllItems.aspx'>Links</a></div>" + html + "</div>");
    });
});

now i remove the $("#customloader").hide(); at the end of the ajax call and it works fine — John John
– John John, Commented Dec 15, 2016 at 13:40
Yes, that was the mistake you made, as mentioned in the comments. My students changed the code so the loader is overriden by the Links, saves some lines of code — Danny '365CSI' Engelman
– Danny '365CSI' Engelman, Commented Dec 15, 2016 at 13:58

Stack Exchange Network

Unable to show a loading image while the rest api call is being executed

1 Answer 1

Your Answer

Hot Network Questions

Unable to show a loading image while the rest api call is being executed

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions