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>";
var html="<div ><div ><a  href='/Lists/UsefulLinks/AllItems.aspx'> Links </a> </div><ul >";

     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) {
            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>";
     error: function (data) {   


this code should do the following:-

  1. show a loading image
  2. call the api rest endpoint of a list
  3. show the list items.
  4. 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 ??

  • 1
    you can try removing your second call to $("#customloader").hide(); at the end of the ajax call. – HarryB Dec 14 '16 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 Gu Dec 14 '16 at 17:13
  • 1
    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 Dec 14 '16 at 17:22
  • @HarryB so the ajax call will be done async ... so this explain my problem well. thanks – john Gu Dec 14 '16 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 Dec 14 '16 at 17:57

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'/>";
        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 Gu Dec 15 '16 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 Dec 15 '16 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.