Saturday, March 24, 2012

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.

No comments:

Post a Comment