This project has moved. For the latest updates, please go here.

Show a "Busy" modal while SPService call is running?

Nov 30, 2011 at 6:52 PM

This should be simple.  I need some code to execute and show my "Busy" dialog while the service call is working.  The webservice delay is variable...up to 10+ seconds. 

My users start clicking on things 2-3 times because they don't know there's a delay. 

My code right now completes the SPService call and then finally shows and hides the "Busy" dialog all at once...can't even see it. 

Is this where the "async" parameter comes in?   Or a callback? 


Nov 30, 2011 at 8:15 PM
Edited Nov 30, 2011 at 8:23 PM

All SPService calls are at the end of the chain... So you start your code with $().SPServices.  If you do your DOM manipulation in the first jQuery call, you'll be able to update the DOM prior to running the web service calls.


$("#mySelector").html("<img src='urlTo/wait.gif' />").SPServices({ do something awesome });

Nov 30, 2011 at 8:51 PM

Probably because I am naive to the "nature of things" in JS. 

Here's what I'm doing:


CreateProject() is the function that does the SPServices call.  I have async set to false in that function.   I will try it in-line tomorrow. 



Dec 2, 2011 at 2:58 PM

OK, see my current attempt below: 

The modal "pleasewaitscreen" didn't show while the SPService call was executing.  (Took about 2 seconds to add the item)

$("#pleasewaitScreen").css('visibility', 'visible').SPServices({
        	operation: "UpdateListItems",
        	async: false,
        	listName: "Project Index",
	batchCmd: "New",
        	valuepairs: [["Title", myProjID], ["Project_x0020_Title", myProjTitle], ["Test_x0020_Manager", pid], ["ESP", myProjESP], ["ESP_thru_FY", fullFY], ["CurrentPhase", '2']],
        	completefunc: function(xData, Status) {
          		mynewID = $(xData.responseXML).find("[nodeName='z:row']").attr("ows_ID"); 			
Dec 2, 2011 at 3:28 PM
This is an example I copied from Marc's docs. I use this a lot and it works great! The WSOutput is any element that can support a table in this case, but it gives you an idea.
waitMessage = "<table width='100%' align='center'><tr><td align='center'><img src='/_layouts/images/gears_an.gif'/></td></tr></table>";

	operation: "GetUserInfo",
	userLoginName: "SHARE1\\demouser",
	completefunc: function (xData, Status) {
		$("#WSOutput").html("").append("<b>This is the output from the GetUserInfo operation:</b>");
		$(xData.responseXML).find("User").each(function() {
			$("#WSOutput").append("<li>ID: " + $(this).attr("ID") + "</li>");
			$("#WSOutput").append("<li>Sid: " + $(this).attr("Sid") + "</li>");
			$("#WSOutput").append("<li>Name: " + $(this).attr("Name") + "</li>");
			$("#WSOutput").append("<li>LoginName: " + $(this).attr("LoginName") + "</li>");
			$("#WSOutput").append("<li>Email: " + $(this).attr("Email") + "</li>");
			$("#WSOutput").append("<li>Notes: " + $(this).attr("Notes") + "</li>");
			$("#WSOutput").append("<li>IsSiteAdmin: " + $(this).attr("IsSiteAdmin") + "</li>");
			$("#WSOutput").append("<li>IsDomainGroup: " + $(this).attr("IsDomainGroup") + "</li>");