How to stop AjaxControlToolkit.ModalPopupExtender from reloading the page when the popup is closed

Question

We have a website written in ASP.Net/VB.Net, and at the bottom of one page we have this code:

<asp:UpdatePanel ID="upnlMessage" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <asp:HiddenField ID="hidVerified" runat="server" />
        <asp:HiddenField ID="hidRefund" runat="server" />
        <!--this button is used as dummy TargetControlID for the ModalPopupExtenders which opened programmatically from code behind -->
        <asp:Button ID="btnHiddenModal" CausesValidation="false" runat="server" Style="display: none;" />
        <cc1:ModalPopupExtender ID="mpeMessage"
            runat="server"
            PopupControlID="pnlMessage"
            BackgroundCssClass="modalBackground"
            TargetControlID="btnHiddenModal"
            DropShadow="False"
            Y="50"
            RepositionMode="RepositionOnWindowResize"
            BehaviorID="btnClose">
        </cc1:ModalPopupExtender>
        <asp:PlaceHolder ID="plhMessage" runat="server">
            <asp:Panel ID="pnlMessage" CssClass="message" runat="server">
                <asp:Panel ID="pnlConfirmMessageImage" runat="server" CssClass="messageImage infoImage"></asp:Panel>
                <asp:Panel ID="pnlConfirmMessageHeader" runat="server" CssClass="messageHeader infoHeader">
                    <asp:Label ID="lblConfirmMessageHeader" Text="Information" runat="server"></asp:Label>
                </asp:Panel>
                <div class="messageBody">
                    <asp:Label ID="lblConfirmMessageText" Text="" runat="server"></asp:Label>
                </div>
                <div class="messageFooter">
                    <asp:Button runat="server" ID="btnCloseMessage" CssClass="SubButton" Text="OK" OnClick="btnCloseMessage_Click" CausesValidation="false" />
                </div>
            </asp:Panel>
        </asp:PlaceHolder>
    </ContentTemplate>
</asp:UpdatePanel>

When the page loads we do some checks, and if necessary use the popup to display a warning message. The popup is diplayed like this:

mpeMessage.Show()

When we click the close button on the popup the page reloads which causes a validation error. Surely there is a way to close the popup without reloading the page? The code for btnClose looks like this:

<input class="SubButton" id="btnClose" onclick="<%= $"closeAndRefresh('{[Global].GetUrlCloseAndRefresh(m_strRecordNumber)}');" %>" type="button" value="<%= m_strCloseLabel %>" name="btnClose" />

btnCloseMessage_Click contains this code:

mpeMessage.Hide()

Can anyone help me with this? It seems like it should be simple but nothing I've tried so far has made any difference. All I know is if I don't display the popup the page loads successfully, but if I do I get a validation error when the popup is closed. Thanks

Answer 1

there are 2 ways to let the ajax popup dialog close.

You can allow/have (or shall I say suffer) a page post-back on that button click. Since a post-back will cause a browser round trip, then when the server returns a fresh new copy of the browser, then of course any popup will collapse due to the new page being rendered.

However, if you don't want a post-back, then you need/want to use a client-side JavaScript routine, and when you click on that button, then you run client-side code to close the popup dialog.

So, have the button in the pop dialog call this JavaScript routine:

      <Button id="searchCancel"  
          class="burkebutt"
          onclick="MyClearPop();return false;" ><span aria-hidden="true" class="fa fa-times fa-lg">&nbsp;Cancel</span>
      </Button>



function MyClearPop() {
        $('#c2').hidePopup();
        return false;

So, using hidePopup() should work.

I now using the jQuery.UI dialog, and I find it more flexible then the aj toolkit one, but looking at some old code, .hidePopup() looks to be how you can close a popup dialog from the aj toolkit.

My older code did not have a "#" for some reason, and that older code was this:

function MyClearPop() {
        $find('c2').hidePopup();
        return false;

So, perhaps using $find('c2') without a "#" will work. In this example, "c2" was the target control id of the popup.