how to display a loading gif when using jquery ui dialog iframe

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');

var iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0"   width="780"    height="580" allowfullscreen></iframe>');
   iframe.attr("src", "/user/list");

    var dialog = $("<div></div>").append(iframe).appendTo("body").dialog({
        autoOpen: false,
        modal: true,
        resizable: false,
        width: "auto",
        height: "auto",
        close: function () {
            iframe.attr("src", "");
        }
    });
    $(".thumb a").on("click", function (e) {
        e.preventDefault();
        var src = $(this).attr("href");
        var title = $(this).attr("data-title");
        var width = $(this).attr("data-width");
        var height = $(this).attr("data-height");
        iframe.attr({
            width: +width,
            height: +height,
            src: src
        });
        dialog.dialog("option", "title", title).dialog("open");
    });

1 Answer 1

active oldest votes

up vote 0 down vote accepted

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

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

See jQuery "Please Waiting, Loading..." animation?

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,stackoverflow.com/questions/1964839/… -- scroll down to the 2nd answer -- explains this quite well. – redried Apr 11 '12 at 21:19