[CLOSED] passing parameters into tabs with autoloads

  1. #1

    [CLOSED] passing parameters into tabs with autoloads



    Hello


    I am having a problem with autoload tabs.


    I have a form that contains 3 tabs. two of which are hidden on load.


    <%@ Page Language="C#" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Fixed Height TabPanel with options - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript"">
    function openForms(lID)
    {
        var bpSetAutoLoad = false;
        
        switch (lID)
        {
            case 1:
            {
                // Only show the part A form
                if (tabPartA.rendered) {
                    if (TabPanel1.getActiveTab() != tabPartA) {
                        tabPartA.show();
                    }
    
                    if (tabPartA.iframe != null) {
                        if (&#100;ocument.frames[tabPartA.iframe.id].&#100;ocument.body == null) {
                            bpSetAutoLoad = true;
                        }
                        else
                            &#100;ocument.frames[tabPartA.iframe.id].Ext.net.DirectMethods.PopulateTab(lID); 
                    }
                    else
                        &#100;ocument.frames[tabPartA.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                }
                else 
                {
                    bpSetAutoLoad = true;
                }
    
                if (bpSetAutoLoad) {
                    tabPartA.autoLoad.url += '?ExampleID=' + lID;
                    tabPartA.show();
                }
    
                TabPanel1.addTab(tabPartA);
                TabPanel1.closeTab(tabPartB, 'hide');
                
                break;
            }
    
            case 2:
            {
                // Show the Part A form and Part B
                if (tabPartA.rendered) {
                    if (TabPanel1.getActiveTab() != tabPartA) {
                        tabPartA.show();
                    }
                    
                    if (tabPartA.iframe != null) {
                        if (&#100;ocument.frames[tabPartA.iframe.id].&#100;ocument.body == null) {
                            bpSetAutoLoad = true;
                        }
                        else
                            &#100;ocument.frames[tabPartA.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                    }
                    else
                        &#100;ocument.frames[tabPartA.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                }
                else {
                    bpSetAutoLoad = true;
                }
            
                if (bpSetAutoLoad) {
                    tabPartA.autoLoad.url += '?ExampleID=' + lID;
                    tabPartA.show();
                }
                
                //Display the original Part A
                TabPanel1.addTab(tabPartA);
                TabPanel1.setActiveTab(tabPartA);
                bpSetAutoLoad = false;
                
                if (tabPartB.rendered) {
                    if (TabPanel1.getActiveTab() != tabPartB) {
                        tabPartB.show();
                    }
                    
                    if (tabPartB.iframe != null) {
                        if (&#100;ocument.frames[tabPartB.iframe.id].&#100;ocument.body == null) {
                            bpSetAutoLoad = true;
                        }    
                        else
                            &#100;ocument.frames[tabPartB.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                    }
                    else
                        &#100;ocument.frames[tabPartB.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                }
                else {
                    bpSetAutoLoad = true;
                }
                
                if (bpSetAutoLoad) {
                    tabPartB.autoLoad.url += '?ExampleID=' + lID;
                    tabPartB.show();
                }
    
                TabPanel1.addTab(tabPartB);
                tabPartB.show();
                break;
            }
        }
    }
    </script>
    </head>
    <body>
        <form id="Form1" runat="server">
    
        <ext:ResourceManager runat="server" />
    
        
            <h1>Fixed Height TabPanel with options</h1>
            <p>Tabs with no tab strip and a fixed height that scroll the content.</p>
        
    
    
        
            <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Width="600" Height="250" lain="true" LayoutOnTabChange="true">
                <Items>
                    <ext:Panel ID="Tab1" runat="server" Title="Homepage" Html="My content was added with the Html Property."Padding="6" AutoScroll="true" />
                    <ext:Panel ID="tabPartA" runat="server" Title="Tab A" Padding="6" Hidden="true" AutoScroll="true">
                        <AutoLoad Url="test2.aspx" Mode="IFrame" />
                    </ext:Panel>
                    <ext:Panel ID="tabPartB" runat="server" Title="Tab B" Padding="6" Hidden="true" AutoScroll="true">
                        <AutoLoad Url="test3.aspx" Mode="IFrame" />
                    </ext:Panel>
                </Items>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button ID="btn1" runat="server" Text="Press First">
                                <Listeners>
                                    <Click Handler="openForms(2);" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btn2" runat="server" Text="Press Second">
                                <Listeners>
                                    <Click Handler="openForms(1);" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:TabPanel>
        
    
        </form>
    </body>
    </html>
    When the first button, btn1, is pressed both tabPartA and tabPartB are displayed and the autoload urls are updated to pass an ID parameter value of 2 to the pages contained within the frames.


    If i then return to the Homepage tab without selecting Tab A, then click the second button, btn2, which updates the ID parameter value passed to Tab A to 1.


    The problem that i am having is that when tabPartA loads it shows only the first parameter value and not the second parameter value until i click btn2 a second time.


    The code for the pages contained within the tabs is shown below,

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="test2.aspx.cs" Inherits="test2" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <ext:ViewPort id="vptMainLoginGood" runat="server">
                <Items>
                    <ext:FitLayout ID="FitLayout7" runat="server">
                        <Items>
                            <ext:panel id="panel1" runat="server" Title="Training Evaluation" Icon="PageEdit" Frame="true">
                                <Content>
                                    <ext:textfield id="txtExampleID" runat="server" width="480px" AllowBlank="true" FieldLabel="Example ID">
                                    </ext:textfield>
                                </Content>
                            </ext:panel>
                        </Items>
                    </ext:FitLayout>
                </Items>
            </ext:ViewPort>
        </form>
    </body>
    </html>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    public partial class test2: System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                int lpID = -1;
                
                if (Request["ExampleID"] != null)
                    lpID = int.Parse(Request["ExampleID"]);
    
                PopulateTab(lpID);
            }
        }
    
        [DirectMethod]
        public void PopulateTab(int lpID)
        {
            txtExampleID.Text = lpID.ToString();
        }
    }
    Could you please advise me of a way to resolve this problem.


    Thank You
  2. #2

    RE: [CLOSED] passing parameters into tabs with autoloads

    Hi Jeremy,

    Try the modified code below to see if it works. I've changed the following:

    1) Instead of appending the parameters to the URL string, I've added a "Params" collection within each AutoLoad which can be used to set the values, then in the JS code, you can do "tabPartA.autoLoad.params['ExampleID'] = 1" to update the param value;

    2) In the click event on the 2nd button I've added a ".reload()" call for the Tab - this appears to force it to reload the page with the amended parameter values.

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Fixed Height TabPanel with options - Ext.NET Examples</title>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function openForms(lID)
    {
        var bpSetAutoLoad = false;
        
        switch (lID)
        {
            case 1:
                // Only show the part A form
                if (tabPartA.iframe) {
                    if (TabPanel1.getActiveTab() != tabPartA) {
                        tabPartA.show();
                    }
    
                    if (tabPartA.iframe != null) {
                        if (&#100;ocument.frames[tabPartA.iframe.id].&#100;ocument.body == null) {
                            bpSetAutoLoad = true;
                        }
                        else
                            &#100;ocument.frames[tabPartA.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                    }
                    else
                        &#100;ocument.frames[tabPartA.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                }
                else {
                    bpSetAutoLoad = true;
                }
    
                if (bpSetAutoLoad) {
                    tabPartA.autoLoad.params["ExampleID"] = lID;
                    tabPartA.reload();
                    tabPartA.show();
                }
    
                TabPanel1.addTab(tabPartA);
                TabPanel1.closeTab(tabPartB, 'hide');
    
                break;
    
            case 2:
                // Show the Part A form and Part B
                if (tabPartA.rendered) {
                    if (TabPanel1.getActiveTab() != tabPartA) {
                        tabPartA.show();
                    }
                    
                    if (tabPartA.iframe != null) {
                        if (&#100;ocument.frames[tabPartA.iframe.id].&#100;ocument.body == null) {
                            bpSetAutoLoad = true;
                        }
                        else
                            &#100;ocument.frames[tabPartA.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                    }
                    else
                        &#100;ocument.frames[tabPartA.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                }
                else {
                    bpSetAutoLoad = true;
                }
            
                if (bpSetAutoLoad) {
                    tabPartA.autoLoad.params["ExampleID"] = lID;
                    tabPartA.show();
                }
                
                //Display the original Part A
                TabPanel1.addTab(tabPartA);
                TabPanel1.setActiveTab(tabPartA);
                bpSetAutoLoad = false;
                
                if (tabPartB.rendered) {
                    if (TabPanel1.getActiveTab() != tabPartB) {
                        tabPartB.show();
                    }
                    
                    if (tabPartB.iframe != null) {
                        if (&#100;ocument.frames[tabPartB.iframe.id].&#100;ocument.body == null) {
                            bpSetAutoLoad = true;
                        }    
                        else
                            &#100;ocument.frames[tabPartB.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                    }
                    else
                        &#100;ocument.frames[tabPartB.iframe.id].Ext.net.DirectMethods.PopulateTab(lID);
                }
                else {
                    bpSetAutoLoad = true;
                }
                
                if (bpSetAutoLoad) {
                    tabPartB.autoLoad.params["ExampleID"] = lID;
                    tabPartB.show();
                }
    
                TabPanel1.addTab(tabPartB);
                tabPartB.show();
                
                break;
        }
    }
    </script>
    </head>
    <body>
        <form id="Form1" runat="server">
    
        <ext:ResourceManager runat="server" />
    
        
            <h1>Fixed Height TabPanel with options</h1>
            <p>Tabs with no tab strip and a fixed height that scroll the content.</p>
        
    
    
        
            <ext:TabPanel ID="TabPanel1" runat="server" ActiveTabIndex="0" Width="600" Height="250" LayoutOnTabChange="true">
                <Items>
                    <ext:Panel ID="Tab1" runat="server" Title="Homepage" Html="My content was added with the Html Property." Padding="6" AutoScroll="true" />
                    <ext:Panel ID="tabPartA" runat="server" Title="Tab A" Padding="6" Hidden="true" AutoScroll="true">
                        <AutoLoad Url="test2.aspx" Mode="IFrame">
                            <Params>
                                <ext:Parameter Name="ExampleID" Mode="Value"></ext:Parameter>
                            </Params>
                        </AutoLoad>
                    </ext:Panel>
                    <ext:Panel ID="tabPartB" runat="server" Title="Tab B" Padding="6" Hidden="true" AutoScroll="true">
                        <AutoLoad Url="test2.aspx" Mode="IFrame">
                            <Params>
                                <ext:Parameter Name="ExampleID" Mode="Value"></ext:Parameter>
                            </Params>
                        </AutoLoad>
                    </ext:Panel>
                </Items>
                <BottomBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:Button ID="btn1" runat="server" Text="Press First">
                                <Listeners>
                                    <Click Handler="openForms(2);" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="btn2" runat="server" Text="Press Second">
                                <Listeners>
                                    <Click Handler="openForms(1);" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </BottomBar>
            </ext:TabPanel>
        
    
        </form>
    </body>
    </html>
    Hope that helps.

    Dan
  3. #3

    RE: [CLOSED] passing parameters into tabs with autoloads

    Cheers mate, works perfectly

    Have a nice weekend

    I'll see you the week after next

Similar Threads

  1. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 12:58 PM
  2. [CLOSED] AutoLoad - passing parameters
    By PLoch in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 11, 2011, 10:47 PM
  3. [CLOSED] Passing an array to a DirectMethod
    By macap in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 05, 2010, 10:28 AM
  4. Passing parameters with HttpProxy / Store
    By Washburn in forum 1.x Help
    Replies: 1
    Last Post: Jan 12, 2009, 6:18 AM
  5. [CLOSED] Passing values between tabs autoiframe method
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Nov 20, 2008, 1:11 AM

Posting Permissions