Conditional ConfirmButtonExtender

Question

I am trying to bypass the ConfirmButtonExtender depending on the value of another field in the page.

Basically, when a user click on my "Cancel" button, I normally display a modalpopup using the confirmbuttonextender and the modalpopupextender to display a dialog box confirming that they wish to cancel any changes they have made and return to the prior screen. If they click Yes, the button's onclick event fires which calls some code in the codebehind and redirects the user to another page. If they click no, it just returns to the same page, with no changes.

However, in some situations, I know that my user is unable to perform any edits (they aren't allowed to) and for those users, I don't want to display the "Are you sure you want to leave you will loose any changes" dialog box.

I've set a hidden checkbox field named "cbAllowEdit" to indicate whether the user is allowed to edit the fields or not.

I was trying to use the technique found at link text to get this working but it just doesn't even seem to be firing the button's onclientclick event at all.

Here is my code.

ASPX & Javascript

    <asp:CheckBox ID="cbAllowEdit" runat="server" Checked="true" />
         <asp:Button ID="btnCancel" runat="server" CausesValidation="false" 
    OnClick="btnCancel_Click" Text="Cancel" OnClientClick="disableSubmit();return false;"  />
<ajaxToolKit:ConfirmButtonExtender ID="ConfirmButtonExtenderbtnCancel" 
    runat="server" DisplayModalPopupID="ModalPopupExtenderbtnCancel" 
    TargetControlID="btnCancel" BehaviorID="ConfirmButtonExtenderbtnCancel" />
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtenderbtnCancel" runat="server" 
    BackgroundCssClass="modalBackground" CancelControlID="btnCancelCancel" 
    OkControlID="btnConfirmCancel" PopupControlID="ConfirmCancelPanel" 
    TargetControlID="btnCancel" />
<asp:Panel ID="ConfirmCancelPanel" runat="server" CssClass="modalWindow" 
            Height="200" Width="450">
            <p class="confirmMessage">
                Are you sure you want to navigate away from this record?
            </p>
            <div align="center">
                <p class="feedbackError">If you have made any changes to the record since the last time
                you saved, they will be lost.</p>
                <asp:Button ID="btnConfirmCancel" runat="server" Text="Yes" Width="75" />
                <asp:Button ID="btnCancelCancel" runat="server" Text="No" Width="75" />
            </div>
        </asp:Panel>
        <script type="text/javascript">
            function disableSubmit() {
                if (document.getElementById('<%= cbAllowEdit.ClientID %>').checked) {
                    return checkSubmit();
                }
                else {
                    return true;
                }
            }

            function checkSubmit() {

                var confirmButton = $find('ConfirmButtonExtenderbtnCancel');

                confirmButton._displayConfirmDialog();

            }
        </script>

Code behind:

/// <summary>
        /// Runs when the btnCancel button is clicked.
        /// </summary>
        protected void btnCancel_Click(object sender, EventArgs e)
        {
            Page.Response.Redirect("~/Searches/LookupCode/Default.aspx");
        }

any ideas on what I am doing wrong?

Answer 1

EDIT: The ConfirmPopupExtender shouldn't be pointing to the btnCancel. Instead, it should be pointing to a hidden button (this is what the example in the link does).

<asp:Button ID="btnCancel" runat="server" CausesValidation="false" 
    OnClick="btnCancel_Click" Text="Cancel" OnClientClick="disableSubmit();return false;"  />
<!-- This is the Hidden Buttons that you need to add and reference in the ConfirmButtonExtender -->
<asp:Button ID="HiddenButtonConfirm" runat="server" Text="" style="display:none;" />
<asp:Button ID="HiddenButtonModal" runat="server" Text="" style="display:none;" />
<ajaxToolKit:ConfirmButtonExtender ID="ConfirmButtonExtenderbtnCancel" 
    runat="server" DisplayModalPopupID="ModalPopupExtenderbtnCancel" 
    TargetControlID="HiddenButtonConfirm" BehaviorID="ConfirmButtonExtenderbtnCancel" />
<!-- You'll also want the ModalPopup to point to a seperate hidden button. -->
<ajaxToolKit:ModalPopupExtender ID="ModalPopupExtenderbtnCancel" runat="server" 
    BackgroundCssClass="modalBackground" CancelControlID="btnCancelCancel" 
    OkControlID="btnConfirmCancel" PopupControlID="ConfirmCancelPanel" 
    TargetControlID="HiddenButtonModal" />

Answer 2

As Chris said, you don't have to have a ConfirmButtonExtender and ModalPopupExtender (although this looks like a way round the fact that the JavaScript confirm() function is limited to OK and Cancel buttons in its' dialog - noted as a technique for the future :-) )

If you know in your code-behind that the user isn't going to be doing any editing (as evidenced by your cbAllowEdit control), then you should be able to just disable the ConfirmButtonExtender:

ConfirmButtonExtenderbtnCancel.Enabled = false;

Then clicking the Cancel button should take you into your code-behind function without confirmation at all.