mostrando onload con jquery ui dialog iframe ie

i am looking for suggestions/workarounds or better ways to do this This little bit of code works for FF and chrome but hideProgress does not get called in IE

function showPDF(url){
       $("#divId")
               .html('<div id="loading">Loading....</div>
                      <iframe id="modalIframeId" width="100%" height="100%" 
                          src='+url+' marginWidth="0" marginHeight="0" frameBorder="0"
                          scrolling="auto" title="Dialog Title" 
                      onload="hideProgress();">Your browser does not support</iframe>')
               .dialog('open');
        return ;
   }
   function hideProgress(){
       $('#loading').hide();
   }

Gracias por cualquier ayuda

preguntado el 03 de mayo de 12 a las 20:05

What's your question? Are you getting errors in the IE debug console? -

hi no errors and i even had a console.log in the hideProgress and it displayed for FF, chrome but nothing in IE -

2 Respuestas

Try assigning the onload event handler call to #modalIframeId with the .on() or .delegate() function instead of placing it into the <iframe> tag you're inserting. I'm surprised it works in FF and Chrome - most of the time, assigning an event handler like that with any dynamic piece of code doesn't work because of how jQuery interacts with the code of the page. You may also want to experiment with having a unique id for the #modalIframeId iframe - If you were to call the showPDF() function more than once on a page, it would create elements with duplicate id's and that confuses jQuery and produces unexpected results. in my experience, even if you remove #modalIframeId and then re-add it, it may still cause problems. A unique id each time you create it prevents this potential problem.

contestado el 03 de mayo de 12 a las 21:05

so i tried $( "#modalIframeId" ).live("load", function(event){ console.log('modalIframeId onLoad'); $('#loading').hide(); }); and $('#modalIframeId').load(function() { console.log('modalIframeId onLoad'); $('#loading').hide(); }); neither seemed to be called. BTW i thought i was safe using the ID modalIframeId since these were modal dialogs. I just noticed you mentioned .on() or .delegate() . I need to research how to use those. - cachondo

I have tried a couple of things and nothing seems to work. my function now looks like:: function showPDF(url){ $("#divId") .html('<div id="loading">Loading....</div><iframe class="myiframe" width="100%" height="100%" src='+url+' marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" title="Dialog Title" >Your browser does not support</iframe>') .dialog('open'); return ; } And i have tried .on .live nothing seems to work. $('.myiframe').on('load', function () { console.log('ON modalIframeId onLoad'); $('#loading').hide(); }); - cachondo

As the previous answer mentioned the issue here is the fact that you are attaching the event handler inline. The functionality you're looking for can be achieved by simply breaking up your function. I've demonstrated this in this jsFiddle:

http://jsfiddle.net/xyctR/2/

'loaded' is logged in all browsers.

Furthermore, passing 'open' to jQuery UI's dialog method is unnecessary in this case. Just call dialog().

contestado el 04 de mayo de 12 a las 03:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.