locked
Can Modal Popups be used inside an AJAX tab container RRS feed

  • Question

  • User-331904504 posted

    If any one can please help me with this, I'd be really grateful

    I'm currently having an issue with the following Modal Pop up, that's inside a Tab Panel/ Tab container

    <cc1:ModalPopupExtender ID="ModalPopupWarning" runat="server" 
                            PopupControlID="PanelWarning" 
                            TargetControlID="btnShow"
                            CancelControlID="btnClose" 
                            dropshadow="true" 
                            BackgroundCssClass="modalBackground">
                    </cc1:ModalPopupExtender>
    
    
                    <asp:Panel ID="PanelWarning" runat="server" CssClass="modalPopup" 
                            Width="668px">     
                            <div>            
                                <h3><asp:Label ID="lblWarning" runat="server" Text="Label">Warning</asp:Label></h3>     
                                <div class="modalFont">     
                                     
                                    Please confirm that this approval has been granted by checking the box below 
                                    before proceeding.<br /><br />  
                                                    
                                    <asp:Label ID="lblApprovalObtained" runat="server" Text="Label">Approval Obtained:</asp:Label> 
                                    <asp:CheckBox ID="chkApprovalObtained" runat="server" />
                                </div><br />
                                <asp:Button ID="btnNext" runat="server" Text="Next" onclick="btnNext_Click"  />   
                                <asp:Button ID="btnClose" runat="server" Text="Close" />
                            </div>
                    </asp:Panel>  


    However, the btnClose takes me to the next panel 'ModalPopUpApproval'  and not btnNext as intended, this is based on the 'chkApprovalObtained' as below:   

      

    'Shown on modal popup warning
        Protected Sub btnNext_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnNext.Click
            If chkApprovalObtained.Checked = True Then
                ModalPopupApproval.Show()
                'resets approval type - incase users selects it, then cancels and returns.
                ddlApprovalType.SelectedValue = "1"
                lblApprovalObtained.ForeColor = Drawing.Color.Black
            Else
                ModalPopupWarning.Show()
                lblApprovalObtained.ForeColor = Drawing.Color.Red
            End If
        End Sub


    Am I missing something because this is inside a Tab Panel?

     

    Tuesday, September 23, 2014 12:21 PM

Answers

  • User1918509225 posted

    Hi callan1,

    I wrote a whole demo for you.

    Here is the page code ,the tab container has two tab,each tab has a modal.

    here is the page code:

    <form id="form1" runat="server">
         
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
        <div>
            <ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
                <ajaxToolkit:TabPanel runat="server">
                    <HeaderTemplate>
                        Hello
                    </HeaderTemplate>
                    <ContentTemplate>
                        <asp:Button ID="btnShow" runat="server" Text="Button" />
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupWarning" runat="server" 
                            PopupControlID="PanelWarning" 
                            TargetControlID="btnShow"
                            CancelControlID="btnClose" 
                            dropshadow="true" 
                            BackgroundCssClass="modalBackground">
                    </ajaxToolkit:ModalPopupExtender>
    
     <asp:Panel ID="PanelWarning" runat="server" CssClass="modalPopup" 
                            Width="668px">     
                            <div>            
                                <h3><asp:Label ID="lblWarning" runat="server" Text="Label">Warning</asp:Label></h3>     
                                <div class="modalFont">     
                                     
                                    Please confirm that this approval has been granted by checking the box below 
                                    before proceeding.<br /><br />  
                                                    
                                    <asp:Label ID="lblApprovalObtained" runat="server" Text="Label">Approval Obtained:</asp:Label> 
                                    <asp:CheckBox ID="chkApprovalObtained" runat="server" />
                                </div><br />
                                <asp:Button ID="btnNext" runat="server" Text="Next" OnClick="btnNext_Click" />   
                                <asp:Button ID="btnClose" runat="server" Text="Close" />
                            </div>
                    </asp:Panel>                    
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>
                <ajaxToolkit:TabPanel runat="server">
                    <HeaderTemplate>
                        Hello
                    </HeaderTemplate>
                    <ContentTemplate>
                        <asp:Button ID="btnShow1" runat="server" Text="Button" />
                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
                            PopupControlID="Panel1" 
                            TargetControlID="btnShow1"
                            dropshadow="true" 
                            BackgroundCssClass="modalBackground">
                    </ajaxToolkit:ModalPopupExtender>
    
     <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" 
                            Width="668px">     
                            <div>            
                             
                             xxxxxxxxxxxxxxxxxx
                            </div>
                    </asp:Panel>  
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>
            </ajaxToolkit:TabContainer>
        </div>
        </form>

    Here is the server side:

            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void btnNext_Click(object sender, EventArgs e)
            {
                ModalPopupExtender1.Show();
            }

    When you click the btnNext button ,it will refresh the page.

    and you click the second tab,you will find the  modal is open.

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 24, 2014 4:59 AM

