Saturday, March 24, 2012

Confirmation message on modal popup after postback, before it closes

A modalpopup closes immediately after a postback...but is there anyway that I can display a confirmation message on the modalpopup panel before the modalpopup closes?

Hi champ1979,

There are probably a few different ways you could do this. I think the easiest would be to use fake Ok/Cancel buttons and hide the real OK/Cancel buttons (using "display: none"). Then when the fake buttons are clicked, have them display the confirmation and finally call .click() on the real button.

Thanks,
Ted

I'm not quite sure I understand. You mean display the confirmation message before the real button is processed? How would I know if the action was a success or a failure? Or did I miss what you were trying to say?

Also, do I have to do this via JavaScript?

Thanks!


Could you perhaps give a code snippet? It seems like the moment I have a postback, the panel disappears, even if the postback trigger control (the OkButton) is not associated with the modalPopup OkButton attribute. I would like the Panel to stay open until the user manually clicks on a "close" button or icon.


Thanks in advance!


Hi champ1979,

I guess I'm not quite following what you're trying to accomplish here. There's no way to stop aModalPopup from closing after a full postback (because it wasn't actually opened in that postback yet). To work around this, you should wrap any of your controls that have server events inside anUpdatePanel (but theUpdatePanelshould still be inside the popup). I'm also not sure kind of confirmation message we're talking about. Here's some code showing what I think you might have in mind:

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Other_Click(object sender, EventArgs e) { Other.Style[HtmlTextWriterStyle.Display] = "none"; }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title>Test Page</title></head><body><form runat="server"><div> <atlas:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" /> <asp:LinkButton ID="Open" runat="server" Text="Open" /> <asp:Panel ID="Popup" runat="server" CssClass="modalPopup" style="display:none; border:solid 1px #000000;"> <atlas:UpdatePanel ID="Update" runat="server" Mode="Always"> <ContentTemplate> Popup!<br /> <asp:Button ID="Other" runat="server" Text="Other" OnClick="Other_Click" /><br /> </ContentTemplate> </atlas:UpdatePanel> <asp:Button ID="FakeOk" runat="server" Text="OK" OnClientClick="if (confirm('Close popup?')) { $('Ok').click(); } return false;"></asp:Button> <asp:Button ID="FakeCancel" runat="server" Text="Cancel" OnClientClick="if (confirm('Close popup?')) { $('Cancel').click(); } return false;"></asp:Button> <asp:Button ID="Ok" runat="server" Text="OK" Style="display: none;"></asp:Button> <asp:Button ID="Cancel" runat="server" Text="Cancel" Style="display: none;"></asp:Button> </asp:Panel> <atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server"> <atlasToolkit:ModalPopupProperties TargetControlID="Open" PopupControlID="Popup" OkControlID="Ok" CancelControlID="Cancel" /> </atlasToolkit:ModalPopupExtender></div></form></body></html>

Hopefully this helps. If you have any other questions, just keep posting.

Thanks,
Ted

Thanks for your response and sorry for the confusion. What I really meant by a confirmation message is,after a user presses the OkButton, I want a message to be displayed to the user before the popup closes. Something like "Your comment was posted successfully. The moderator will have to approve it before it appears", or "There was an en error posting your comment. Please try again later".

I guess my terminology was wrong, but I think it should be clearer now.

Please let me know if this sort of thing is possible.

Thanks!


OK, actually the update panel did the job. Thanks :-)

Hi,

I'm glad I could help.

Thanks,
Ted


Ted,

Along these same lines. If I have a radio button list and a drop down list inside an update panel which are all in the Modalpopup, theoretically, I should be able to click a value in the rbl and have it update the ddl's values, without it hiding my modal popup? I am unable to get that to work so far.

Thanks,

Shep


Ted Glaza [MSFT]:

Hi champ1979,

I guess I'm not quite following what you're trying to accomplish here. There's no way to stop aModalPopup from closing after a full postback (because it wasn't actually opened in that postback yet). To work around this, you should wrap any of your controls that have server events inside anUpdatePanel (but theUpdatePanelshould still be inside the popup).

This suggestion is exactly what I was looking for, Ted, the only problem is that I am having some trouble implementing it. I was hoping maybe you or another member might be able to help. I have a modalpopup with two list boxes and two buttons: add and remove. The add button should move the selections from listbox #1 to listbox #2 and the remove button obviously does the opposite. I have two server side events wired up to the buttons. All of this is wrapped up in an UpdatePanel, which is inside a regular Panel that is extended by a ModalPopup control. The problem is that clicking one of the buttons nevertheless causes the modalpopup to disappear. I would expect that the postback would cause a partial page render just inside the UpdatePanel, but that does not seem to be occurring. Here is the code in question:

