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

ゝ一世哀愁。 2022-08-12 01:05 32阅读 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 iframe = $('<iframe frameborder="0" marginwidth="0" marginheight="0"   width="780"    height="580" allowfullscreen></iframe>');
       iframe.attr("src", "/user/list");

##     ##

## 1 Answer 1 ##

[active][] [oldest][] [votes][]

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>  
     <a title="This answer is useful" rel="nofollow"> up vote</a> 
     <span>0</span> 
     <a title="This answer is not useful" rel="nofollow">down vote</a> 
     <span title="loading when this answer was accepted...">accepted</span> 
    </div> </td> 
   <td> 
    <div> 
     <p>You can reveal a CSS div just after <code>dialog.open()</code> and then have the<code>loadServlet</code> HTML hide it again when it's loaded. Something like:</p> 
     <pre><code><span>$dialog</span><span>.</span><span>dialog</span><span>.</span><span>open</span><span>();</span><span> $</span><span>(</span><span>"#loading"</span><span>).</span><span>show</span><span>()</span></code></pre> 
     <p>See <a href="http://stackoverflow.com/questions/1964839/jquery-please-waiting-loading-animation" rel="nofollow"> jQuery "Please Waiting, Loading..." animation?</a></p> 
    </div> </td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td> 
    <div> 
     <table> 
      <tbody> 
       <tr> 
        <td> 
         <table> 
          <tbody> 
           <tr> 
            <td></td> 
            <td>&nbsp;</td> 
           </tr> 
          </tbody> 
         </table> </td> 
        <td> 
         <div style="display:block"> 
          <span>thanks, but this does not really show inside the dialog. I guess thats what i am asking how to do it</span> –&nbsp; 
          <a title="543 reputation" href="http://stackoverflow.com/users/527387/randy" rel="nofollow">randy</a> 
          <span><a href="http://stackoverflow.com/questions/10106939/how-to-display-a-loading-gif-when-using-jquery-ui-dialog-iframe#comment12954209_10108988" rel="nofollow"><span title="2012-04-11 17:07:10Z">Apr 11 '12 at 17:07</span></a></span> 
          <span title="this comment was edited 1 time"> </span> 
         </div> </td> 
       </tr> 
       <tr> 
        <td> 
         <table> 
          <tbody> 
           <tr> 
            <td></td> 
            <td>&nbsp;</td> 
           </tr> 
          </tbody> 
         </table> </td> 
        <td> 
         <div style="display:block"> 
          <span>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</span> –&nbsp; 
          <a title="76 reputation" href="http://stackoverflow.com/users/1260406/redried" rel="nofollow">redried</a> 
          <span><a href="http://stackoverflow.com/questions/10106939/how-to-display-a-loading-gif-when-using-jquery-ui-dialog-iframe#comment12959866_10108988" rel="nofollow"><span title="2012-04-11 21:11:00Z">Apr 11 '12 at 21:11</span></a></span> 
          <span title="this comment was edited 2 times"> </span> 
         </div> </td> 
       </tr> 
       <tr> 
        <td> 
         <table> 
          <tbody> 
           <tr> 
            <td></td> 
            <td>&nbsp;</td> 
           </tr> 
          </tbody> 
         </table> </td> 
        <td> 
         <div style="display:block"> 
          <span>..sorry... should say....then you can bind events to the start and end of the ajax call. Again,<a title="jquery please waiting loading animation" href="http://stackoverflow.com/questions/1964839/jquery-please-waiting-loading-animation" rel="nofollow">stackoverflow.com/questions/1964839/…</a> -- scroll down to the 2nd answer -- explains this quite well.</span> –&nbsp; 
          <a title="76 reputation" href="http://stackoverflow.com/users/1260406/redried" rel="nofollow">redried</a> 
          <span><a href="http://stackoverflow.com/questions/10106939/how-to-display-a-loading-gif-when-using-jquery-ui-dialog-iframe#comment12960036_10108988" rel="nofollow"><span title="2012-04-11 21:19:14Z">Apr 11 '12 at 21:19</span></a></span> 
         </div> </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

[active]: http://stackoverflow.com/questions/10106939/how-to-display-a-loading-gif-when-using-jquery-ui-dialog-iframe?answertab=active#tab-top
[oldest]: http://stackoverflow.com/questions/10106939/how-to-display-a-loading-gif-when-using-jquery-ui-dialog-iframe?answertab=oldest#tab-top
[votes]: http://stackoverflow.com/questions/10106939/how-to-display-a-loading-gif-when-using-jquery-ui-dialog-iframe?answertab=votes#tab-top