Content within Floating Window using jQuery SimpleModal plugin cannot be replaced after opening twice in IE8

Question

Hi all

I am using SimpleModal plugin for showing dynamic content within a floating window. On this floating window a Javascript function call has been included (on a click event), which is changing some content on this floating window.

This works all very well with FF. But there is an issue with IE (I have tested with IE8 only): Only at the very first time this modal window has been opened on corresponding page, changing any content (or any other effect like hiding DIVs etc.) from within this Javascript function using jQuery is working. On subsequent calls, if this floating window has been closed in between, IE will just do nothing!!!

It seems that IE does not recognize anymore that some DOM objects have been changed and that these changes should be rendered. When checking the actual content of the DOM object, you will see that the content has been changed, but it is just not rendered! :-(

I have already tried some hacks, like addClass('fake') / removeClass('fake') on a root element, but did not succeed.

Here some test code.

Javascript function for opening modal window:

showTestModal('DEBUG', '<div id="DivTestRoot"><div id="DivTest">OrigValue</div><a href="javascript:changeContent(\'\',\'\');"">Click here</a></div>', 100, true, 50, 50);

The Javascript function changing the content (called from within floating window):

function changeContent() {
    $('#DivTest').html('ChangedValue');
    $('#DivTestRoot').addClass('fake');
    $('#DivTestRoot').removeClass('fake');
    $('#DivTestRoot').show();
    alert($('#DivTest').parent()[0].innerHTML);

}

The corresponding code for calling jQuery SimpleModal plugin:

function showTestModal(title, data, height, showClose, top, left) {
if (title == undefined)
    title = "";
if (data == undefined)
    data = "";
if (height != undefined)
    TestModal.height = height;
if (top == undefined)
    top = 135;
if (left == undefined)
    left = 20;
var closeHTML = "";
if (showClose == undefined || showClose == true)
    closeHTML = "<a href='#' title='Close' class='modalCloseX'>x</a>";
var htmlModal = "<div id='DivTestModal' style='display:none'><div class='TestModal-top'></div><div class='TestModal-content'><h1 class='TestModal-title'>"
    + title + "</h1><div class='TestModal-loading' style='display:none'></div><div class='TestModal-errormessage' style='display:none'></div>"
    + "<div class='TestModal-message'>" + data + "</div></div><div class='TestModal-bottom'></div></div>";
$(htmlModal).modal({
    closeHTML: closeHTML,
    position: [top, left],
    overlayId: 'TestModal-overlay',
    containerId: 'TestModal-container',
    onOpen: TestModal.open,
    onShow: TestModal.show,
    onClose: TestModal.close
});

}

This is more or less the code copied from http://www.ericmmartin.com/projects/simplemodal:

var TestModal = {
message: null,
height: 0,
open: function(dialog) {
    //$(this).parent().appendTo("form");
    $(dialog).parent().appendTo("form");
    // add padding to the buttons in firefox/mozilla
    if ($.browser.mozilla) {
        $('#TestModal-container .TestModal-button').css({
            'padding-bottom': '2px'
        });
    }
    // input field font size
    if ($.browser.safari) {
        $('#TestModal-container .TestModal-input').css({
            'font-size': '.9em'
        });
    }
    var h = 280;
    if (TestModal.height > 0)
        h = TestModal.height;

    var title = $('#TestModal-container .TestModal-title').html();
    $('#TestModal-container .TestModal-title').html('Laden...');
    dialog.overlay.fadeIn(200, function() {
        dialog.container.fadeIn(200, function() {
            dialog.data.fadeIn(200, function() {
                $('#TestModal-container .TestModal-content').animate({
                    height: h
                }, function() {
                    $('#TestModal-container .TestModal-title').html(title);
                    $('#TestModal-container form').fadeIn(200, function() {
                        $('#TestModal-container #TestModal-name').focus();

                        // fix png's for IE 6
                        if ($.browser.msie && $.browser.version < 7) {
                            $('#TestModal-container .TestModal-button').each(function() {
                                if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
                                    var src = RegExp.$1;
                                    $(this).css({
                                        backgroundImage: 'none',
                                        filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + src + '", sizingMethod="crop")'
                                    });
                                }
                            });
                        }
                    });
                });
            });
        });
    });
},
show: function(dialog) {
    $('#TestModal-container .TestModal-close').click(function(e) {
        e.preventDefault();
        if ($('#TestModal-container .TestModal-errormessage:visible').length > 0) {
            var msg = $('#TestModal-container .TestModal-errormessage div');
            msg.fadeOut(200, function() {
                msg.empty();
                contact.showError();
                msg.fadeIn(200);
            });
        }
        else {
            $('#TestModal-container .TestModal-errormessage').animate({
                height: '30px'
            }, contact.showError);
        }
    });
},
close: function(dialog) {
    $('#TestModal-container .TestModal-errormessage').fadeOut();
    $('#TestModal-container .TestModal-title').html('Schliessen...');
    $('#TestModal-container form').fadeOut(200);
    $('#TestModal-container .TestModal-content').animate({
        height: 40
    }, function() {
        dialog.data.fadeOut(200, function() {
            dialog.container.fadeOut(200, function() {
                dialog.overlay.fadeOut(200, function() {
                    $.modal.close();
                });
            });
        });
    });
},
error: function(xhr) {
    alert(xhr.statusText);
},
showError: function() {
    $('#TestModal-container .TestModal-errormessage')

.html($('').append(contact.message)) .fadeIn(200); } };

When the floating window is opened the second time, you will see in the alert box that innerHTML has been adapted, but still the value "OrigValue" is shown. In the first attempt it is always working as it should ("ChangedValue" is shown within DIV).

Thank you for any hint!

Cheers, Roger

Answer 1

Hi

Sorry for my wording - it was getting late yesterday! ;-)

The short, hopefully more clear description of the problem:

A Javascript function gets called from within a SimpleModal window. In this function some content found in this modal window is replaced - e.g. $('#DivTest').html('ChangedValue').

In IE8, if the SimpleModal window is closed and opened again, it is not possible anymore to change any content within this modal window or set elements to invisible etc.. You can see that content and attributes of DOM objects have been changed, in example by making use of alert function, but these changes are not rendered.

This problem does not occur with FF.

Cheers, Roger

Answer 2

Roger,

Try changing your function to:

function changeContent() {
    var container = $('#TestModal-container')[0];
    $('#DivTest', container).html('ChangedValue');
    //$('#DivTestRoot').addClass('fake'); // ? why add class then removeClass?
    //$('#DivTestRoot').removeClass('fake');
    $('#DivTestRoot', container).show();
    alert($('#DivTest', container).parent()[0].innerHTML);
}

I think the issue is with the way you are binding and accessing the content. Let me know if that does not help.

-Eric

Answer 3

Hi Eric

I found out that IE8 does'nt seem to remove DOM objects correctly after closing modal window.

You could see when debugging Javascript that after opening another modal window, old values are still there for the objects, but different content gets rendered! In this situation IE8 "decides" to just do nothing with these objects.

$.modal.close() function of SimpleModal jQuery plugin gets called when closing modal window. In FF all DOM objects seem to be removed correctly from memory, but in IE8 not.

After these findings I decided to implement a different approach - an iFrame within modal window and standard aspx page. Works great.

Cheers, Roger