All replies

  • User1918509225 posted

    Hi callan1,

    When you click the btnClose button it will close the current modal ,for you has set the code below:

    CancelControlID="btnClose" 
    

    You can refer to the link about the properties in ModalPopupExtender:

    http://ajaxcontroltoolkit.codeplex.com/wikipage?title=ModalPopup%20Control&referringTitle=Tutorials

    When you check the checkbox and click the btnNext ,it will open fire a postback the page will refresh. 

    but the ModalPopupApproval modal will show  Only when click the tab  which contain the modal.

    Best Regards,

    Kevin Shen.

    Wednesday, September 24, 2014 2:08 AM
  • User-331904504 posted

    Hi Kevin

    Thanks for the reply,  This isn't happening:

    When you check the checkbox and click the btnNext ,it will open fire a postback the page will refresh. 

    but the ModalPopupApproval modal will show  Only when click the tab  which contain the modal.

    Selecting both the checkbox and the Next button, doesn't do anything?

    Wednesday, September 24, 2014 3:51 AM
  • User1918509225 posted

    Hi callan1,

    when you click the btnNext button ,it will excute  the method below in server side code:

    'Shown on modal popup warning
        Protected Sub btnNext_Click(ByVal sender As Object, ByVal e As EventArgs) Handles btnNext.Click
            If chkApprovalObtained.Checked = True Then
                ModalPopupApproval.Show()
                'resets approval type - incase users selects it, then cancels and returns.
                ddlApprovalType.SelectedValue = "1"
                lblApprovalObtained.ForeColor = Drawing.Color.Black
            Else
                ModalPopupWarning.Show()
                lblApprovalObtained.ForeColor = Drawing.Color.Red
            End If
        End Sub

    Best Regards,

    Kevin Shen.

    Wednesday, September 24, 2014 3:56 AM
  • User-331904504 posted

    That's what I would like to happen, but it's not working.  I have this working independently however this is inside a tabControl. 

    The only difference being the modal is inside a tabPanel of a tab container, the controls "seem" to be ignored.

     

       <cc1:TabPanel runat="server" HeaderText="furtherInformation" ID="furtherInfomation">
                            <HeaderTemplate>
                                6 - Further Information
                            </HeaderTemplate>
                            <contentTemplate>
                         <span class="tabBody">
                            <br />
                                
             
                                <strong>  Header    </strong>
                         <br />
    
                    <cc1:ModalPopupExtender ID="ModalPopupWarning" runat="server" 
                            PopupControlID="PanelWarning" 
                            TargetControlID="btnShow"
                            CancelControlID="btnClose" 
                            dropshadow="true" 
                            BackgroundCssClass="modalBackground">
                    </cc1:ModalPopupExtender>
    
    
                    <asp:Panel ID="PanelWarning" runat="server" CssClass="modalPopup" 
                            Width="668px">     
                            <div>            
                                <h3><asp:Label ID="lblWarning" runat="server" Text="Label">Warning</asp:Label></h3>     
                                <div class="modalFont">     
                                    Please confirm that this approval has been granted by checking the box below 
                                    before proceeding.<br /><br />  
                                                    
                                    <asp:Label ID="lblApprovalObtained" runat="server" Text="Label">Approval Obtained:</asp:Label> 
                                    <asp:CheckBox ID="chkApprovalObtained" runat="server" />
                                </div><br />
                                <asp:Button ID="btnNext" runat="server" Text="Next" onclick="btnNext_Click"  />   
                                <asp:Button ID="btnClose" runat="server" Text="Close" />
                            </div>
                    </asp:Panel>  
    
    
         </contentTemplate>    
     </cc1:TabPanel> 
                
                
                       
     </cc1:tabcontainer>  

    (I've removed other controls for ease of reading.  This is 1 of 6 panels in side the tab Container)

    Wednesday, September 24, 2014 4:10 AM
  • User1918509225 posted

    Hi callan1,

    It seems that you don't have a button  id called " btnShow" in your tabPanel like below:

    When you click the button named"openModal" ,it will open a modal:

      <form id="form1" runat="server">
         
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
        <div>
            <ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
                <ajaxToolkit:TabPanel runat="server">
                    <HeaderTemplate>
                        Hello
                    </HeaderTemplate>
                    <ContentTemplate>
                        <asp:Button ID="btnShow" runat="server" Text="openModal" />
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupWarning" runat="server" 
                            PopupControlID="PanelWarning" 
                            TargetControlID="btnShow"
                            CancelControlID="btnClose" 
                            dropshadow="true" 
                            BackgroundCssClass="modalBackground">
                    </ajaxToolkit:ModalPopupExtender>
    
     <asp:Panel ID="PanelWarning" runat="server" CssClass="modalPopup" 
                            Width="668px">     
                            <div>            
                                <h3><asp:Label ID="lblWarning" runat="server" Text="Label">Warning</asp:Label></h3>     
                                <div class="modalFont">     
                                     
                                    Please confirm that this approval has been granted by checking the box below 
                                    before proceeding.<br /><br />  
                                                    
                                    <asp:Label ID="lblApprovalObtained" runat="server" Text="Label">Approval Obtained:</asp:Label> 
                                    <asp:CheckBox ID="chkApprovalObtained" runat="server" />
                                </div><br />
                                <asp:Button ID="btnNext" runat="server" Text="Next" OnClick="btnNext_Click" />   
                                <asp:Button ID="btnClose" runat="server" Text="Close" />
                            </div>
                    </asp:Panel>                    
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>
            </ajaxToolkit:TabContainer>
        </div>
        </form>

    Best Regards,

    Kevin Shen.

    Wednesday, September 24, 2014 4:15 AM
  • User-331904504 posted

    Sorry it was one of the control I didn't include in my code, however this doesn't alter anything.  It's not working inside my AJAX tabContainer.

    Wednesday, September 24, 2014 4:47 AM
  • User1918509225 posted

    Hi callan1,

    I wrote a whole demo for you.

    Here is the page code ,the tab container has two tab,each tab has a modal.

    here is the page code:

    <form id="form1" runat="server">
         
            <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
        <div>
            <ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
                <ajaxToolkit:TabPanel runat="server">
                    <HeaderTemplate>
                        Hello
                    </HeaderTemplate>
                    <ContentTemplate>
                        <asp:Button ID="btnShow" runat="server" Text="Button" />
    <ajaxToolkit:ModalPopupExtender ID="ModalPopupWarning" runat="server" 
                            PopupControlID="PanelWarning" 
                            TargetControlID="btnShow"
                            CancelControlID="btnClose" 
                            dropshadow="true" 
                            BackgroundCssClass="modalBackground">
                    </ajaxToolkit:ModalPopupExtender>
    
     <asp:Panel ID="PanelWarning" runat="server" CssClass="modalPopup" 
                            Width="668px">     
                            <div>            
                                <h3><asp:Label ID="lblWarning" runat="server" Text="Label">Warning</asp:Label></h3>     
                                <div class="modalFont">     
                                     
                                    Please confirm that this approval has been granted by checking the box below 
                                    before proceeding.<br /><br />  
                                                    
                                    <asp:Label ID="lblApprovalObtained" runat="server" Text="Label">Approval Obtained:</asp:Label> 
                                    <asp:CheckBox ID="chkApprovalObtained" runat="server" />
                                </div><br />
                                <asp:Button ID="btnNext" runat="server" Text="Next" OnClick="btnNext_Click" />   
                                <asp:Button ID="btnClose" runat="server" Text="Close" />
                            </div>
                    </asp:Panel>                    
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>
                <ajaxToolkit:TabPanel runat="server">
                    <HeaderTemplate>
                        Hello
                    </HeaderTemplate>
                    <ContentTemplate>
                        <asp:Button ID="btnShow1" runat="server" Text="Button" />
                    <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
                            PopupControlID="Panel1" 
                            TargetControlID="btnShow1"
                            dropshadow="true" 
                            BackgroundCssClass="modalBackground">
                    </ajaxToolkit:ModalPopupExtender>
    
     <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" 
                            Width="668px">     
                            <div>            
                             
                             xxxxxxxxxxxxxxxxxx
                            </div>
                    </asp:Panel>  
                    </ContentTemplate>
                </ajaxToolkit:TabPanel>
            </ajaxToolkit:TabContainer>
        </div>
        </form>

    Here is the server side:

            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            protected void btnNext_Click(object sender, EventArgs e)
            {
                ModalPopupExtender1.Show();
            }

    When you click the btnNext button ,it will refresh the page.

    and you click the second tab,you will find the  modal is open.

    Best Regards,

    Kevin Shen.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 24, 2014 4:59 AM