Modalpopup and print: method

..or what I like to refer to as "You .Show me yours and I'll .Show you mine".. Big Smile

I have a modalpopup tied to a button, which is tied to a Panel and when I click the button
the Panel pops up using :

1) the CSS ModalBackground and,
2) display:none; in the HTML (to keep it from blinking)

Worksperfectly..However..when I invoke the same popup from another button (or DDL) using:

modalpopupextender1.Show

A) the CSS ModalBackground doesn't fire and, Surprise
B) the Panel is non-modal, because of A) Tongue Tied
C) I can't close / hide the Panel Crying

I can still use controls on the main form. This is only if Idon't use :

display:none;

in the HTML. If Ido use: display:none;

in the HTML..the panel never displays..?? Confused
Action Items:
1) Can anyone confirm this? Markup is available.
2) If already known, can you provide the answer?

Regards,

B.Griffin Cool

Hmm... I have used the mpe in similar situation but have never had the problem you seem to be having. Could you please post some code. Also try shwing the modal from javascript instead of a server side function and see if it work then.

When you put the display:none on the panel, are you doing this synamically or on the .aspx source page?

the Display:none is in the source..but I think I found the problem

on my own. It needs to be made clear to people not to mix controls

with that"other AJAX toolkit" . Tongue Tied The Panel and its OK / cancel

can be A#####, if all you ever do is invoke it from anevent (button click).

The extender doesn't care, since both controls inherit from the same control class.

If you're going to invoke it incode (.Show / .Hide) its gotta be Asp:Panel

(etc.)..I tried it..it works.. Big Smile

When I change the selected index of a dropdown I always get an error in the dispose method for the ModalPopupBehavior. 'null' is null or not an object. The error appears on the line:

$(_CancelControlID).detachEvent('onclick', _cancelHandler);

I am running version1.0.60731.0 of the Atlas Control Toolkit, my code is as follows. Any ideas?

<%@dotnet.itags.org. Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="AddAssetType.aspx.cs" Inherits="Administrative_Add_AddAssetType" Title="Add\Edit Asset Type" %>

<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="act" %>

<asp:Content ID="Content1" ContentPlaceHolderID="CustomHeadContent" Runat="Server">

window.onload=function()

{

// don't allow user click on add role button until the page is fully loaded or an error will occur.

var btnAddAssetCategory = window.parent.document.getElementById("ctl00_contentPlaceHolder_btnAddAssetCategory");

btnAddAssetCategory.disabled = false;

}

</script>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" Runat="Server">

var longNull = -9223372036854775808;

function reset()

{

resetValidators(Page_Validators);

var txtName = document.getElementById('<%=txtName.ClientID%>');

txtName.value = "";

var txtDescription = document.getElementById('<%=txtDescription.ClientID%>');

txtDescription.value = "";

}

function btnCancelClick()

