ModalPopupExtender only pops up the UpdatePanel once

Question

The ModalPopupExtender wires the btnCancel button to trigger the a popup an UpdatePanel. The UpdatePanel is a cancel confirmation which contains a Yes button and a No button. After clicking the No button, the panel is closed but the btnCancel no longer trigger the popup when being clicked again. The Yes button works and triggers the server side YesButton_Click event. Here is my code. Thanks for your help.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
  <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />
  <asp:Button ID="btnCancel" Text="Cancel Task" runat="server" ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />

  <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel"
    PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />

  <asp:UpdatePanel ID="upd_yes_no" runat="server">
    <ContentTemplate>
      <asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
        <div class="modalPopup-text">
          Are you sure you want to cancel this task?<br />
          <br />
          <asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />&nbsp;&nbsp; 
          <asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
        </div>
      </asp:Panel>
    </ContentTemplate>
  </asp:UpdatePanel>
</asp:Content>

Answer 1

I'm not 100% positive but it appears that Extender and Extended controls must reside in the same UpdatePanel. So if you move your Cancel button and ModalPopupExtender control inside the UpdatePanel, it should work as expected.

<ajax:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" />

      <asp:UpdatePanel ID="upd_yes_no" runat="server">
  <ContentTemplate>

    <span id="buttons">
      <asp:Button ID="btnUndo" Text="Undo Edit" CommandArgument="undo" runat="server"
        OnClick="undo" CausesValidation="false" />
      <asp:Button ID="btnNewTask" Text="New Task" CommandArgument="newTask" runat="server"
        ToolTip="Unchange current and create new task"
        OnClick="NewTask" CausesValidation="false" />
      <asp:Button ID="btnCancel" Text="Cancel Task" runat="server"
        ToolTip="Cancel the displayed task and remove it from Tracker" CausesValidation="false" />
    </span>

    <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnCancel" PopupControlID="ConfirmationPanel" BackgroundCssClass="modalBackground" />
    <asp:Panel ID="ConfirmationPanel" runat="server" CssClass="modalPopup" Style="display: none">
      <div class="modalPopup-text">
        Are you sure you want to cancel this task?
        <br />
        <br />
        <asp:Button ID="YesButton" runat="server" Text="Yes" CommandArgument="Yes" OnClick="YesButton_Click" />&nbsp;&nbsp;
        <asp:Button ID="NoButton" runat="server" Text="No" CommandArgument="No" />
      </div>
    </asp:Panel>
  </ContentTemplate>
</asp:UpdatePanel>