I'm creating a tasking application that allows a user to create a parent task and then select from a list of retail locations to assign the task to. A 'child' task assignment is created in a list for each location that contains the ID of the 'parent' task. To accomplish this, I'm using a $.each() to iterate over the array of user selections and firing off a SPServices call for each to create that location's task.
Since this process can take a few seconds (the user could select up to about 70 stores), I want to provide some feedback. But, I haven't been able to get ANY UI element to update itself while that process is running, in either Chrome or IE8 (which is what most people in our company are using). So far I've tried:
- An animated .gif - it doesn't actually animate
- Spin.js to simulate a .gif - same problem, doesn't move
- A jQueryUI progress bar that I update at the end of each iteration through the $.each() to reflect the total progress. Though I can verify that the value update is taking effect via debugging, the screen itself doesn't actually update to reflect the change.
So, I'm kind of at a loss as to where to go from here. Anyone else ever tried anything like this? Any ideas as to how to "force" the page to redraw at the end of each iteration?
(Also, I should note that I've read some of the other threads that deal with using a spinner and seen Marc's suggested solution of injecting the spinner into the html of an element and attaching the SPS call to that, but I don't think that will work since I'm calling SPS multiple times.)
Thanks much!