CODEWITHSUNDEEP
c#jqueryasp.nettabs
Kerwin Londono
Kerwin Londono

Reputation: 3

Find out from C# Code behind what is the active Jquery tab index

I have two aspx buttons on two separate Jquery tab panels. I'd like to get the index of the active Jquery tab from the c# code behind so that the button within that tab becomes invisible. Any help will be greatly appreciated. ASP:

    <asp:HiddenField ID="hiddenFGetActiveTab" runat="server"/>
            <button ID="btnGetActiveTab"></button>
            <div id="tabs">
            <ul>        
            <li><a href="#tabs-1"></a></li>        
            <li><a href="#tabs-2"></a></li>
            </ul>
            <div id="tabs-1" style="border: 1px solid #E5E5E5;">
            <asp:UpdatePanel ID="updatePanelSearchCustomer" runat="server" UpdateMode="Conditional">
            <contentTemplate>
            <asp:Button ID="btnCustSearch" runat="server" Text="Search" ToolTip="Click to Search" OnClick="btnCustSearch_Click" />
            <asp:Button ID="btnAddCustomer" runat="server" Text="Add New" CommandName="insert" Visible="True" ToolTip="Add to Workbasket" OnClick="addToWorkBasket_Click" />
            <asp:GridView ID="gridCustSearch" OnRowCreated="gridCustLicSearch_RowCreated runat="server"></asp:GridView>
            </ContentTemplate>
            </asp:UpdatePanel>                 
            </div>
            <div id="tabs-2" style="border: 1px solid #E5E5E5;">
            <asp:Button ID="btnSearchLicense" runat="server" Text="Search" ToolTip="Click to Search" />
            <asp:Button ID="btnAddLicense" runat="server" Text="Add to Workbasket" Visible="False" ToolTip="Add to Workbasket" OnClick="btnAddLicense_Click" />
            <asp:UpdatePanel ID="updatePanelLicenseSearchFields" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
            <asp:GridView ID="gridLicSearch" runat="server" OnRowCreated="gridCustLicSearch_RowCreated"></asp:GridView>
            </ContentTemplate>
            </asp:UpdatePanel>
            </div>
            </div>

JQUERY:

                <link href="../css/jquery-ui-1.9.2.custom.css" rel="stylesheet" />
            <script src="../js/jquery-1.8.3.js"></script>
            <script src="../js/reflection.js"></script>
            <script src="../js/jquery-ui-1.9.2.custom.js"></script>
            <script type="text/javascript">


            $(document).ready(function () {


            $(function () {
            $("#tabs").tabs({ event: "click" });

            });

            $('#btnGetActiveTab').click(function (event) {
            event.preventDefault();
            varTab = $("#tabs").tabs("option", "selected");
            document.getElementById("<%= hiddenFGetActiveTab.ClientID %>").value = varTab;
            //$("#hiddenFGetActiveTab").val(varTab);
            //alert(varTab);
            alert(document.getElementById("<%= hiddenFGetActiveTab.ClientID %>").value);
            });

            function tabChanged(tabIndex) {
            varTab = $("#tabs").tabs("option", "selected");
            $("#hiddenFGetActiveTab").val(varTab);
            alert(document.getElementById("<%= hiddenFGetActiveTab.ClientID %>").value);
            }
            });

C# Code Behind:

                protected void gridCustLicSearch_RowCreated(object sender, GridViewRowEventArgs e)
            if (activeTabIndex == Tab-1)
            {
            //Make First button visible
            //do other stuff


            }
            else if (activeTab == Tab-2)
            {   
            //Make Second button visible
            //do other stuff

            }

Upvotes: 0

Views: 5603

Answers (3)

Rahul
Rahul

Reputation: 437

Guess ui.newTab.index() would do the trick.

Do check the tab index and set visibilty for your button accordingly.

For instance like,

document.getElementById('<%=Button1.ClientID%>').style.display = 'block'

You dont have to go server side for that.

Upvotes: 0

Luca Morelli
Luca Morelli

Reputation: 2560

I think this may be of help http://api.jqueryui.com/tabs/#event-activate

If you can handle the tab activation event, you can set an Hidden field with the state, or to make an Ajax call to the server to send the data to a server session.

Another way may be, when you make the post, to check the Active option http://api.jqueryui.com/tabs/#option-active to add the index to the posted data.

Upvotes: 0

Blachshma
Blachshma

Reputation: 17405

Without seeing any of your code, I'd recommend using a <asp:HiddenField...
Whenever you change a tab, set the hidden field to the index of the current tab.

Then, in the codebehind you can see which tab is currently selected and enable/disable things as you wish...

Short Example:
In your aspx page add the following:

<asp:HiddenField ID="hdnField" runat="server" />

When you change tabs (in Javascript):

function tabChanged(tabIndex)
{
    $("#hdnField").val(tabIndex);
}

In CodeBehind:

if (hdnField.Value == "1")
   ....

Upvotes: 1

Related Questions