1 <asp:Panel ID="EmailRecipientsPopupPanel" runat="server" Width="600px" Height="410px" style="display: none" CssClass="modalPopup">23 <asp:SqlDataSource ID="RecipientsEmailAddressesDataSource" runat="server" ConnectionString='<%$ ConnectionStrings:PollingDBConnectionString%>' SelectCommand="SELECT ea.[EmailAddressId], ea.[EmailAddress] FROM EmailAddresses ea WHERE ea.[EmailAddressId] NOT IN (SELECT r.[EmailAddressId] FROM Recipients r WHERE r.[RecipientsGroupId] = @.Recipients);">4 <SelectParameters>5 <asp:ControlParameter ControlID="EmailRecipients" Name="Recipients" PropertyName="Value" Type="Int32" />6 </SelectParameters>7 </asp:SqlDataSource>8 <asp:SqlDataSource ID="EmailRecipientsDataSource" runat="server" ConnectionString='<%$ ConnectionStrings:PollingDBConnectionString%>' SelectCommand="SELECT ea.[EmailAddressId], ea.[EmailAddress] FROM Recipients r JOIN EmailAddresses ea ON r.[EmailAddressId] = ea.[EmailAddressId] WHERE r.[RecipientsGroupId] = @.Recipients;">9 <SelectParameters>10 <asp:ControlParameter ControlID="EmailRecipients" Name="Recipients" PropertyName="Value" Type="Int32" />11 </SelectParameters>12 </asp:SqlDataSource>13 <asp:Label ID="EmailRecipientsPopupPanelLabel" runat="server" CssClass="popupWindowLabel">Edit email recipients<br /><br /></asp:Label>14 <asp:UpdatePanel ID="EmailRecipientsUpdatePanel" runat="server">1516 <ContentTemplate>1718 <table border="0" width="100%" align="center">1920 <thead>2122 <tr>2324 <th align="center">Email Addresses</th>25 <th></th>26 <th align="center">Email Recipients</th>2728 </tr>2930 </thead>31 <tbody>3233 <tr>3435 <td align="right"><asp:ListBox ID="RecipientsEmailAddressesListBox" runat="server" SelectionMode="Multiple" DataSourceID="RecipientsEmailAddressesDataSource" DataTextField="EmailAddress" DataValueField="EmailAddressId" Rows="20" Width="100%" /></td>36 <td align="center" valign="middle"><asp:Button ID="AddRecipientsButton" runat="server" Text=">>" OnClick="AddRecipientsButton_Click" /><br /><br /><asp:Button ID="RemoveRecipientsButton" runat="server" Text="<<" OnClick="RemoveRecipientsButton_Click" /></td>37 <td align="left"><asp:ListBox ID="EmailRecipientsListBox" runat="server" SelectionMode="Multiple" DataSourceID="EmailRecipientsDataSource" DataTextField="EmailAddress" DataValueField="EmailAddressId" Rows="20" Width="100%" /></td>3839 </tr>4041 </tbody>4243 </table>4445 </ContentTemplate>4647 </asp:UpdatePanel>48 <asp:Button ID="EmailRecipientsOk" runat="server" Text="OK" OnClick="EmailRecipientsOk_Click" /> <asp:Button ID="EmailRecipientsCancel" runat="server" Text="Cancel" OnClick="EmailRecipientsCancel_Click" />4950 </asp:Panel>51 <ajax:ModalPopupExtender ID="EmailRecipientsPopup" runat="server" TargetControlID="EmailRecipientsPopupLink" PopupControlID="EmailRecipientsPopupPanel" BackgroundCssClass="modalBackground" />
I'm hoping I'm just doing something wrong and I can actually get this to work the way I want.


I was just thinking about something. Could the fact that I have this UpdatePanel nested in another one have something to do with it? If I had to guess I would imagine that nesting an UpdatePanel in another UpdatePanel probably doesn't "hide" the nested UpdatePanel's child controls from the parent UpdatePanel's. Do I need to disable ChildControlsAsTriggers and manually add all of the controls that should cause postbacks?
Okay, nevermind. I mistakenly thought that the UpdateMode is Conditional by default. It looks like it is "Always." I changed the UpdateMode of the parent UpdatePanel to Conditional and everything worked as expected.

Ok that has been driving me crazy for the last few days. Thanks MetalJon, that solved my issue. I have several update panels within each other and setting Conditional in the parent and parent/parent update panel did the trick.

No comments:

Post a Comment