Showing a Spinning Icon When Using SPServices

Here’s another quick question that ought to be useful to many people as they develop solutions with SPServices. Here’s the original question:

Is there a way to add and animate /_layouts/images/gears_an.gif to my SPServices Page while the Service Request is being processed. Everything I have seen seems to require calling SPLongOperation from the code beside.

This is a pretty common goal. We often want to show some sort of indicator while an AJAX call is happening so that the user knows that something is happening and that they may need to wait for a little while.

There are examples of this all over the Web, from SharePoint to Facebook to Google and beyond. Users expect this sort of feedback from Web pages these days.

The image referenced above ought to be a familiar one to frequent SharePoint 2007 users (it’s also available in SharePoint 2010):

Here’s a simple example of how to show this image while a call to a Web Services with SPServices is happening, snipped from one of my test pages:

var waitMessage = "<table width='100%' align='center'><tr><td align='center'><img src='/_layouts/images/gears_an.gif'/></td></tr></table>";
$(divId).html(waitMessage).SPServices({
  operation: "GetListCollection",
  completefunc: function (xData, Status) {
    var out = $().SPServices.SPDebugXMLHttpResult({
      node: xData.responseXML,
      outputId: divId
    });
    $(divId).html("").append("<b>This is the output from the GetListCollection operation:</b>" + out);
  }
});

11 Comments

  1. Just implemented something like this a few days ago as well, it’s going to show up on our new Intranet homepage (well, hopefully people won’t get to see it for too long).
    And for those who are interested, under SharePoint 2010 you can also use the ‘new’ spinning icon, the filename is gears_anv4.gif (same location as above)

    Reply
  2. Nice tip! I recently did something very similar for a publishing/approval dashboard for a SharePoint blog. I created a smaller graphic using http://ajaxload.info/. This site is sort of a tongue-in-cheek reference to web 2.0 trends like AJAX, glossy buttons, and “beta” badges, but I find it’s very useful!

    Reply
  3. Hi, Where will you add this code on completefunc: function (xData, Status) / before the UpdateListItems execution. Appreciate your prompt response.

    Reply
  4. Hi Marc,

    Please look at my code. I’m calling a function ShowProgress() when the updates are in-progress. This function is called recuresively to insert mutiple tasks. This code doesn’t shoe me a gif file. Please suggest your thoughts.

    var strTaskName = pow + ” – ” + vendorCode + ” – ” + title ;
    $().SPServices({
    operation: “UpdateListItems”,
    async: false,
    batchCmd: “New”,
    listName: “Tasks”,
    valuepairs: [[“Title”, strTaskName],[“AssignedToText”,UserNameText]],
    completefunc: function(xData, Status) {
    ShowInprogress();

    }
    });

    function ShowInprogress()
    {
    var waitMessage = “”;
    $(divId).html(waitMessage).SPServices({
    operation: “GetListCollection”,
    completefunc: function (xData, Status) {
    var out = $().SPServices.SPDebugXMLHttpResult({
    node: xData.responseXML,
    outputId: divId
    });
    $(divId).html(“”).append(“This is the output from the GetListCollection operation:” + out);
    }
    });
    }

    Reply
    • Kris:

      Keep in mind that my code is an example, not just something you can copy verbatim. You haven’t defined divId and you probably don’t mean to call GetListCollection, either. This was an example of how I showed in spinner in a piece of my own code.

      M.

      Reply
  5. Hi Marc:

    I figured it out. You are true, i read your code again to see how it works. I have defined the divid as object my div exists in my webpart. Let me take a look again.

    Thanks for your prompt response.

    Reply
  6. loading image is a issue while trying to fetch lists data using spservices in button click in sharepoint 2013.its getting loaded after the data is loaded.

    Reply
  7. var waitMessage = “”;

    $(divId).html(waitMessage).SPServices({
    operation: “GetListItems”,
    //async: false,
    listName: “JSA header”,
    CAMLQuery: CamlQueryFilter,

    completefunc: function (xData, Status) {
    $().SPServices.SPDebugXMLHttpResult({
    node: xData.responseXML,
    outputId: divId
    });

    used the same code as given declared div but nothing is shown

    Reply
  8. Hi Marc,

    Look at my code, the spinner is not displaying in Internet Explorer, Chrome browser but it working in Mozilla firefox, please suggest me any solution

    function tosubmitReqTracker(valuePairs,reqlistname,reqlistnameNext) {
    notStartedHtml = “”;
    var destFy = (reqlistnameNext != “” && reqlistnameNext != undefined ? reqlistnameNext.substr(reqlistnameNext.length – 4) : “”);
    main = $(“#notStarted table tbody”);
    countElement = $(“#filteredCount”);
    idPrefix = “FY”+(destFy != “” ? destFy.substr(destFy.length – 2) : “”)+”ART”;
    valuePairs.push([“ReqType”,”COPIED”]);
    valuePairs.push([“FY”,destFy]);
    var waitMessage = “”

    $(main).html(waitMessage).SPServices({
    operation: “UpdateListItems”,
    async: false,
    batchCmd: “New”,
    listName: reqlistnameNext,
    valuepairs: valuePairs,
    debug: true,
    completefunc: function(xData, Status) {
    var out = $().SPServices.SPDebugXMLHttpResult({
    node: xData.responseXML,
    outputId: main
    });
    $(main).html(“”).append(+out);
    }
    });
    }

    Here
    (main = divId) as per ur code…

    Reply

Have a thought or opinion?