ModalDialog inside updatepanel

I've got a button that shows a modal dialog box. The idea is to add an object to a database, then refresh a listbox on the main page. The dialog works correctly, except with click cmdOk, the server side function is never called. I suspect it's because there's no longer an event handler registered by JS that calls the script to do the postback. I probably need to create a client side script using OnOkScript="onOK()", but I have no idea how to make the page postback to call cmdNewObject_Click without a full postback. Any ideas?

Thanks,

Rick

<asp:LinkButtonID="cmdAddObject"runat="server"Text="Add Object"></asp:LinkButton>

<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server">

<cc1:ModalPopupPropertiesBackgroundCssClass="modalBackground"OkControlID="cmdOk"CancelControlID="cmdCancel"DropShadow="true"PopupControlID="pnlAddObject"TargetControlID="cmdAddObject"></cc1:ModalPopupProperties>

</cc1:ModalPopupExtender>

<atlas:UpdatePanelID="pnlPopup"runat="server"Mode="conditional">

<Triggers>

<atlas:ControlEventTriggerControlID="cmdOk"EventName="Click"/>

</Triggers>

<ContentTemplate>

<asp:PanelID="pnlAddObject"runat="server"CssClass="modalPopup"Style="display: none">

<div>

<divid="ObjectName">

<asp:TextBoxID="txtObjectName"runat="server"></asp:TextBox></div>

<div>

<divid="OkButton">

<asp:ButtonID="cmdOk"runat="server"OnClick="cmdNewObject_Click"Text="New Object"/></div>

<divid="CancelButton">

<asp:ButtonID="cmdCancel"runat="server"Text="Cancel"/></div>

</div>

</div>

</asp:Panel>

</ContentTemplate>

</atlas:UpdatePanel>

Seethis post and maybe consider removing the OkControlID property so the Ok button can postback normally (thereby dismissing the ModalPopup). I'm thinking you may also want to get rid of the UpdatePanel here as I'm not sure it'll ultimately be necessary.

ModalDialog dispose null error

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">

<script type="text/javascript">

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">

<script language="javascript">

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>

<TABLE runat="server" class="adminTable" id="tblFilter" cellSpacing="1" cellPadding="1" width="630" height="164" border="0">

<tr>

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

</tr>

<tr>

<td colspan="6">

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

</td>

</tr>

<tr>

<td colSpan="3">

<img id="btnNew" runat="server" src="http://pics.10026.com/?src=/Web/Images/new.bmp" onmouseover="this.style.cursor='hand'" onclick="btnNewClick()" style="border-width:1px; height:24px;" />

<img id="btnSave" runat="server" src="http://pics.10026.com/?src=/Web/Images/save.bmp" onmouseover="this.style.cursor='hand'" onclick="btnSaveClick()" style="border-width:1px; height:24px;" />

<img id="btnCancel" runat="server" src="http://pics.10026.com/?src=/Web/Images/cancel.bmp" onmouseover="this.style.cursor='hand'" onclick="btnCancelClick()" style="border-width:1px; height:24px;" />

</td>

<td></td>

</tr>

<tr>

<td nowrap>Name</td>

<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>

<td nowrap>

<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></td>

<td>Active</td>

<td><asp:CheckBox ID="chkActive" Checked="true" Enabled="false" runat="server" /></td>

<td></td>

</tr>

</TABLE>

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

<br />

<div style="vertical-align:top; overflow:auto; width:99%;">

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

<Columns>

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

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

<ItemTemplate>

<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">

<IFRAME id="IFRAME1" scrolling="no" runat="server" height="200px" width="620px" src="http://pics.10026.com/?src=/Web/Administrative/Add/AddAssetCategory.aspx?Modal=True" name="addAddAssetCategory" />

<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">

<script language="javascript">

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>

<TABLE runat="server" class="adminTable" id="tblFilter" cellSpacing="1" cellPadding="1" width="590" height="164" border="0">

<TR>

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

</TR>

<TR>

<TD colspan="4">

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

</TD>

</TR>

<TR>

<TD colSpan="3">

<img id="btnNew" runat="server" src="http://pics.10026.com/?src=/Web/Images/new.bmp" onmouseover="this.style.cursor='hand'" onclick="btnNewClick()" style="border-width:1px; height:24px;" />

<img src="http://pics.10026.com/?src=/Web/Images/save.bmp" onmouseover="this.style.cursor='hand'" onclick="btnSaveClick()" style="border-width:1px; height:24px;" />

<img id="btnCancel" runat="server" src="http://pics.10026.com/?src=/Web/Images/cancel.bmp" onmouseover="this.style.cursor='hand'" onclick="btnCancelClick()" style="border-width:1px; height:24px;" />

</TD>

<TD>

</TD>

</TR>

<TR>

<TD nowrap>Name</TD>

<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><asp:CheckBox ID="chkActive" Checked="true" Enabled="false" runat="server" /></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.

ModalDialogExtender wish

I wish we could have a way to have a modaldialog that had a TargetUrl property that could use a separte aspx page as the source of it's ui. I have a page that has several dialogs and having to jam all that code on one page sure is messy.

I wish, I wish.

Why not use an ascx for each modalpopup?

ModalDialog Switch Panel content on click

I was wondering if there was a way to change the inner content of the modal panel when the user clicks a certain button. Is this a job for the UpdatePanel?

As it stands, I'm just binding to a TargetControlID, and I can Ok/Cancel, but would like the content to change onOk.

I'm quite new to this whole atlas way of thinking, so I'm not sure how to co-mingle all this client/server stuff.

Any help would be appreciated.

-Ty

Hi,

you can also use the DynamicPopulateExtender to load new content inside a panel.

Regards
Marc André

ModalPopup and Frames of ModalDialog - not at complete WIDTH ?

Hi, I've got a simple (I hope) problem with ModalPopup. It seems like the Frame of ModalPopUp window is not render with full width.

Check this picture please:

http://www.picspirate.com/links/modalpopup-bug

Could somebody help me please ?

This seems to be an issue with the backgroundcssclass and the size you set it. Since the target control is usually a panel, it is rendered out as a div, wich can overlap its container object, so the backgroundcssclass needs to have the desired width defined as well.

Thank you ! That was it