{

reset();

var lbCancel = window.parent.document.getElementById("ctl00_contentPlaceHolder_lbCancelAssetType");

if(lbCancel != null)

{

lbCancel.click();

}

function btnSaveClick()

{

resetValidators(Page_Validators);

var valid = validate(Page_Validators);

if(valid)

{

var ddlAssetCategory = document.getElementById("ctl00$contentPlaceHolder$ddlAssetCategory");

var catId = ddlAssetCategory[ddlAssetCategory.selectedIndex].value;

PageMethods.Create(catId, onSaveComplete);

}

function onSaveComplete(result)

{

var lblMessage = document.getElementById('<%=lblMessage.ClientID%>');

if("Already Exists" == result)

{

lblMessage.visible = true;

lblMessage.innerHTML = "Cannot Add Asset Type. It already exists";

}

else

{

var btnOk = window.parent.document.getElementById("ctl00_contentPlaceHolder_btnOkAssetType");

var modal = '<%=QueryModalDialog%>';

if(modal == "True")

{

var txtName = document.getElementById('<%=txtName.ClientID%>');

txtName.value = "";

var txtDescription = document.getElementById('<%=txtDescription.ClientID%>');

txtDescription.value = "";

btnOk.click();

}

else

{

window.location = result;

}

function btnNewClick()

{

window.location = "/Web/Administrative/Add/AddAssetType.aspx";

}

function onCancelScript()

{

}

function onOkScript()

{

PageMethods.GetAssetCategories(onGetAssetCategoriesComplete);

}

function onGetAssetCategoriesComplete(result)

{

if(result!="")

{

var ddlAssetCategory = document.getElementById("ctl00$contentPlaceHolder$ddlAssetCategory");

while(ddlAssetCategory.length>0)

{

ddlAssetCategory.remove(0);

}

// Add one empty role at the top

opt = document.createElement("OPTION");

opt.value = "";

opt.text = "";

// TO DO: Add method not in Firefox

ddlAssetCategory.add(opt);

var i = 0;

for(i=0; i<result.length;i=i+2)

{

opt = document.createElement("OPTION");

opt.value = result[i+1]

opt.text = result[i];

// TO DO: Add method not in Firefox

ddlAssetCategory.add(opt);

}

ddlAssetCategory.selectedIndex = (ddlAssetCategory.length -1);

}

</script>

<tr>

<td class="adminTitle" align="center" colSpan="6">Add Asset Type Admin</td>

</tr>

<tr>

<asp:Label ID="lblMessage" runat="server" style="display:inline; position:relative; float:right;" Font-Bold="True" ForeColor="Red"></asp:Label>

</td>

</tr>

<tr>

</td>

</tr>

<tr>

<td>

<asp:TextBox ID="txtName" runat="server" MaxLength="50" />

</td>

<td>

<asp:RequiredFieldValidator ID="NameValidator" runat="server" ValidationGroup="CreateGroup" ControlToValidate="txtName"

ErrorMessage="*" />

</td>

<td nowrap width="100%">Description</td>

<td>

<asp:TextBox ID="txtDescription" runat="server" Width="240px" MaxLength="100" />

</td>

<td>

<asp:RequiredFieldValidator ID="DescriptionValidator" runat="server" ValidationGroup="CreateGroup"

ControlToValidate="txtDescription" ErrorMessage="*" />

</td>

</tr>

<tr>

<td nowrap>Asset Category</td>

<asp:DropDownList ID="ddlAssetCategory" AutoPostBack="True" runat="server"

OnSelectedIndexChanged="ddlAssetCategory_SelectedIndexChanged" />

<asp:Button ID="btnAddAssetCategory" runat="server" Enabled="false"

onmouseover="this.style.cursor='hand'"

style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; BORDER-LEFT-COLOR: activecaption; BORDER-BOTTOM-COLOR: activecaption; WIDTH: 23px; COLOR: white; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: activecaption; FONT-FAMILY: Tahoma; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; HEIGHT: 22px; BACKGROUND-COLOR: #6699ff; BORDER-RIGHT-COLOR: activecaption; BORDER-BOTTOM-STYLE: ridge"

Text="..." ToolTip="Add New Asset Category" />

</td>

<td>Active</td>

</tr>

</TABLE>

<asp:Label ID="lblAssetAttributes" SkinID="labelControl" runat="server" Text="Asset Attributes:"></asp:Label>

<br />

<asp:DataGrid runat="server" ID="DataGrid1" DataKeyField="ID">

<asp:BoundColumn DataField="ID" Visible="false" />

<asp:TemplateColumn HeaderText="Associate?" ItemStyle-Width="30px" ItemStyle-HorizontalAlign="Center">

<asp:CheckBox ID="chkSelection" runat="server" Checked='false'>

</asp:CheckBox>

</ItemTemplate>

</asp:TemplateColumn>

<asp:BoundColumn DataField="Name" HeaderText="Name" />

<asp:BoundColumn DataField="Description" HeaderText="Description" />

</Columns>

</asp:DataGrid>

</div>

<act:ModalPopupExtender ID="ModalPopupExtender1" runat="server">

<act:ModalPopupProperties DropShadow="true" BackgroundCssClass="modalBackground" OkControlID="btnOkAssetCategory"

OnOkScript="onOkScript()" OnCancelScript="onCancelScript()" CancelControlID="lbCancelAssetCategory" TargetControlID="btnAddAssetCategory"

PopupControlID="Panel1" />

</act:ModalPopupExtender>

<asp:Panel ID="Panel1" CssClass="modalPopup" style="display:none" ScrollBars="None" runat="server" BackColor="white" BorderColor="Red" BorderStyle="Solid"

BorderWidth="2px" Height="200px" Width="620px">

<asp:LinkButton ID="btnOkAssetCategory" runat="server" Text="" ForeColor="white" BackColor="white" />

<asp:LinkButton ID="lbCancelAssetCategory" runat="server" Text="" ForeColor="white" BackColor="white" />

</asp:Panel>

</asp:Content>

AddAssetCategory.aspx

<%@dotnet.itags.org. Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="AddAssetCategory.aspx.cs" Inherits="Administrative_Add_AddAssetCategory" Title="Add\Edit Asset Category" %>

<asp:Content ID="Content2" ContentPlaceHolderID="contentPlaceHolder" Runat="Server">

var longNull = -9223372036854775808;

function reset()

{

resetValidators(Page_Validators);

var txtName = document.getElementById('<%=txtName.ClientID%>');

txtName.value = "";

var txtDescription = document.getElementById('<%=txtDescription.ClientID%>');

txtDescription.value = "";

}

function btnCancelClick()

{

reset();

var lbCancel = window.parent.document.getElementById("ctl00_contentPlaceHolder_lbCancelAssetCategory");

if(lbCancel != null)

{

lbCancel.click();

}

function btnSaveClick()

{

resetValidators(Page_Validators);

var valid = validate(Page_Validators);

if(valid)

{

PageMethods.Create(onSaveComplete);

}

function onSaveComplete(result)

{

var lblMessage = document.getElementById('<%=lblMessage.ClientID%>');

if("Already Exists" == result)

{

lblMessage.visible = true;

lblMessage.innerHTML = "Cannot Add Asset Category. It already exists";

}

else

{

var btnOk = window.parent.document.getElementById("ctl00_contentPlaceHolder_btnOkAssetCategory");

var modal = '<%=QueryModalDialog%>';

if(modal == "True")

{

var txtName = document.getElementById('<%=txtName.ClientID%>');

txtName.value = "";

var txtDescription = document.getElementById('<%=txtDescription.ClientID%>');

txtDescription.value = "";

btnOk.click();

}

else

{

window.location = result;

}

function btnNewClick()

{

window.location = "/Web/Administrative/Add/AddAssetCategory.aspx";

}

</script>

<TR>

<TD class="adminTitle" align="center" colSpan="4">Add Asset Category Admin</TD>

</TR>

<TR>

<asp:Label ID="lblMessage" runat="server" style="display:inline; position:relative; float:right;" Font-Bold="True" ForeColor="Red"></asp:Label>

</TD>

</TR>

<TR>

</TD>

<TD>

</TD>

</TR>

<TR>

<TD>

<asp:TextBox ID="txtName" runat="server" MaxLength="50"></asp:TextBox>

<asp:RequiredFieldValidator ID="NameValidator" runat="server" ValidationGroup="CreateGroup" ControlToValidate="txtName"

ErrorMessage="*"></asp:RequiredFieldValidator>

</TD>

<TD nowrap>Description</TD>

<TD>

<asp:TextBox ID="txtDescription" runat="server" Width="240px" MaxLength="100"></asp:TextBox>

<asp:RequiredFieldValidator ID="DescriptionValidator" runat="server" ValidationGroup="CreateGroup" ControlToValidate="txtDescription"

ErrorMessage="*"></asp:RequiredFieldValidator>

</TD>

</TR>

<TR>

<td>Active</TD>

<td>

</td>

<td>

</td>

</TR>

</TABLE>

</asp:Content>

Your example seems quite involved. Could you please post a simple, self-contained, page that demonstrates just the problem you're having? Thanks much!

Hi David,

I reduced the code as much as I can. It looks like I can only get this error when I have a master page. So I am submitting 3 files that you should be able to build and run (AddAsset.aspx, AddAssetCategory.aspx, and MasterPage.Master . When you change the dropdown in AddAsset.aspx you should get the error.

Thanks,

Duncan

MasterPage.Master

@.MasterLanguage="C#" %>

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="act" %>

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

scriptrunat="server">

script>

htmlxmlns="http://www.w3.org/1999/xhtml">

headrunat="server"><title>Untitled Page</title><atlas:ScriptManagerID="scriptManager"runat="server"EnablePartialRendering="true"></atlas:ScriptManager><asp:ContentPlaceHolderrunat="server"id="CustomHeadContent"/>

head>

body><formid="form1"runat="server"><divid="contentContainer"><atlas:UpdatePanelID="upContent"runat="server"Mode="Conditional"><ContentTemplate><divid="content"runat="server"class="content"><asp:ContentPlaceHolderID="contentPlaceHolder"runat="server"/></div></ContentTemplate></atlas:UpdatePanel></div></form>

body>

html>

AddAsset.aspx

<%
@.PageLanguage="C#"MasterPageFile="~/MasterPage.master"Title="Untitled Page" %>
<%
@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="act" %>
<
asp:ContentID="Content1"ContentPlaceHolderID="CustomHeadContent"Runat="Server"><scripttype="text/javascript">
window.onload=
function()
{
// don't allow user click on add assset cat button until the page is fully loaded or an error will occur.var btnAddAssetCategory = window.parent.document.getElementById("ctl00_contentPlaceHolder_btnAddAssetCategory");// null check in case btn is set to not visibleif(btnAddAssetCategory !=null)
{
btnAddAssetCategory.disabled =
false;
}
}
</script>
</
asp:Content>
<
asp:ContentID="Content2"ContentPlaceHolderID="contentPlaceHolder"Runat="Server">
<
scriptrunat="server">protectedvoid Page_Load(object sender,EventArgs e)
{
if (!IsPostBack)
{
this.ddlAssetCategory.Items.Add("a");this.ddlAssetCategory.Items.Add("b");
}
}
///<summary>/// Event handler for index change in the Asset Category Event Handler.///</summary>protectedvoid ddlAssetCategory_SelectedIndexChanged(object sender,EventArgs e)
{
}
</
script>
<
scriptlanguage="javascript">

function
onCancel()
{
}
function
onCancelScript()
{
}
function
onOkAssetCatScript()
{
}

</
script>
<
TABLErunat="server"class="adminTable"id="tblFilter"cellSpacing="1"cellPadding="1"width="720"height="184"border="0"><tr><td>Asset Category</TD><td><asp:DropDownListID="ddlAssetCategory"runat="server"Width="140px"AutoPostBack="True"OnSelectedIndexChanged="ddlAssetCategory_SelectedIndexChanged"/></td><td><asp:ButtonID="btnAddAssetCategory"runat="server"Enabled="false"onmouseover="this.style.cursor='hand'"style="FONT-WEIGHT: bold; FONT-SIZE: 10pt; BORDER-LEFT-COLOR: activecaption; BORDER-BOTTOM-COLOR: activecaption; WIDTH: 23px; COLOR: white; BORDER-TOP-STYLE: ridge; BORDER-TOP-COLOR: activecaption; FONT-FAMILY: Tahoma; BORDER-RIGHT-STYLE: ridge; BORDER-LEFT-STYLE: ridge; HEIGHT: 22px; BACKGROUND-COLOR: #6699ff; BORDER-RIGHT-COLOR: activecaption; BORDER-BOTTOM-STYLE: ridge"Text="..."ToolTip="Add New Asset Category"/></td><td>Asset Type</td><td></td><td></td></tr>

</
TABLE>
<
act:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><act:ModalPopupPropertiesDropShadow="true"BackgroundCssClass="modalBackground"OkControlID="btnOkAssetCategory"OnOkScript="onOkAssetCatScript()"OnCancelScript="onCancel()"CancelControlID="lbCancelAssetCategory"TargetControlID="btnAddAssetCategory"PopupControlID="Panel1"/>
</
act:ModalPopupExtender>
<
asp:PanelID="Panel1"CssClass="modalPopup"style="display:none"ScrollBars="None"runat="server"BackColor="white"BorderColor="Red"BorderStyle="Solid"BorderWidth="2px"Height="200px"Width="620px"><IFRAMEid="iframeAssetCat"scrolling="no"runat="server"height="200px"width="620px"src="/Web/Administrative/Add/AddAssetCategory.aspx?Modal=True"name="addAddAssetCategory"/><asp:LinkButtonID="btnOkAssetCategory"runat="server"Text=""ForeColor="white"BackColor="white"/><asp:LinkButtonID="lbCancelAssetCategory"OnClientClick="onCancel()"runat="server"Text=""ForeColor="white"BackColor="white"/>
</
asp:Panel>
</
asp:Content>AddAssetCategory.aspx<%
@.PageLanguage="C#"MasterPageFile="~/MasterPage.master"Title="Untitled Page" %>
<
asp:ContentID="Content1"ContentPlaceHolderID="CustomHeadContent"Runat="Server">
</
asp:Content>
<
asp:ContentID="Content2"ContentPlaceHolderID="contentPlaceHolder"Runat="Server"><scriptlanguage="javascript">function btnCancelClick()
{
var lbCancel = window.parent.document.getElementById("ctl00_contentPlaceHolder_lbCancelAssetCategory");if(lbCancel !=null)
{
lbCancel.click();
}
}
function btnSaveClick()
{
var btnOk = window.parent.document.getElementById("ctl00_contentPlaceHolder_btnOkAssetCategory");
btnOk.click();
}
</script>
<
imgsrc="save.bmp"onmouseover="this.style.cursor='hand'"onclick="btnSaveClick()"style="border-width:1px; height:24px;"/>
<
imgid="btnCancel"runat="server"src="cancel.bmp"onmouseover="this.style.cursor='hand'"onclick="btnCancelClick()"style="border-width:1px; height:24px;"/>
</
asp:Content>

The TargetControlID of the ModalPopup is inside an UpdatePanel and UpdatePanels can cause some weird behaviors when they tear down and rebuild the page around extenders. If it's not possible to remove it (and with your page structure that wouldn't be trivial), you should be able to make the following changes to ModalPopup.js to avoid the problem during dispose (it works for me):

if (_cancelHandler && $(_CancelControlID)) {
...

if (_okHandler && $(_OkControlID)) {
...

At this point removing the updatepanel probably cannot be done. I will probably go with this change if it is not going to cause any other problems. Do you know if this change will be available with the next release of codeplex?

Thanks,

Duncan

I've just openedwork item 2296 for this.

I've fixed this for the next release of the Toolkit as change 3779:

When connected to controls within an UpdatePanel (a semi-unusual configuration), ModalPopup could hit a null dereference in .dispose if the Ok/Cancel controls had already been removed by the UpdatePanel. Simple change to .dispose to make sure the relevant control look-ups succeed before dereferencing them.

That is great. I can't seem to find change 3779 on codeplex, could you post a link to it. Also, any idea on when this next release will be available?

Cheers,
Duncan

Sorry, found you linkwork item 2296. I will keep my eye out for th next release.

Saturday, March 24, 2012

Modal Popups and the big ".Show"....(method)

ModalDialog dispose null error

Wednesday, March 21, 2012

ModalPopUp and Frame

Modalpopup and print

Blog Archive

About Me