[#LPP-3539] dhtml: IE6/IE7: <modaldialog> locks up app

OpenLaszlo

dhtml: IE6/IE7: <modaldialog> locks up app

Created: 11/Feb/07 11:22 AM Updated: 13/Dec/07 01:46 PM

Component/s:

Components - LZ

Affects Version/s:

OL4B1

Fix Version/s:

RingDing (4.1)

Time Tracking:

Not Specified

Severity:	Minor
Runtime:	DHTML
Release Note Text:	« Hide Information for the 4.0 release notes: Using <modaldialog> directly causes a Laszlo application to hang in IE 6/7 under dhtml. Here is an example that does not work properly in IE6/dhtml or IE7/dhtml: <canvas> <button onclick="md.open();">Show Modal Dialog</button> <modaldialog id="md" width="200" height="100" title="Modal Dialog"> <button onclick="parent.close()">OK</button> </modaldialog> </canvas> The workaround is to create your own class that derives from <modaldialog>. The above code can be rewritten as: <canvas> <class name="safemodaldialog" extends="modaldialog"/> <button onclick="md.open();">Show Modal Dialog</button> <safemodaldialog id="md" width="200" height="100" title="Modal Dialog"> <button onclick="parent.close()">OK</button> </safemodaldialog> </canvas> The only change is creating a class <safemodaldialog> that derives from <modaldialog>, and changing any references from <modaldialog> to <safemodaldialog>. This second example works in all supported browsers in dhtml and swf. Show » Information for the 4.0 release notes: Using <modaldialog> directly causes a Laszlo application to hang in IE 6/7 under dhtml. Here is an example that does not work properly in IE6/dhtml or IE7/dhtml: <canvas> <button onclick="md.open();">Show Modal Dialog</button> <modaldialog id="md" width="200" height="100" title="Modal Dialog"> <button onclick="parent.close()">OK</button> </modaldialog> </canvas> The workaround is to create your own class that derives from <modaldialog>. The above code can be rewritten as: <canvas> <class name="safemodaldialog" extends="modaldialog"/> <button onclick="md.open();">Show Modal Dialog</button> <safemodaldialog id="md" width="200" height="100" title="Modal Dialog"> <button onclick="parent.close()">OK</button> </safemodaldialog> </canvas> The only change is creating a class <safemodaldialog> that derives from <modaldialog>, and changing any references from <modaldialog> to <safemodaldialog>. This second example works in all supported browsers in dhtml and swf.
Fix in hand:	False

Description

« Hide

I found that the modal dialog portion of window_example.lzx locks up the app on IE6/IE7 in dhtml. <alert> works fine and this derives from <modaldialog>. See the test below. I derived a class called mymodal from modaldialog. <mymodal> works fine in IE6/IE7 but <modaldialog> does not. The demo works fine in swf and in dhtml on FF 1.5/2.0.

(Note: I'm closing ~~LPP-3294~~ which works fine now except for this issue.)

<canvas width="300" height="400">
  <class name="mymodal" extends="modaldialog"/>

  <simplelayout axis="y"/>
  <button onclick="md.open();">modaldialog</button>
  <button onclick="myd.open();">mymodal</button>
  <button onclick="al.open();">alert</button>

  <modaldialog id="md" title="modaldialog" width="200">
    <button onclick="parent.close()">Close</button>
  </modaldialog>

  <mymodal id="myd" title="mymodal" width="200">
    <button onclick="parent.close()">Close</button>
  </mymodal>

  <alert id="al" title="alert" width="200"/>

</canvas>

All

Comments

Work Log

Change History

Sort Order:

Ascending order - Click to sort in descending order

[ Permlink | « Hide ]

Max Carlson - 05/Mar/07 11:31 AM

Please diagnose further.

[ Permlink | « Hide ]

Philip Romanik - 06/Mar/07 07:41 PM

This is some kind of init issue, but I still don't know what. This is what I know so far.

If I change the definition of <modaldialog> from this (I make the dialog initially visible):

    <class name="modaldialog" extends="windowpanel"
        x="${(immediateparent.width - this.width)/2}"
        y="${(immediateparent.height - this.height)/3}"
        focustrap="true"
        visible="false">
   ...

to this:

    <class name="modaldialog" extends="windowpanel"
        x="${(immediateparent.width - this.width)/2}"
        y="${(immediateparent.height - this.height)/3}"
        focustrap="true"
        visible="true">

The problem goes away. This isn't a practical solution but it tells me that the visible="false" is preventing something from initializing properly. I don't know why an object derived from <modaldialog> works properly. The basewindow class overrides setVisible() but I haven't found a problem with it. Since the issue occurs only with IE6/IE7, the definition of setVisible() in LzSprite.js may be involved since it runs code particular to IE.

[ Permlink | « Hide ]

Philip Romanik - 16/Mar/07 12:54 PM

Information for the 4.0 release notes:

Using <modaldialog> directly causes a Laszlo application to hang in IE 6/7 under dhtml. Here is an example that does not work properly in IE6/dhtml or IE7/dhtml:

<canvas>
  <button onclick="md.open();">Show Modal Dialog</button>
  <modaldialog id="md" width="200" height="100" title="Modal Dialog">
    <button onclick="parent.close()">OK</button>
  </modaldialog>
</canvas>

The workaround is to create your own class that derives from <modaldialog>. The above code can be rewritten as:

<canvas>
  <class name="safemodaldialog" extends="modaldialog"/>

  <button onclick="md.open();">Show Modal Dialog</button>
  <safemodaldialog id="md" width="200" height="100" title="Modal Dialog">
    <button onclick="parent.close()">OK</button>
  </safemodaldialog>
</canvas>

The only change is creating a class <safemodaldialog> that derives from <modaldialog>, and changing any references from <modaldialog> to <safemodaldialog>. This second example works in all supported browsers in dhtml and swf.

[ Permlink | « Hide ]

André Bargull - 01/Dec/07 09:26 AM

Actually just a dup of ~~LPP-4916~~. It's the same IE DHTML-Kernel bug.

[ Permlink | « Hide ]

Mamye Kratt - 04/Dec/07 01:02 PM

André Bargull [01/Dec/07 09:26 AM]
Actually just a dup of ~~LPP-4916~~. It's the same IE DHTML-Kernel bug.

[ Permlink | « Hide ]

Mamye Kratt - 13/Dec/07 01:46 PM

(trunk 4 build r7457)
Pounce tested on the following:

XP/IE6/swf/dhtml
XP/IE7/swf/dhtml
XP/FF2/swf/dhtml
OS X/FF2/swf/dhtml
OS X/SAF2/swf/dhtml
OS X/SAF3/swf/dhtml
Linux/FF2/swf/dhtml