I decided to use a modal popup to give users a UI to edit date from a GridView (partial code at the botton. I only omitted other text boxes on the panel). My aspx page is a contentpage of an application that uses a Master page. Everything works fine, validation prevents the update button to close the panel and the modal popup functions beautifully, until I need to handle exceptions.
The Update button is not associated to an OK button for the modal popup, yet everytime it dismisses the modal panel no matter what. This seems to be a bug. If we are not using an OK button to dismiss the panel, then the panel should stay until our own code hits a ModalPopupExtender.Hide() instruction. To prevent the user from loosing their entered data when they click on update and an error occurs, I trap errors in try catch blocks, set the error text to a label on the modal panel, update the panel and show it again (since it goes away before I can dismiss it with a .Hide). This last step causes the following error:
A Runtime Error has occured.
Do you wish to debug?
Line: 1931
Error: 'this.get_element().style' is null or not an object
I also get this error somethimes when I show the modal panel without populating it's text boxes, because I want to add a new record.
These bugs have prevented me from finishing my project using this most excellent modal popup feature. Can the dev team fix this bug for the next release of the AjaxToolkit?
void Button_SaveExchangeRate_Click( object sender, EventArgs e )
{
try
{
TextBox_ErrorMessage.Text = "";
if (Page.IsValid)
{
int id = int.Parse( Label_Id.Text );
decimal rate = decimal.Parse( TextBox_Rate.Text.Trim() );
try
{
DBBAL.UpdateExchangeRate( id, rate );
//ModalPopupExtender.Hide();
}
catch (Exception ex)
{
Label_EditPanelErrors.Text = ex.Message;
//UpdatePanel_EditData.Update();
//ModalPopupExtender.Show();
}
}
else
{
Label_ValidationErrors.Text = "Some fields failed validation.";
Label_ValidationErrors.ForeColor= Color.Red;
}
}
catch (Exception ex)
{
Label_EditPanelErrors.Text = ex.Message;
UpdatePanel_EditData.Update();
ModalPopupExtender.Show();
//TextBox_ErrorMessage.Text = ex.Message;
//TextBox_ErrorMess
<!-- Popup Edit Panel -->
<asp:Panel ID="Panel_ExchangeRate" runat="server" CssClass="editPanel" Width="410px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel_EditData" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender"
runat="server" DropShadow="true" EnableViewState="true"
TargetControlID="btnShowPopup"
CancelControlID="Button_CancelExchangeRate"
PopupControlID="Panel_ExchangeRate"
BackgroundCssClass="modalBackground"
RepositionMode="RepositionOnWindowResize"/>
<table width="100%">
<tr>
<td colspan="2">
Record ID:
<asp:Label ID="Label_Id" runat="server" />
<hr id="Hr1" runat="server" style="width: 100%"/>
</td>
<tr>
<td>
<table>
<tr>
<td>
Version Number:<br />
<asp:TextBox ID="TextBox_Version" runat="server" MaxLength="6" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator_TextBox_Version"
runat="server" ControlToValidate="TextBox_Version"
ErrorMessage="Version is Required"
ValidationGroup="ExchangeRateValidationGroup"> *
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator_TextBox_Version"
runat="server" ControlToValidate="TextBox_Version"
ErrorMessage="Version format must be YYYYMM or BUDGET"
ValidationExpression="^\d{4}(0[1-9]|1[0-2])$|^[a-zA-Z][a-zA-Z\d]{1,5}$|^[Bb][Uu][Dd][Gg][Ee][Tt]$"
ValidationGroup="ExchangeRateValidationGroup"> *
</asp:RegularExpressionValidator>
</td>
<td>
</td>
</tr>
<tr>
<td class="editPanel_Footer">
<hr ID="Hr2" runat="server" style="width: 100%" />
<asp:LinkButton ID="Button_SaveExchangeRate" runat="server"
CausesValidation="true" Text="Save"
ValidationGroup="ExchangeRateValidationGroup" />
<asp:LinkButton ID="Button_CancelExchangeRate" runat="server"
CausesValidation="false" Text="Cancel" />
<asp:UpdateProgress ID="EditPanelProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel_EditData" >
<ProgressTemplate>
<div class="progressAnimationDiv>
Updating Record...
<img id="EditPanelAnimation" runat="server" alt="Updating Record..." src="~/Images/EditPanelAnimation.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</td>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Comments: This ticket was filed for a pre-15.1 version of AJAX Control Toolkit. If this is still an issue in v15.1 or later, please create a new inquiry.
The Update button is not associated to an OK button for the modal popup, yet everytime it dismisses the modal panel no matter what. This seems to be a bug. If we are not using an OK button to dismiss the panel, then the panel should stay until our own code hits a ModalPopupExtender.Hide() instruction. To prevent the user from loosing their entered data when they click on update and an error occurs, I trap errors in try catch blocks, set the error text to a label on the modal panel, update the panel and show it again (since it goes away before I can dismiss it with a .Hide). This last step causes the following error:
A Runtime Error has occured.
Do you wish to debug?
Line: 1931
Error: 'this.get_element().style' is null or not an object
I also get this error somethimes when I show the modal panel without populating it's text boxes, because I want to add a new record.
These bugs have prevented me from finishing my project using this most excellent modal popup feature. Can the dev team fix this bug for the next release of the AjaxToolkit?
void Button_SaveExchangeRate_Click( object sender, EventArgs e )
{
try
{
TextBox_ErrorMessage.Text = "";
if (Page.IsValid)
{
int id = int.Parse( Label_Id.Text );
decimal rate = decimal.Parse( TextBox_Rate.Text.Trim() );
try
{
DBBAL.UpdateExchangeRate( id, rate );
//ModalPopupExtender.Hide();
}
catch (Exception ex)
{
Label_EditPanelErrors.Text = ex.Message;
//UpdatePanel_EditData.Update();
//ModalPopupExtender.Show();
}
}
else
{
Label_ValidationErrors.Text = "Some fields failed validation.";
Label_ValidationErrors.ForeColor= Color.Red;
}
}
catch (Exception ex)
{
Label_EditPanelErrors.Text = ex.Message;
UpdatePanel_EditData.Update();
ModalPopupExtender.Show();
//TextBox_ErrorMessage.Text = ex.Message;
//TextBox_ErrorMess
<!-- Popup Edit Panel -->
<asp:Panel ID="Panel_ExchangeRate" runat="server" CssClass="editPanel" Width="410px" style="display:none">
<asp:UpdatePanel ID="UpdatePanel_EditData" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Button id="btnShowPopup" runat="server" style="display:none" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender"
runat="server" DropShadow="true" EnableViewState="true"
TargetControlID="btnShowPopup"
CancelControlID="Button_CancelExchangeRate"
PopupControlID="Panel_ExchangeRate"
BackgroundCssClass="modalBackground"
RepositionMode="RepositionOnWindowResize"/>
<table width="100%">
<tr>
<td colspan="2">
Record ID:
<asp:Label ID="Label_Id" runat="server" />
<hr id="Hr1" runat="server" style="width: 100%"/>
</td>
<tr>
<td>
<table>
<tr>
<td>
Version Number:<br />
<asp:TextBox ID="TextBox_Version" runat="server" MaxLength="6" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator_TextBox_Version"
runat="server" ControlToValidate="TextBox_Version"
ErrorMessage="Version is Required"
ValidationGroup="ExchangeRateValidationGroup"> *
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator_TextBox_Version"
runat="server" ControlToValidate="TextBox_Version"
ErrorMessage="Version format must be YYYYMM or BUDGET"
ValidationExpression="^\d{4}(0[1-9]|1[0-2])$|^[a-zA-Z][a-zA-Z\d]{1,5}$|^[Bb][Uu][Dd][Gg][Ee][Tt]$"
ValidationGroup="ExchangeRateValidationGroup"> *
</asp:RegularExpressionValidator>
</td>
<td>
</td>
</tr>
<tr>
<td class="editPanel_Footer">
<hr ID="Hr2" runat="server" style="width: 100%" />
<asp:LinkButton ID="Button_SaveExchangeRate" runat="server"
CausesValidation="true" Text="Save"
ValidationGroup="ExchangeRateValidationGroup" />
<asp:LinkButton ID="Button_CancelExchangeRate" runat="server"
CausesValidation="false" Text="Cancel" />
<asp:UpdateProgress ID="EditPanelProgress" runat="server" AssociatedUpdatePanelID="UpdatePanel_EditData" >
<ProgressTemplate>
<div class="progressAnimationDiv>
Updating Record...
<img id="EditPanelAnimation" runat="server" alt="Updating Record..." src="~/Images/EditPanelAnimation.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</td>
</tr>
</td>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
Comments: This ticket was filed for a pre-15.1 version of AJAX Control Toolkit. If this is still an issue in v15.1 or later, please create a new inquiry.