This project has moved and is read-only. For the latest updates, please go here.

Adding a spinner (or progress bar) when updating

Jun 7, 2012 at 7:57 PM

Hi!  I have tried recently to use the SharePoint spinner when updating items since I have so many items to update (sometimes as high as ~2-3 minutes wait time).  One of the places where I am updating, I am using PreSaveAction to run the code when the user clicks the ok button on a SharePoint item edit form.  I have tried hiding/unhiding the spinner which doesn't work at all.  In another 2 places, I have 2 approval .aspx pages that have an approval form and another webpart on it.  I can get the spinner to show if I have an alert popup first but the spinner freezes.  When I removed the alert the spinner didn’t show at all. 

Do you know how I can make the spinner work?  Would it make a difference to redirect to another page?  When SPServices are used does it cause the page to block it when the web service call is made? 

Peace and Blessings,

Nikkia Carter

Jun 12, 2012 at 1:00 PM


You might want to think about how you are batching the requests to do the updates. You can send multiple item updates in one batch.

That said, I have always struggled to get good spinner behavior, especially in IE. Here's an example from my test harness that works well, though:

divId      = "#WSOutput";
waitMessage     = "<table width='100%' align='center'><tr><td align='center'><img src='/_layouts/images/gears_an.gif'/></td></tr></table>";
  operation: "UpdateListItems",
  listName: "37920121-19B2-4C77-92FF-8B3E07853114",
  ID: ID,
  valuepairs: [["Title", now], ["Country", 3], ["Lead_x0020_Date", "2009-08-25 14:24:48"]],
  completefunc: function (xData, Status) {
   var out = $().SPServices.SPDebugXMLHttpResult({
    node: xData.responseXML,
    outputId: divId
   $(divId).html("").append("<b>This is the output from the UpdateListItems operation:</b>" + out + now);
   $(divId).append("<b>Refresh to see the change in the list above.</b>");

In other cases, I've used a jQueryUI .dialog() to show a wait message and a spinner.


Jun 13, 2012 at 3:01 AM

Thanks Marc!  I have tried the dialog with no success.  Again, it only shows up when an alert fires first but as soon as you click ok, the spinner freezes until the operation is over.  I have two large list, one is over 13000 items and a few small lists that are being updated.  I am using the following for the dialog:

var $dialog = $('<div></div>')
  autoOpen: false,
         title: 'Loading PDF File...',
            modal: true

Then I use this in the else statement and in the completefunc: function(){}:


Like so:

completefunc: function(xData, Status){

I don't understand why it only shows up if you throw up an alert first.  I guess because it stops the operation for a sec... idk.  Am I missing something?

Peace and Blessings,