[TAPESTRY-1683] Dialog component not working

• Type: Bug
• Status: Closed
• Priority: Trivial
• Resolution: Invalid
• Affects Version/s: 4.1.2
• Component/s: XHR/dhtml/Ajax
• Environment: Internet Explorer 7, Firefox 2.0
• Assignee: Unassigned
• Reporter: Martino Piccinato
• Created: 30/Jul/07 16:32
• Updated: 05/Aug/07 20:33
• Resolved: 05/Aug/07 20:33

Description

The hide()/show() mechanism seems to be not working:

when I click on the link to show the dialog the dialog appears bottom
left and BEHIND the "grey" layer used to disable the rest of the
screen.

I don't have any form whatsoever in my page or in dojo dialog, I
investigated a bit with firebug and this is what appear BEFORE
clicking on "showDialog" link:

<a id="DirectLink" onclick="return
tapestry.linkOnClick(this.href,'DirectLink', false)"
href="/kironweb/StartPage,$DirectLink.sdirect?updateParts=dialogComponent">Toggle
dialog</a>

<script type="text/javascript">
<!--
dojo.addOnLoad(function(e)

{ tapestry.widget.synchronizeWidgetState("dialogComponent", "Dialog", {"bgColor":"black","bgOpacity":0.4000000059604645}

, false);

dojo.widget.byId("dialogComponent").hide();});
// -->
</script>

<div id="dialogComponent" class="dojoDialog" dojoattachpoint="wrapper"
style="overflow: visible; position: absolute; z-index: 999; display:
none;">
<span tabindex="0" dojoonblur="clearTrap" dojoonfocus="trapTabs"
dojoattachpoint="tabStartOuter"/>
<span tabindex="0" dojoonblur="clearTrap" dojoonfocus="trapTabs"
dojoattachpoint="tabStart"/>
<div style="position: relative; z-index: 2;"
dojoattachpoint="containerNode"> DIALOG CONTENT</div>
<span tabindex="0" dojoonblur="clearTrap" dojoonfocus="trapTabs"
dojoattachpoint="tabEnd"/>
<span tabindex="0" dojoonblur="clearTrap" dojoonfocus="trapTabs"
dojoattachpoint="tabEndOuter"/>
</div>
<div class="dialogUnderlay" style="position: absolute; top: 0px; left:
0px; z-index: 998; display: none; background-color: rgb(0, 0, 0);
height: 1px; width: 1px;"/>

This is what is in the DOM Tree AFTER pressing the show dialog button:

<div id="dialogComponent" class="dojoDialog" dojoattachpoint="wrapper"
style="visibility: visible; left: 0px; top: 337.5px;"> DIALOG
CONTENT</div>
<div class="dialogUnderlay" style="position: absolute; top: 190px;
left: 0px; z-index: 998; display: block; background-color: rgb(0, 0,
0); height: 318px; width: 1264px; opacity: 0.4;"/>

So, I can see the dialog content but not positioned and "under" the
"dialogUnderlay" div and the application is just blocked.

It's a very basic example on a very basic page, just following the
tutorial. My cache is disabled;

This is the page I'm using to test this:

TestPage.java

public abstract class TestPage extends BasePage {

@Component(type="Dialog",bindings="hidden=hiddenDialog")
public abstract Dialog getMyDialog();

@InitialValue("true")
public abstract boolean isHiddenDialog();
public void setHiddenDialog(boolean hidden);

public void toggleDialog() {
Dialog dialog = getMyDialog();
if (dialog.isHidden())

{ dialog.show(); }

else

{ dialog.hide(); }

}

}

TestPage.html

<span jwcid="@Border">
<a jwcid="@DirectLink" listener="listener:toggleDialog" updateComponents="myDialog">Toggle dialog</a>
<div jwcid="myDialog" style="display:none;">
DIALOG CONTENT
</div>
</span>

TestPage.page

<?xml version="1.0"?>
<!DOCTYPE page-specification PUBLIC
"-//Apache Software Foundation//Tapestry Specification 4.0//EN"
"http://jakarta.apache.org/tapestry/dtd/Tapestry_4_0.dtd">
<page-specification>
</page-specification>