locked
TabContainer control not displaying on page [as a popup] RRS feed

  • Question

  • User372446179 posted

    Hi,

    I'm using  TabContainer control in my page (asp.net 4.0) and i want to open (MyPopup.aspx) popup page from button click of another page (MainForm.aspx)

    See the following code of both the pages.

    Problem:

    Tabcontainer is not displaying while clicking on button. Only blank page is displaying.

    NOTE: If I run directly popup then it is displaying tab control, but when i'm trying to open MyPopup.aspx as a popup, then it is not displaying TabContainer control.

    Code:-

    ---------MyPopup.aspx

    .........
            <ajax:ToolkitScriptManager ID="scriptmanager1" runat="server" ScriptMode="Release">
            </ajax:ToolkitScriptManager>
            <div style="width: 40%">
                <ajax:TabContainer ID="TabContainer1" runat="server" Visible="true" CssClass="fancy fancy-green">
                    <ajax:TabPanel ID="tbpnluser" runat="server">
                        <HeaderTemplate>
                            New User
                        </HeaderTemplate>
                        <ContentTemplate>
                            <asp:Panel ID="UserReg" runat="server">
                                <table align="center">
                                    <tr>
                                        <td></td>
                                        <td align="right"></td>
                                        <td align="center">
                                            <b>Registration Form</b>
                                        </td>
                                    </tr>
               
                                </table>
                            </asp:Panel>
                        </ContentTemplate>
                    </ajax:TabPanel>
                </ajax:TabContainer>
    </div>

    ------ MainForm.aspx

    $('#btnsearch').click(function () {
    
                  ..........      
                          var URL = String.format("MyPopup.aspx?SearchCriteria={0}&NavigatedFromModule={1}", $('#txtSerachCriteria').val(), encodeURI(module))                    
                            
                            var divSearchResult = $('#divSearchResult');
                            divSearchResult.dialog({ autoOpen: false });
                            divSearchResult.dialog({ 'width': '900', 'height': 'auto' });
    
                            divSearchResult.load(URL);
    
                            var divSearchResult = $('#divSearchResult');
                            divSearchResult.dialog('open');
                            $('.ui-dialog-content').css({ 'width': '95%', 'margin': '0 auto', 'height': 'auto', 'max-height': '400px', 'overflow-y': 'auto', 'padding-bottom': '10px' });
                            $('.ui-dialog-titlebar-close span.ui-button-text').text('X').css({ 'cursor': 'pointer' });
                            $('.ui-dialog-titlebar-close').css({ 'cursor': 'pointer', 'height': '33px', 'overflow': 'hidden' });
    
                            $('.ui-dialog-title').text('SEARCH QUEUE').addClass('popupHeading').attr('style', 'float:left');
                            $('.ui-dialog-titlebar').after().append('<div class="clear"></div>')
    
                            $('.ui-dialog').css({ 'position': 'absolute', 'min-width': '900px' });
                            $('.ui-dialog').position({
                                my: "center",
                                at: "center",
                                of: window
    

    Thanks in advance.

    Tuesday, January 28, 2014 2:33 AM

Answers

  • User555306248 posted

    I suggest you check the HTML source code after running. Is there any HTML elements about tabs in it? You can use some debugger tool to check the style property of tabs. Maybe Height style of tab panel is 0, property "display" is "none", or property "visibility" is "hidden".

    Try the following code

    <asp:UpdatePanel ID="upRegistro" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:ImageButton ID="ibAsociarUsuario" runat="server" ToolTip="Registrar usuario a la agenda"
                SkinID="ImageButtonAsociarUsuario" />
            <asp:LinkButton ID="lbtAsociar" runat="server" Text="" Visible="True" Style="display: none;"></asp:LinkButton>
            <cc1:ModalPopupExtender ID="mpeAsociarUsuarios" BackgroundCssClass="ModalBackground"
                runat="server" PopupControlID="pnlContenedorModal" TargetControlID="ibAsociarUsuario"
                CancelControlID="imbClose">
            </cc1:ModalPopupExtender>
            <asp:Panel ID="pnlContenedorModal" runat="server" Style="display: none; width: 80%;">
                <table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%">
                    <tr>
                        <td valign="top" align="center" style="width: 100%; height: 15px">
                            <asp:Panel ID="pnlTitleBar" SkinID="PanelTitleBar" runat="server" Width="100%">
                                 <asp:Label ID="lblTitulo" SkinID="TituloModal" runat="server" Text="Registrando de usuarios a agenda"></asp:Label>
                            </asp:Panel>
                        </td>
                        <td valign="top" align="right" style="height: 15px">
                            <asp:ImageButton ID="imbClose" runat="server" SkinID="ImageButtonClose" AlternateText="Cerrar" />
                        </td>
                    </tr>
                    <tr>
                        <td valign="top" align="center" style="width: 100%;">
                            <cc1:TabContainer ID="tbUsuario" runat="server" ActiveTabIndex="0">
                                <cc1:TabPanel runat="server" HeaderText="Datos Personales" ID="tpDatosPersonales">
                                    <ContentTemplate>
                                    </ContentTemplate>
                                </cc1:TabPanel>
                            </cc1:TabContainer>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 28, 2014 10:53 PM
  • User-933407369 posted

    hi VCODER,

    According to your description, i assume that you miss the 'jquery-ui-1.8.20.min.js' js file .

    i try to create the demo below, it is working for me, but only the first click loading , the TabContainer of  MyPopup.aspx is delay in a moment.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.7.1.min.js"></script>
        <script src="../Scripts/jquery-ui-1.8.20.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#btnsearch').click(function () {
                    var URL = "MyPopup.aspx";
    
                    var divSearchResult = $('#divSearchResult');
                    divSearchResult.dialog({ autoOpen: false });
                    divSearchResult.dialog({ 'width': '900', 'height': 'auto' });
                    divSearchResult.load(URL);
                    var divSearchResult = $('#divSearchResult');
                    divSearchResult.dialog('open');
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="btnsearch" type="button" value="button" />
          
            <div id="divSearchResult"> show</div>
        </div>
        </form>
    </body>
    </html>
    

    It is working for me , hope it helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 28, 2014 11:17 PM

All replies

  • User555306248 posted

    I suggest you check the HTML source code after running. Is there any HTML elements about tabs in it? You can use some debugger tool to check the style property of tabs. Maybe Height style of tab panel is 0, property "display" is "none", or property "visibility" is "hidden".

    Try the following code

    <asp:UpdatePanel ID="upRegistro" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:ImageButton ID="ibAsociarUsuario" runat="server" ToolTip="Registrar usuario a la agenda"
                SkinID="ImageButtonAsociarUsuario" />
            <asp:LinkButton ID="lbtAsociar" runat="server" Text="" Visible="True" Style="display: none;"></asp:LinkButton>
            <cc1:ModalPopupExtender ID="mpeAsociarUsuarios" BackgroundCssClass="ModalBackground"
                runat="server" PopupControlID="pnlContenedorModal" TargetControlID="ibAsociarUsuario"
                CancelControlID="imbClose">
            </cc1:ModalPopupExtender>
            <asp:Panel ID="pnlContenedorModal" runat="server" Style="display: none; width: 80%;">
                <table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%">
                    <tr>
                        <td valign="top" align="center" style="width: 100%; height: 15px">
                            <asp:Panel ID="pnlTitleBar" SkinID="PanelTitleBar" runat="server" Width="100%">
                                 <asp:Label ID="lblTitulo" SkinID="TituloModal" runat="server" Text="Registrando de usuarios a agenda"></asp:Label>
                            </asp:Panel>
                        </td>
                        <td valign="top" align="right" style="height: 15px">
                            <asp:ImageButton ID="imbClose" runat="server" SkinID="ImageButtonClose" AlternateText="Cerrar" />
                        </td>
                    </tr>
                    <tr>
                        <td valign="top" align="center" style="width: 100%;">
                            <cc1:TabContainer ID="tbUsuario" runat="server" ActiveTabIndex="0">
                                <cc1:TabPanel runat="server" HeaderText="Datos Personales" ID="tpDatosPersonales">
                                    <ContentTemplate>
                                    </ContentTemplate>
                                </cc1:TabPanel>
                            </cc1:TabContainer>
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </ContentTemplate>
    </asp:UpdatePanel>
    

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 28, 2014 10:53 PM
  • User-933407369 posted

    hi VCODER,

    According to your description, i assume that you miss the 'jquery-ui-1.8.20.min.js' js file .

    i try to create the demo below, it is working for me, but only the first click loading , the TabContainer of  MyPopup.aspx is delay in a moment.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="../Scripts/jquery-1.7.1.min.js"></script>
        <script src="../Scripts/jquery-ui-1.8.20.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $('#btnsearch').click(function () {
                    var URL = "MyPopup.aspx";
    
                    var divSearchResult = $('#divSearchResult');
                    divSearchResult.dialog({ autoOpen: false });
                    divSearchResult.dialog({ 'width': '900', 'height': 'auto' });
                    divSearchResult.load(URL);
                    var divSearchResult = $('#divSearchResult');
                    divSearchResult.dialog('open');
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input id="btnsearch" type="button" value="button" />
          
            <div id="divSearchResult"> show</div>
        </div>
        </form>
    </body>
    </html>
    

    It is working for me , hope it helps.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, January 28, 2014 11:17 PM