locked
Hide fields inside modal popup extender using JS RRS feed

  • Question

  • User1310055179 posted

    Hi,

    I would like to show/hide some fields inside a popup extender, based on a radio button list value selection (InternalExternal_RadioButtonList).

    My problem is that the minute the js function (mailTypeChanged) finishes running, the pop up panel is closed.

    This is my code:

    <asp:Panel ID="sendEmailPanel" CssClass="ModalWindowEmail" style = "display:nonetext-align:left;" runat="server">
                            <div class="popup_header">
                                Send Email
                            </div>
                            <div class="popup_BodyEmail">
     
                                        <asp:RadioButtonList ID="InternalExternal_RadioButtonList" AutoPostBack="true" runat="server" RepeatDirection="Horizontal">
                                            <asp:ListItem Selected="True" onclick="mailTypeChanged(this);">External</asp:ListItem>
                                            <asp:ListItem onclick="mailTypeChanged(this);">Internal</asp:ListItem>
                                        </asp:RadioButtonList>
                                        <asp:TextBox ID="mailToDate" TextMode="Date" runat="server" Width="250px"></asp:TextBox>
                                        <ajaxToolkit:TextBoxWatermarkExtender ID="mailToDate_WM" runat="server"
                                            TargetControlID="mailToDate"
                                            WatermarkText="Date"
                                            WatermarkCssClass="watermarked" />                           
                                        <p><asp:TextBox ID="mailRecipients" runat="server" Width="250px"></asp:TextBox></p>
                                        <ajaxToolkit:TextBoxWatermarkExtender ID="mailRecipients_WM" runat="server"
                                            TargetControlID="mailRecipients"
                                            WatermarkText="To"
                                            WatermarkCssClass="watermarked" />
                                        <p><asp:TextBox ID="mailCc" runat="server" Width="250px"></asp:TextBox></p>
                                        <ajaxToolkit:TextBoxWatermarkExtender ID="mailCc_WM" runat="server"
                                            TargetControlID="mailCc"
                                            WatermarkText="CC"
                                            WatermarkCssClass="watermarked" />
                                        <p><asp:TextBox ID="mailBcc" runat="server" Width="250px"></asp:TextBox></p>
                                        <ajaxToolkit:TextBoxWatermarkExtender ID="mailBcc_WM" runat="server"
                                            TargetControlID="mailBcc"
                                            WatermarkText="BCC"
                                            WatermarkCssClass="watermarked" />
     
                                        <p><asp:TextBox ID="mailBody" runat="server" TextMode="MultiLine" Width="250px" Height="250px"></asp:TextBox></p>
                                        <ajaxToolkit:TextBoxWatermarkExtender ID="mailBody_WM" runat="server"
                                            TargetControlID="mailBody"
                                            WatermarkText="Body"
                                            WatermarkCssClass="watermarked" />
                                  
                            </div>
                            <div class="popup_ButtonsEmail">
                                <asp:Button ID="sendMail" runat="server" Text="Send" OnClick="ValidationOK_Click"/>
                                <asp:Button ID="emailCancel" runat="server" Text="Cancel" OnClientClick="skm_unLockScreen('skm_LockPane')"/>
                            </div>
                        </asp:Panel>
                        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender4" runat="server" 
                            TargetControlID="email"  CancelControlID="emailCancel" PopupControlID="sendEmailPanel" DropShadow="true" BackgroundCssClass="modalBackground">
                            <Animations>
                                <OnShown>
                                    <FadeIn Duration=".4" Fps="20" />                
                                </OnShown>
                            </Animations>
                        </ajaxToolkit:ModalPopupExtender>
    function mailTypeChanged(id)
            {
                alert(id.value);
                
            }
    Monday, May 13, 2019 9:29 AM

Answers

  • User475983607 posted

    My problem is that the minute the js function (mailTypeChanged) finishes running, the pop up panel is closed.

    This is a understanding ASP.NET fundamentals bug.  The radio button list is configured to AutoPostBack.

    <asp:RadioButtonList ID="InternalExternal_RadioButtonList" AutoPostBack="true" runat="server" RepeatDirection="Horizontal">

    Any changes to the radio button causes a post back.  The post back causes a page refresh which reloads the JavaScript application in the browser.  

    There are a few design approaches. 

    1. Leave AutoPostBack as is and show/hide the elements on the server.  Set the modal popup extender to open when the page refreshes from the AuthPostBack event.
    2. Use an UpdatePanel to update a specific section of the page (DOM) on radio button list AutoPostBack.
    3. Remove the AuthoPostBack and move the code logic to the JavaScript/jQuery.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 13, 2019 11:02 AM
  • User665608656 posted

    Hi qsoft_developer,

    In addition to the method described by mgebhard, you can also use this method:

    AutoPostBack is still True, and you need to add an update panel to the pop-up content layer (that is, the content in the panel control of your current code), which also prevents the pop-up box from disappearing when you switch radiobuttonlist.

    The code results are shown below: 

     

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 14, 2019 5:17 AM

All replies

  • User475983607 posted

    My problem is that the minute the js function (mailTypeChanged) finishes running, the pop up panel is closed.

    This is a understanding ASP.NET fundamentals bug.  The radio button list is configured to AutoPostBack.

    <asp:RadioButtonList ID="InternalExternal_RadioButtonList" AutoPostBack="true" runat="server" RepeatDirection="Horizontal">

    Any changes to the radio button causes a post back.  The post back causes a page refresh which reloads the JavaScript application in the browser.  

    There are a few design approaches. 

    1. Leave AutoPostBack as is and show/hide the elements on the server.  Set the modal popup extender to open when the page refreshes from the AuthPostBack event.
    2. Use an UpdatePanel to update a specific section of the page (DOM) on radio button list AutoPostBack.
    3. Remove the AuthoPostBack and move the code logic to the JavaScript/jQuery.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 13, 2019 11:02 AM
  • User665608656 posted

    Hi qsoft_developer,

    In addition to the method described by mgebhard, you can also use this method:

    AutoPostBack is still True, and you need to add an update panel to the pop-up content layer (that is, the content in the panel control of your current code), which also prevents the pop-up box from disappearing when you switch radiobuttonlist.

    The code results are shown below: 

     

    Best Regards,

    YongQing.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 14, 2019 5:17 AM