Confirmbuttonextender how to stop confirm if validation fails

I am trying to use the confirmbuttonextender, but I only want to show the confirm message if some validation passes. I have a button that calls a javascript function to perform some validation. If validation fails the javascript returns false and would stop the button from submiting. I tried setting the ConfirmOnFormSubmit=true, but when I do this the javascript function doesn't seem to be called. When it is false the confirm message appears, then I click OK, then the javascript is called, but the button still submits even thought the function returned false. Any help would be appreciated, I haven't found any working example.

Thanks,
Matt

My code:

<ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" TargetControlID="btnDelete" runat="server"
ConfirmText="Are you sure you want to delete?" ConfirmOnFormSubmit=true ></ajaxToolkit:ConfirmButtonExtender>
<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="DeleteEquipFunction();" />

<script type="text/javascript">
function DeleteEquipFunction()
{
//some validation
return false;
}
</script>

I think, if this case you should not use ConfirmButtonExtender, because AJAX creates a function on init event of page, which is then binded to command button.

Can you change your code like this.

<asp:Button ID="btnDelete" runat="server" Text="Delete" OnClientClick="return DeleteEquipFunction();" />

<script type="text/javascript">
function DeleteEquipFunction()
{
//some validation
if(validated) //validated is true
{
return confirm("Are you sure you want to delete?");
}
return false;
}
</script>

Thanks Ritesh.

I wound up following your suggestion and it works good.

I thought the ConfirmOnFormSubmit property was added to the confirmbutton so the confirm would not as the last action before server submission, but it seems to fire before onClientClick, and therefore you can't seem to stop it. I love the Ajax toolkit, but it seems there are some obscure properties of these controls that are not clearly defined on Microsofts website or any book I have found.

ConfirmButtonExtender

i want to validate data first. if the data is valid then i want ConfirmButtonExtender message like ARE YOU SURE YOU WANT TO ADD?
HOW CAN I DO IT?
ANY HELP WILL BE GREATFUL

Hi Sahmed04,

Here is the sample which I attach the ConfirmButtonExtender's TargetControlID to a hidden Button. We suggest that you should wholly copy it to your project and have a test.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"></script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1" ErrorMessage="RequiredFieldValidator"></asp:RequiredFieldValidator> <ajaxToolkit:ConfirmButtonExtender ID="ConfirmButtonExtender1" runat="server" ConfirmText="Are you sure to submit?"TargetControlID="Button1"> </ajaxToolkit:ConfirmButtonExtender> <div style="display:none"> <asp:Button ID="Button1" runat="server" Text="Button" /> </div><input id="btnFake" type="button" value="Submit" onclick="toSubmitForm()" /> <script language="javascript"> function toSubmitForm(){if(typeof(Page_ClientValidate)=='function'){ if(Page_ClientValidate()) { $get("<%=Button1.ClientID%>").click(); } } } </script> </form></body></html>

Best regards,

Jonathan

Confirmation message on ReorderList

Using the ReorderList's drag and drop capability is awesome. However, is there to prompt for a confirmation message box before the drop?

What are the possible values for the "OnItemReorder" event? Is this the right event to call?

thanks!

On ItemReorder will fire on the server, so it's too late to put up a confirmation message.

To enable this sort of behavior, you'll need to make modifications to DropWatcherBehavior.js in the toolkit source.

This simplest way is to modify the drop method in DropWatcherBehavior. To make it more sophisticated, maybe add a property to DropWatcherBehavior that lets you specify text here, and then only do the confirm if the text is present, etc.

this.drop = function(dragMode, dataType, data) {if (window.confirm("DropHere?")) { _dragDropList.drop(dragMode, dataType, data);this.doPostBack(data.id); } }

When I make this change, do I have to rebuild the .dll file for this control? any advice?
Yes you'll need to rebuild the AtlasControlToolkit.dll to incorporate the JS change.

sburke,

I finally gotten to make this change. Now, I have a problem. WHen I hit Cancel on the confirmation message, it doesn't put the order list back to its original order. It just freeze there with the drag outline box on the screen. How would I make this change to restore it to its original state?

thanks!

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.