In IE8, yepnope not loading resource within iframe at 1st attempt-Collection of common programming errors

2 years ago
admin
3 minutes

I am using jquery modal dialogue, within dialogue we embedded iframe. iframe contain button “Show search result”

at 1st attempt of “Show search result” button click, nothing happen. My result is not rendering in table (probably server request is not firing).

It appears only when I switched to other tab of browesr, 2nd time onwards table rendering properly.

var __run = function(getData) {
    yepnope({
      test : $.fn.flexigrid,
      nope : [ 'www/css/flexigrid.css', '/www/javascripts/flexigrid.js'],
      complete : getData
    });

When __run fucntion called 1st time in IE8 then getData (passed function) should execute but not able to execute it.

This issue specific to IE8

How to deal with above issue ? any quick suggestion ?

In other browser like firefox and chrome everything working fine.

If I changed modal flag to false then 1st attempt of “Show search result” button click event, I am getting result in IE8, but we need modal dialogue so this is not good solution.

myWindow.dialog({
                modal : false,

Updated : Added Jquery UI dialogue code

    NewModalUI.popWindow = function($){
    var mWindow = null, mFrame;
    var build = function(){
        mWindow = $('').appendTo($('body'));
        mFrame = mWindow.find('iframe')
    };
    var isReady = function(){
        return mWindow;
    };
    var isVisible = function(){
        return (!mWindow.is(':hidden'))
    };
    var close = function(){
        __log("Window closed ...");
        mFrame.attr('src', '');
        mWindow.dialog('close')
    };
    var open = function(url){
        if(!isReady()){
            build()
            mFrame.bind('load.modalWindow',function(){
                var $div = mFrame.contents().find('.submitContainerDiv');
                if($div.find('.submitBtns').find('input').length == 1){
                    $div.hide()
                }
            })
            mFrame.attr('src', url)
            mWindow.dialog({
                modal : true,
                height: $(window).height()-100,
                minHeight: '250',
                maxHeight: '90%',
                width:'80%',
                minWidth : '50%',
                maxWidth:'90%',
                buttons : { 
                    'Cancel':function(){
                        $(this).dialog('close')
                    }
                },
                beforeClose : function(){
                    mFrame.attr('src', '')
                }
            })
        }

        if(!isVisible()){
            mFrame.attr('src', url)
            mWindow.dialog('open')
        }else{
            mFrame.attr('src', url)
        }
    };
    return {
        window: mWindow,
        build : build,
        isReady : isReady,
        isVisible : isVisible,
        close : close,
        open : open
    }
}(jQuery);

Also observed IE8 generated html code

Either IE8 or yepnope adding onload event attribute with null value to script tag Ex.

2nd time onwards onload event attribute value changing for resources loaded by yepnope & search result populated in grid. Ex.

Hope for the best solution

Thanks in advance.

  1. I made an example that should be self-explanatory at http://jsfiddle.net/uUpfg/ I used jQuery 1.9.1 and jQuery UI 1.9.2

    HTML

    Show dialog
I am the dialog ;)

    JavaScript

    ;(function ( $, window, document, undefined ) {

    $('#show-dlg').on('click', function() {

        var id = $(this).attr('href');

        $(id).dialog({
            bgiframe: true,
            resizable: false,
            draggable: false,
            modal: true
        });

        return false;
    });


})( jQuery, window, document );

    CSS

    .hide {
    display: none;
}

Originally posted 2013-11-29 06:18:03.