I've got a page that when a user clicks "Finished", several web service methods are called in the background and then when everything finished successfully the window is closed. Right now I'm using the Jquery BlockUI plugin to display a message that says "Please wait..." and it work's great. Now I want to display a little GIF animation in that message (a little progress spinner to say that the page is still executing). The following works (kind of):
$.blockUI({ message: '<br /><img src="CPSupport/SiteArt/progress.gif" alt="" /><br /><h3>Please wait...</h3>' });
The .GIF is display but does not animate because the form is submitted right away. I know this could be solved with AJAX but I read also that putting the GIF into an iframe would also work. The iframe idea seemed like less work if I can get it work the way I need. Here is what I'm trying now:
$.blockUI({ message: '<br /> <iframe src="CPSupport/SiteArt/progress.gif" height="60px" width="60px" scrolling="no" frameborder="0" id="progressIframe" /><br /><h3>Please wait...</h3>' });
However now I don't see a GIF at all, nor the iframe. Can anyone tell me what I'm doing wrong or if this would even work? I just need the GIF to animate in the BlockUI "message" until the window closes.
Many thanks in advance for any tips/advice! -Lloyd
The src attribute specifies the URL of the document to show in an iframe. That is, you need to show a webpage, not a graphic.
Make a simple html wrapper for your gif, and load that in your iframe. Now wrap an external DIV element around the iframe. Finally, call that whole thing using Element blocking: http://jquery.malsup.com/block/#element