Databases
StackOverflow2013
Postsdbo
POContent within Floating Window using jQuery SimpleModal plugin cannot be replaced after opening twice in IE8
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POContent within Floating Window using jQuery SimpleModal plugin cannot be replaced after opening twice in IE8
    text
    copied!<p>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.</p> <p>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!!!</p> <p>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! :-(</p> <p>I have already tried some hacks, like addClass('fake') / removeClass('fake') on a root element, but did not succeed.</p> <p>Here some test code.</p> <p>Javascript function for opening modal window:</p> <pre><code>showTestModal('DEBUG', '&lt;div id="DivTestRoot"&gt;&lt;div id="DivTest"&gt;OrigValue&lt;/div&gt;&lt;a href="javascript:changeContent(\'\',\'\');""&gt;Click here&lt;/a&gt;&lt;/div&gt;', 100, true, 50, 50); </code></pre> <p>The Javascript function changing the content (called from within floating window):</p> <pre><code>function changeContent() { $('#DivTest').html('ChangedValue'); $('#DivTestRoot').addClass('fake'); $('#DivTestRoot').removeClass('fake'); $('#DivTestRoot').show(); alert($('#DivTest').parent()[0].innerHTML); </code></pre> <p>}</p> <p>The corresponding code for calling jQuery SimpleModal plugin:</p> <pre><code>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 = "&lt;a href='#' title='Close' class='modalCloseX'&gt;x&lt;/a&gt;"; var htmlModal = "&lt;div id='DivTestModal' style='display:none'&gt;&lt;div class='TestModal-top'&gt;&lt;/div&gt;&lt;div class='TestModal-content'&gt;&lt;h1 class='TestModal-title'&gt;" + title + "&lt;/h1&gt;&lt;div class='TestModal-loading' style='display:none'&gt;&lt;/div&gt;&lt;div class='TestModal-errormessage' style='display:none'&gt;&lt;/div&gt;" + "&lt;div class='TestModal-message'&gt;" + data + "&lt;/div&gt;&lt;/div&gt;&lt;div class='TestModal-bottom'&gt;&lt;/div&gt;&lt;/div&gt;"; $(htmlModal).modal({ closeHTML: closeHTML, position: [top, left], overlayId: 'TestModal-overlay', containerId: 'TestModal-container', onOpen: TestModal.open, onShow: TestModal.show, onClose: TestModal.close }); </code></pre> <p>}</p> <p>This is more or less the code copied from <a href="http://www.ericmmartin.com/projects/simplemodal" rel="nofollow noreferrer">http://www.ericmmartin.com/projects/simplemodal</a>:</p> <pre><code>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 &gt; 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 &amp;&amp; $.browser.version &lt; 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 &gt; 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($('&lt;div class="TestModal-error"&gt;').append(contact.message)) .fadeIn(200); } }; </code></pre> <p>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).</p> <p>Thank you for any hint!</p> <p>Cheers, Roger</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload