0

I have this snippet of jquery code. I am trying to figure out a way to have a loading gif while this iframe loads. Thanks for any ideas.

var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="/servlet/trainingServlet?method=editDoc&dir=<%=legDir%>&ID=-1" width="100%" height="580"></iframe>')
.dialog({
     autoOpen: false,
     modal: true,
     height: 575,
     width: 680,
     title: 'edit',
     position: [200, 100],
     buttons: {
         Close: function() {
               $( this ).dialog( "close" );
         }
     }
  });
  $dialog.dialog('open');

thanks

randy
  • 1,685
  • 3
  • 34
  • 74

1 Answers1

0

You can reveal a CSS div just after dialog.open() and then have the loadServlet HTML hide it again when it's loaded. Something like:

$dialog.dialog.open();
$("#loading").show()

See How can I create a "Please Wait, Loading..." animation using jQuery?

Community
  • 1
  • 1
redried
  • 76
  • 2
  • thanks, but this does not really show inside the dialog. I guess thats what i am asking how to do it – randy Apr 11 '12 at 17:07
  • For it to show inside the dialog, you'll have to have the servlet's output be ...loading, then replaced in the $(document).ready() block. But it sounds like you already know this. You should look into using $.ajax.load() to fetch the servlet. Then you can – redried Apr 11 '12 at 21:11
  • ..sorry... should say....then you can bind events to the start and end of the ajax call. Again, http://stackoverflow.com/questions/1964839/jquery-please-waiting-loading-animation -- scroll down to the 2nd answer -- explains this quite well. – redried Apr 11 '12 at 21:19