locked
AJAX Tab RRS feed

  • Question

  • User303397390 posted

    Hi,
     
    I'm Using AJAXControlToolKit Tab Controller to create Tab.
     
    In that in Using iframe to add different page.
     
    I Added the tab in the page (TabPage.aspx) and called all the page (ChildPage1.aspx, ChildPage2.aspx,ChildPage3.aspx,ChildPage4.aspx) from that page 
     
    I want to add save and proceed Button in the TabPage.aspx when the user click the button then it should save the data in the selected tab and proceed to the next tab i.e. if the user is at ChildPage1.aspx then the values should be saved in the ChildPage1.aspx and he should procced to the page ChildPage2.aspx
     
    TabPage.aspx
     

    <form id="form1"  runat="server">
        <div>
            <Ajx:ToolkitScriptManager  runat="server" EnablePartialRendering="true" ID="ScriptManager1" />
            <Ajx:TabContainer  runat="server" ID="Tabs" Visible="true" CssClass="Tab" BorderStyle="None" TabIndex="0">
                <Ajx:TabPanel  runat="server" ID="TabPanel1" HeaderText="Page1">
                    <ContentTemplate>
                        <iframe id="Iframe1" src="ChildPage1.aspx"  runat="server"
                            width="100%" height="650px"></iframe>
                    </ContentTemplate>
                </Ajx:TabPanel>
                <Ajx:TabPanel  runat="server" ID="TabPanel2" HeaderText="Page2">
                    <ContentTemplate>
                        <iframe id="Iframe2" src="ChildPage2.aspx"  runat="server"
                            width="100%" height="650px"></iframe>
                    </ContentTemplate>
                </Ajx:TabPanel>
            </Ajx:TabContainer>
            <Ajx:TabPanel  runat="server" ID="TabPanel3" HeaderText="Page3">
                    <ContentTemplate>
                        <iframe id="Iframe3" src="ChildPage3.aspx"  runat="server"
                            width="100%" height="650px"></iframe>
                    </ContentTemplate>
                </Ajx:TabPanel>
            </Ajx:TabContainer>
            <br />
            <asp:Button runat="server" ID="btnMasterPage" Text="Button in Page Tab" 
                onclick="btnMasterPage_Click" />
        </div>
        </form>

    ChildPage1.aspx

    <form id="form1"  runat="server">
        <div>
            Page 1
            <br />
            <br />
            <asp:Label ID="lblText" runat="server" Text="Name"></asp:Label>
            <br />
            <br />
            <asp:TextBox ID="txtText" runat="server"></asp:TextBox>
        </div>
        </form>

    Friday, March 21, 2014 2:00 AM

Answers

  • User1208776063 posted

    when the user click the button then it should save the data in the selected tab and proceed to the next tab i.e. if the user is at ChildPage1.aspx then the values should be saved in the ChildPage1.aspx and he should procced to the page ChildPage2.aspx
     

    You need to create a savebutton in each child page to save the page data. Also, set its ClientIdMode="Static" and write code in button click event handler to save data from textboxes.  Access those elements from the parent page and invoke javascript click event to save data.

    <Ajx:ToolkitScriptManager runat="server" EnablePartialRendering="true" ID="ScriptManager1">
                
    </Ajx:ToolkitScriptManager>
    <script type="text/javascript">
        function saveValues() {
            //contentDocument or contentWindow.document
            document.getElementById('<%= Tabs.Tabs[0].FindControl("Iframe1").ClientID %>').contentDocument.getElementById('btnsave').click();
            document.getElementById('<%= Tabs.Tabs[1].FindControl("Iframe2").ClientID %>').contentDocument.getElementById('btnsave').click();
            document.getElementById('<%= Tabs.Tabs[2].FindControl("Iframe3").ClientID %>').contentDocument.getElementById('btnsave').click();
        }
    </script>
    <Ajx:TabContainer runat="server" ID="Tabs" Visible="true" CssClass="Tab" BorderStyle="None" TabIndex="0">
        <Ajx:TabPanel runat="server" ID="TabPanel1" HeaderText="Page1">
            <ContentTemplate>
                <iframe id="Iframe1" src="ChildPage1.aspx" runat="server"
                    width="100%" height="650px"></iframe>
            </ContentTemplate>
        </Ajx:TabPanel>
        <Ajx:TabPanel runat="server" ID="TabPanel2" HeaderText="Page2">
            <ContentTemplate>
                <iframe id="Iframe2" src="ChildPage2.aspx" runat="server"
                    width="100%" height="650px"></iframe>
            </ContentTemplate>
        </Ajx:TabPanel>
        <Ajx:TabPanel runat="server" ID="TabPanel3" HeaderText="Page3">
            <ContentTemplate>
                <iframe id="Iframe3" src="ChildPage3.aspx" runat="server"
                    width="100%" height="650px"></iframe>
            </ContentTemplate>
        </Ajx:TabPanel>
    </Ajx:TabContainer>
    <br />
    <asp:Button runat="server" ID="btnMasterPage" Text="Button in Page Tab"
        OnClientClick="saveValues();return false;" />

    Also, you have a missing endtag for TabContainer.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 21, 2014 7:23 AM

