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);
}
});
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)
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!
Josh:
Tongue-in-cheek or not, pretty useful!
M.
Hi, Where will you add this code on completefunc: function (xData, Status) / before the UpdateListItems execution. Appreciate your prompt response.
Kris:
Pretty much exactly where I show it. Which part of it isn’t clear ?
M.
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);
}
});
}
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.
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.
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.
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
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…
Hi Marc,
I am just looking for the similar one, thought of contacting you in FB but you posted here. Your references are helping me lot, Thanks.
Hi Marc,
I have tried it with SPCascadeDropdowns
No Luck as Loader is working with SPCascadeDropdowns Please have look at my below code and let me know what i am missing
$(divid).html(waitMessage).SPServices.SPCascadeDropdowns({relationshipList: "First List",
relationshipListParentColumn: "Parent Column",
relationshipListChildColumn: "Title",
parentColumn: "Parent Column Name",
childColumn: "Child Column Name",
completefunc: function() {
$(divid).html("");
},
debug: true
});
*divid and and column names are replaced here
@Vishal:
With what you are showing here, the spinner will only show during the time SPCascadeDropdowns is setting things up during page load. That will be so brief you won’t probably even see it.
M.