locked
How to prevent ASP button from closing Ajax Modal Popup window. RRS feed

  • Question

  • User1909155429 posted
     <asp:HiddenField ID="HiddenToken" runat="server" />
                            <ajaxToolkit:ModalPopupExtender ID="ModpopExtPoints" runat="server" BackgroundCssClass="backgroundColor"  DropShadow="true" OkControlID="closeBtn2" TargetControlID="HiddenToken" PopupControlID="Panel3"></ajaxToolkit:ModalPopupExtender>
       
    <asp:Panel ID="Panel3" runat="server"  BackColor="#FF9933" Style="padding: 10px; border: 1px; border-style: solid;display: none;"   >
    <p style="text-align: center;">
        <asp:Button ID="closeBtn2" runat="server" Text="Done"   /></p>
                                              
                                       <asp:TextBox ID="TxtPoints" runat="server"    ></asp:TextBox><ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender4" runat="server" Maximum="100" Minimum="0" Step="5" 
            TargetControlID="TxtPoints" Width="50" >
        </ajaxToolkit:NumericUpDownExtender>
    </asp:Panel>

    How do I prevent the button control from closing the Ajax enabled Modal Popup window when the value inside TxtPoints textbox is set at the default minimum value 0.

    I only want the modal to close on the cancel button or when the TxtPoints value is greater than 0, which is the default minimum value set by the NumericUpDownExtender. 

    Friday, April 1, 2016 12:15 PM

Answers

  • User2103319870 posted

    You need to slight change the approach which you are using now.

    First change the okControlID in ModalPop up from closeBtn2 to a dummy button like below

     <asp:Button ID="dummyButton" runat="server" Style="display: none" />
    <ajaxToolkit:ModalPopupExtender ID="ModpopExtPoints" runat="server" BackgroundCssClass="backgroundColor" DropShadow="true" OkControlID="dummyButton" BehaviorID="modalpopup1" TargetControlID="Button3" PopupControlID="Panel4"></ajaxToolkit:ModalPopupExtender>

    next add a BehaviourID to modalpopup control to access it using javascript

                <ajaxToolkit:ModalPopupExtender ID="ModpopExtPoints" runat="server" BackgroundCssClass="backgroundColor" DropShadow="true" OkControlID="dummyButton" BehaviorID="modalpopup1" TargetControlID="Button3" PopupControlID="Panel4"></ajaxToolkit:ModalPopupExtender>

    and then use the below javascript code to check if value is zero in textbox and close popup accordingly

     <script>
                    function HideModalPopup() {
                        //check if textbox value is equal to  zero or not
                        if (document.getElementById("TxtPoints").value != "0") {
                            //Access the modal popup using BehaviourID and close the popup
                            $find("modalpopup1").hide();
                        }
                        else {
                            return false;
                        }
                    }
                </script>

    Call above function from closebtn2 

     <asp:Button ID="closeBtn2" runat="server" Text="Done" OnClientClick="return HideModalPopup()" />

    Complete Code

    <asp:HiddenField ID="HiddenToken" runat="server" />
                <asp:Button ID="dummyButton" runat="server" Style="display: none" />
                <script>
                    function HideModalPopup() {
                        //check if textbox value is equal to  zero or not
                        if (document.getElementById("TxtPoints").value != "0") {
                            //Access the modal popup using BehaviourID and close the popup
                            $find("modalpopup1").hide();
                        }
                        else {
                            return false;
                        }
                    }
                </script>
                <ajaxToolkit:ModalPopupExtender ID="ModpopExtPoints" runat="server" BackgroundCssClass="backgroundColor" DropShadow="true" OkControlID="dummyButton" BehaviorID="modalpopup1" TargetControlID="HiddenToken" PopupControlID="Panel3"></ajaxToolkit:ModalPopupExtender>
                <asp:Panel ID="Panel3" runat="server" BackColor="#FF9933" Style="padding: 10px; border: 1px; border-style: solid; display: none;">
                    <p style="text-align: center;">
                        <asp:Button ID="closeBtn2" runat="server" Text="Done" OnClientClick="return HideModalPopup()" />
                    </p>
    
                    <asp:TextBox ID="TxtPoints" runat="server"></asp:TextBox>
                    <ajaxToolkit:NumericUpDownExtender ID="NumericUpDownExtender4" runat="server" Maximum="100" Minimum="0" Step="5"
                        TargetControlID="TxtPoints" Width="50"></ajaxToolkit:NumericUpDownExtender>
                </asp:Panel>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 1, 2016 5:45 PM