All replies

  • User1208776063 posted

    when the user click the button then it should save the data in the selected tab and proceed to the next tab i.e. if the user is at ChildPage1.aspx then the values should be saved in the ChildPage1.aspx and he should procced to the page ChildPage2.aspx
     

    You need to create a savebutton in each child page to save the page data. Also, set its ClientIdMode="Static" and write code in button click event handler to save data from textboxes.  Access those elements from the parent page and invoke javascript click event to save data.

    <Ajx:ToolkitScriptManager runat="server" EnablePartialRendering="true" ID="ScriptManager1">
                
    </Ajx:ToolkitScriptManager>
    <script type="text/javascript">
        function saveValues() {
            //contentDocument or contentWindow.document
            document.getElementById('<%= Tabs.Tabs[0].FindControl("Iframe1").ClientID %>').contentDocument.getElementById('btnsave').click();
            document.getElementById('<%= Tabs.Tabs[1].FindControl("Iframe2").ClientID %>').contentDocument.getElementById('btnsave').click();
            document.getElementById('<%= Tabs.Tabs[2].FindControl("Iframe3").ClientID %>').contentDocument.getElementById('btnsave').click();
        }
    </script>
    <Ajx:TabContainer runat="server" ID="Tabs" Visible="true" CssClass="Tab" BorderStyle="None" TabIndex="0">
        <Ajx:TabPanel runat="server" ID="TabPanel1" HeaderText="Page1">
            <ContentTemplate>
                <iframe id="Iframe1" src="ChildPage1.aspx" runat="server"
                    width="100%" height="650px"></iframe>
            </ContentTemplate>
        </Ajx:TabPanel>
        <Ajx:TabPanel runat="server" ID="TabPanel2" HeaderText="Page2">
            <ContentTemplate>
                <iframe id="Iframe2" src="ChildPage2.aspx" runat="server"
                    width="100%" height="650px"></iframe>
            </ContentTemplate>
        </Ajx:TabPanel>
        <Ajx:TabPanel runat="server" ID="TabPanel3" HeaderText="Page3">
            <ContentTemplate>
                <iframe id="Iframe3" src="ChildPage3.aspx" runat="server"
                    width="100%" height="650px"></iframe>
            </ContentTemplate>
        </Ajx:TabPanel>
    </Ajx:TabContainer>
    <br />
    <asp:Button runat="server" ID="btnMasterPage" Text="Button in Page Tab"
        OnClientClick="saveValues();return false;" />

    Also, you have a missing endtag for TabContainer.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 21, 2014 7:23 AM
  • User303397390 posted

    thank you brother you are great

    Friday, March 21, 2014 2:01 PM