Showing div tags using jQuery

[Arulmanoj]

Hi,

I am using VS.Net 2008. I have created a Ajax web application in C#. In the webform1 i have 6 div tags. In each of the div tags i am showing a .acsx file. Here i am able to move betwwen each of the tabs created using DIV and Jquery. Now when i am in UserControl1.ac sx and click a button control in the webform1, I have to go to the last DIV tab. i.e UserControl6.ac sx should come to front.

Please any help me. It's very urgent.

Thanks
Manoj

[CroCrew]

Please post the code you have so far so that we can get a better idea of what we have to work with.

Happy Coding,
CroCrew~

[Arulmanoj]

Hi,

Here is code which i have developed.

<%@ Page Title="" Language="C#" MasterPageFile="~/SiteMaster.Master" AutoEventWireup="true" EnableEventValidation="false" 
    CodeBehind="MyAccount.aspx.cs" Inherits="CustomerPortal.MainPages.MyAccount.MyAccount" %>

<%@ Register Src="~/UserControls/PersonalInfoUc.ascx" TagName="PersonalInfoUc" TagPrefix="Uc1" %>
<%@ Register Src="~/UserControls/RelatedLinksUc.ascx" TagName="RelatedLinksUc" TagPrefix="Uc2" %>
<%@ Register Src="~/UserControls/LoginUc.ascx" TagName="LoginBoxUc" TagPrefix="Uc3" %>
<%@ Register Src="~/UserControls/NewsLetterUc.ascx" TagName="NewsLetterUc" TagPrefix="Uc4" %>
<%@ Register Src="~/UserControls/ProductCatalogueUc.ascx" TagName="ProductCatalogueUc"
    TagPrefix="Uc5" %>
<%@ Register Src="~/UserControls/NavigationUc.ascx" TagName="NavigationUc" TagPrefix="Uc6" %>
<%@ Register Src="~/UserControls/SideBannerUc.ascx" TagName="SideBannerUc" TagPrefix="Uc7" %>
<%@ Register Src="~/UserControls/MainBannerUc.ascx" TagName="MainBannerUc" TagPrefix="Uc8" %>
<%@ Register Src="~/UserControls/LatestNewsUc.ascx" TagName="LatestNewsUc" TagPrefix="Uc9" %>
<%@ Register Src="~/UserControls/MyPreferencesUc.ascx" TagName="MyPreferencesUc"
    TagPrefix="Uc10" %>
<%@ Register Src="~/UserControls/OTPUc.ascx" TagName="OTPUc" TagPrefix="Uc11" %>
<%@ Register Src="~/UserControls/PaymentInfoUc.ascx" TagName="PaymentInfoUc" TagPrefix="Uc12" %>
<%@ Register Src="../../UserControls/TellAFriendUc.ascx" TagName="TellAFriendUc"
    TagPrefix="Uc13" %>
<%@ Register Src="~/UserControls/VehicleSearchUc.ascx" TagName="VehicleSearchUc"
    TagPrefix="Uc15" %>
    <%@ Register Src="~/UtilityControls/ProgressIndicatorUc.ascx" TagName="ProgressIndicatorUc" TagPrefix="Uc16" %>
<asp:Content ID="Head" ContentPlaceHolderID="HeadContent" runat="server">
    <link rel="stylesheet" href="../../css/ui.tabs.css" type="text/css" media="print, projection, screen" />

    <script src="../../js/jquery-1.2.4b.js" type="text/javascript"></script>

    <script src="../../js/ui.core.js" type="text/javascript"></script>

    <script src="../../js/ui.tabs.js" type="text/javascript"></script>

    <link rel="stylesheet" href="../../css/ui.tabs.css" type="text/css" media="print, projection, screen">

    <script src="../../js/openclose.js" type="text/javascript"></script>

    <script type="text/javascript">

    function PersonalInfo_SaveClick() {
        __doPostBack('<%= MyInfoPnl.ClientID %>', 'Action=PersonalInfoSaveClick');
    }
    function MyPref_SaveClick() {
        __doPostBack('<%= MyInfoPnl.ClientID %>', 'Action=MyPrefSaveClick');
    }
    function personalInfoConfirmPopup_OnOkScript() {
        __doPostBack('<%= MyInfoPnl.ClientID %>', 'Action=PersonalInfoFurtherChanges');
    }
    function myPrefConfirmPopup_OnOkScript() {
        __doPostBack('<%= MyInfoPnl.ClientID %>', 'Action=MyPrefFurtherChanges');
    }

[B]    function Popup_OnOkScript() {
        __doPostBack('<%= MyInfoPnl.ClientID %>', 'Action=MoveTOOTP');
        //MoveToOTP
    }[/B]
    function personalInfoConfirmPopup_OnCancelScript() {
        __doPostBack('<%= MyInfoPnl.ClientID %>', 'Action=SaveChanges');
    }
    </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="BreadCrumb" runat="server">
    <span class="orangetext"><a href="http://bytes.com/topic/Welcome.aspx" class="breadcrumbs">Home</a>&nbsp;&nbsp;&raquo;&nbsp;&nbsp;<strong>My
        Account</strong></span>
</asp:Content>
<asp:Content ID="LeftNav" ContentPlaceHolderID="LeftNav" runat="server">
    <Uc6:NavigationUc ID="NavigationUc1" runat="server" />
    <Uc7:SideBannerUc ID="SideBannerUc1" runat="server" />
</asp:Content>
<asp:Content ID="TopBanner" ContentPlaceHolderID="TopBanner" runat="server">
    <Uc8:MainBannerUc ID="MainBannerUc1" runat="server" />
</asp:Content>
<asp:Content ID="RightNav" ContentPlaceHolderID="RightNav" runat="server">
    <asp:UpdatePanel ID="RightNavPnl" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="False">
        <ContentTemplate>
            <Uc3:LoginBoxUc ID="LoginBoxUc1" runat="server" />
            <Uc5:ProductCatalogueUc ID="ProductCatalogueUc1" runat="server" />
            <!--#include file="../../Contents/zinc_NOA_Related_Accounts.html" -->
            <Uc4:NewsLetterUc ID="NewsLetterUc1" runat="server" />
            <Uc13:TellAFriendUc ID="TellAFriendUc1" runat="server" />
            <Uc15:VehicleSearchUc ID="VehicleSrchUc" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Body" ContentPlaceHolderID="MainContent" runat="server">
    <div>
        <b class="greenbox"><b class="greenbox1"><b></b></b><b class="greenbox2"><b></b></b>
            <b class="greenbox3"></b><b class="greenbox4"></b><b class="greenbox5"></b></b>
        <div class="greenboxfg">
            <span class="whiteheader">Welcome</span></div>
        <b class="greenbox"><b class="greenbox5"></b><b class="greenbox4"></b><b class="greenbox3">
        </b><b class="greenbox2"><b></b></b><b class="greenbox1"><b></b></b></b>
    </div>
    <br />
    <asp:UpdateProgress AssociatedUpdatePanelID="MyInfoPnl" ID="RegistrationPrg"
	runat="server" DisplayAfter="0">
	<ProgressTemplate>
		<Uc16:ProgressIndicatorUc id="MyInfoPrgInd" runat="server" ProgressText="Please wait..."/>
	</ProgressTemplate>
</asp:UpdateProgress>
    <asp:UpdatePanel ID="MyInfoPnl" UpdateMode="Conditional" ChildrenAsTriggers="false"
        runat="server" OnLoad="MyInfoPnl_Load">
        <ContentTemplate>
            <div id="TabsContainer">
[B]                <ul id="tabs" runat="server">
                    <li class="tabs-nav li"><a href="#tab1"><span>My Info</span></a></li>
                    <li class="tabs-nav li"><a href="#tab2"><span>My Pref</span></a></li>
                    <li class="tabs-nav li"><a href="#tab3"><span>Debit Order</span></a></li>
                    <li class="tabs-nav li"><a href="#tab4"><span>Order History</span></a></li>
                    <li class="tabs-nav li"><a href="#tab5"><span>Invoice History</span></a></li>
                    <li class="tabs-nav li" id="tab66" runat="server"><a href="#tab6"><span>OTP</span></a></li>
                </ul>[/B]
                <div id="tab1">
                    <Uc1:PersonalInfoUc ID="PersonalInfoUc1" runat="server" />
                    <br />
                    <div class="btngreen">
                        <div>
                            <asp:Button ID="PersonalInfoSaveChangesBtn" runat="server" CssClass="button" OnClientClick="PersonalInfo_SaveClick(); return false;">
                            </asp:Button>
                        </div>
                    </div>
                    <br />
                </div>
                <div id="tab2">                    
                    <Uc10:MyPreferencesUc ID="MyPreferencesUc1" runat="server"  EnableMode="false"/>
                    <br />
                    <div class="btngreen">
                        <div>
                            <asp:Button ID="MyPrefSaveChangesBtn" runat="server" CssClass="button" OnClientClick="MyPref_SaveClick(); return false;">
                            </asp:Button>
                        </div>
                    </div>
                    <br />
                </div>
                <div id="tab3">
                    <div align="left" class="orangetext" style="padding: 15px;">
                        <asp:Label ID="personalInfoTopLbl" runat="server"></asp:Label>
                    </div>
                    <div align="left" class="bodytext" style="padding: 0 15px 10px;">
                        <asp:Label ID="FieldLbl" runat="server"></asp:Label>
                    </div>
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                        <tr>
                            <td bgcolor="#a8c399" height="30">
                                <div align="left" class="whitetext" style="padding-left: 15px; padding-right: 15px;">
                                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                            <td>
                                                <strong>Debit Order Information </strong>
                                            </td>
                                            <td align="right" class="whitetext11">
                                                &nbsp;
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div>
                                    <asp:UpdatePanel runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"
                                        ID="DebitOrderUpdatePnl">
                                        <ContentTemplate>
                                            <label runat="server" id="NoDataFound" class="blacktext">
                                                No Data Found</label>
                                            <asp:GridView ID="DebitOrderGrid" runat="server" CssClass="cart" orderStyle="None"
                                                CellPadding="0" GridLines="None" Width="100%" AutoGenerateColumns="False" EmptyDataText="No Data Found"
                                                OnRowDeleting="DebitOrderGridDeleting" Visible="false" >
                                                <Columns>
                                                    <asp:BoundField DataField="Holder_Name" HeaderText="Holder Name" />
                                                    <asp:BoundField DataField="Account_NO" HeaderText="Account No" />                                                    
                                                    <asp:TemplateField HeaderText="Branch Code">
                                                        <ItemTemplate>
                                                            <asp:Label ID="Branch_Code" runat="server" Text='<%# Eval("Branch_Code")%>' />
                                                            <asp:HiddenField ID="Account_Type" runat="server" Value='<%# Eval("Account_Type")%>' />
                                                            <asp:HiddenField ID="Debit_Order_ID" runat="server" Value='<%# Eval("Debit_Order_ID")%>' />
                                                            <asp:HiddenField ID="Next_Due_Date" runat="server" Value='<%# Eval("Next_Due_Date")%>' />
                                                        </ItemTemplate>
                                                    </asp:TemplateField>
                                                    <asp:CommandField DeleteText="Modify" ShowDeleteButton="True" />
                                                </Columns>
                                            </asp:GridView>
                                            <asp:HiddenField ID="DebitOrderIDHdn" runat="server" />
                                            <asp:HiddenField ID="NextDueDateHdn" runat="server" />
                                            <br />
                                            <asp:Panel ID="DebitOrdersPnl" runat="server">
                                                <Uc12:PaymentInfoUc ID="PaymentInfoUc1" runat="server" />
                                            </asp:Panel>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </div>
                                <div id="debitOrderSave" runat="server" class="btngreen">
                                    <div>
                                        <asp:Button ID="DebitOrderSaveChangesBtn" runat="server" CssClass="button" OnClientClick="return false;"></asp:Button>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <br />
                </div>
                <div id="tab4">
                    <asp:UpdatePanel runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"
                        ID="OrderHistoryPnl">
                        <ContentTemplate>
                            <asp:GridView ID="OrderHistoryGrid" runat="server" AllowPaging="True" CellPadding="1"
                                CellSpacing="1" OnPageIndexChanging="OrderHistoryGrid_PageIndexChanging" CssClass="receiptcart" GridLines="None" AutoGenerateColumns="False" 
                                Width="100%">
                                <EmptyDataTemplate>
                                    No Record Found
                                </EmptyDataTemplate>
                                <Columns>
                                    <asp:BoundField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="235px" DataField="Product_Name" HeaderText="Product Name" />
                                    <asp:BoundField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="100px" DataField="Purchase_Date" HeaderText="Date Purchased" DataFormatString="{0:dd-MM-yyyy}" />
                                    <asp:BoundField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="85px" DataField="Price" HeaderText="Price" DataFormatString="R {0:N2}" />
                                    <asp:TemplateField HeaderText="Invoice Number">                                        
                                        <ItemTemplate>                                            
                                            <a onclick="window.open('MyInvoice.aspx?InvoiceNo=<%# Eval("Invoice_No") %>', 'MyInvoice', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=800, height=400,top=100,left=100;');return false;"
                                                href="MyInvoice.aspx?InvoiceNo=<%# Eval("Invoice_No") %>" target="_blank" class="blacklink_sml">
                                                <%# Eval("Invoice_No") %></a>
                                            <asp:Label ID="OrderStatusLbl" runat="server" Text='<%# Eval("Order_Status") %>' />
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                                <AlternatingRowStyle CssClass="alternaterow" />
                            </asp:GridView>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <div id="tab5">
                    <asp:UpdatePanel runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional"
                        ID="InvoiceHistoryPnl">
                        <ContentTemplate>
                            <asp:GridView ID="InvoiceHistoryGrid" runat="server" AllowPaging="True" CellPadding="1"
                                CellSpacing="1" CssClass="receiptcart" GridLines="None" AutoGenerateColumns="False" Width="100%" OnPageIndexChanging="InvoiceHistoryGrid_PageIndexChanging">
                                <EmptyDataTemplate>
                                    No Record Found
                                </EmptyDataTemplate>
                                <Columns>
                                    <asp:BoundField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="70px" DataField="Invoice_Date" HeaderText="Date" DataFormatString="{0:dd-MM-yyyy}" />
                                    <asp:BoundField HeaderStyle-HorizontalAlign="Left" DataField="Product_Name" HeaderText="Product Name" />
                                    <asp:TemplateField HeaderStyle-HorizontalAlign="Left" HeaderText="Invoice Number">
                                        <ItemTemplate>
                                            <a onclick="window.open('MyInvoice.aspx?InvoiceNo=<%# Eval("Invoice_No") %>', 'MyInvoice', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=no, width=800, height=400,top=100,left=100;');return false;"
                                                href="MyInvoice.aspx?InvoiceNo=<%# Eval("Invoice_No") %>" target="_blank" class="blacklink_sml">
                                                <%# Eval("Invoice_No") %></a>
                                            
                                        </ItemTemplate>
                                    </asp:TemplateField>                                    
                                    <asp:BoundField HeaderStyle-HorizontalAlign="Left" HeaderStyle-Width="70px" DataField="Price" HeaderText="Amount" DataFormatString="R {0:N2}" />
                                    <asp:BoundField HeaderStyle-HorizontalAlign="Left" DataField="Invoice_Status" HeaderText="Status" />
                                </Columns>
                                <AlternatingRowStyle CssClass="alternaterow" />
                            </asp:GridView>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <div id="tab6">
                    <Uc11:OTPUc ID="OTPUc1" runat="server" />
                </div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <br />

    <script type="text/javascript">
        function DebitOrderSaveChangesBtn_click(sender, args) {
            var ddSelected = (returnObjById("<%=DebitOrderIDHdn.ClientID%>")) ? returnObjById("<%=DebitOrderIDHdn.ClientID%>").value : false;
            if (isEmpty(ddSelected)) {
                ShowErrorMessage("Please select one Debit Order detail by clicking modify link in the list to Save Changes");
            }
            else {
                if (ValidatePayment(false)) {
                    __doPostBack('<%= DebitOrderUpdatePnl.ClientID%>', 'Action=DebitOrderSaveChangesBtnClick');
                }
            }
        }

        function DebitOrder_setup() {

            if ($get('<%=DebitOrderSaveChangesBtn.ClientID %>')) {
                $addHandler($get('<%=DebitOrderSaveChangesBtn.ClientID%>'), 'click', DebitOrderSaveChangesBtn_click);
            }
        }
        Sys.Application.add_load(DebitOrder_setup);
        $(function() {
            $('#TabsContainer > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle'} });
        });

        $(document).ready(function() {
            $("dd").hide();
            $("dt a").click(function() {
                $("dd:visible").slideUp("medium");
                $(this).parent().next().slideDown("medium");
                return false;
            });
        });

[B]        $(function MoveTOOTP() {

        $("#<%=MyPrefSaveChangesBtn.ClientID%>").click(function() {
            $("#tab1").hide();
            $("#tab2").hide();
            $("#tab3").hide();
            $("#tab4").hide();
            $("#tab5").hide();

            $("#tab6").slideDown("medium"); 
            
        });     
    });[/B]
    </script>

</asp:Content>

I have highlighted the lines where I am facing creating the div tabs and jquery function where i am trying to set focus for the OTP tab.

Thanks

Manoj

[Frinavale]

Could your problem be because you don't have an element with the ID "tab6"...

See line 10 your above posted code....notice how you have a tab66 but no tab6.


In the future please just post the code that you are having problems with. It's hard to look through all that code.

Also please use code tags whenever you post code. It makes it easier for us to read and it gives us line numbers to refer to.

-Frinny

[Arulmanoj]

Hi,

Actually "tab66" will won't come there.

[code=html]

function Popup_OnOkScrip t() {
__doPostBack('< %= MyInfoPnl.Clien tID %>', 'Action=MoveTOO TP');
//MoveToOTP

<ul id="tabs" runat="server">
<li class="tabs-nav li"><a href="#tab1"><s pan>My Info</span></a></li>
<li class="tabs-nav li"><a href="#tab2"><s pan>My Pref</span></a></li>
<li class="tabs-nav li"><a href="#tab3"><s pan>Debit Order</span></a></li>
<li class="tabs-nav li"><a href="#tab4"><s pan>Order History</span></a></li>
<li class="tabs-nav li"><a href="#tab5"><s pan>InvoiceHist ory</span></a></li>
<li class="tabs-nav li" id="tab66" runat="server"> <a href="#tab6"><s pan>OTP</span></a></li>
</ul> [/code]

on Button click I am calling the below script to show the tab6. Using this i am able to show the content in the DIV. But the tab is not selected and highlighted.

$(function MoveTOOTP() { 
  
        $("#<%=MyPrefSaveChangesBtn.ClientID%>").click(function() { 
            $("#tab1").hide(); 
            $("#tab2").hide(); 
            $("#tab3").hide(); 
            $("#tab4").hide(); 
            $("#tab5").hide(); 
  
            $("#tab6").slideDown("medium");  
  
        });

[Frinavale]

In JavaScript there is no such thing as a .hide() method on elements. This method is part of the JQuery library.

What does it do?
(I think it would probably set the style of the element to display:none to hide it)

Now, if your list element ( the <li> element) is hidden (has a display:none) then you will not see the style change for any element within it.

-Frinny

[Arulmanoj]

Hi,

First i am creating DIV called "TabsContainer" . Inside this DIV I am creating 6 list items as
"<li class="tabs-nav li"><a href="#tab1"><s pan>My Info</span></a></li>"
After this I am creating 6 DIV to show 6 Usercontrols(.a scx) as
<div id="tab1">.
Then I have written the Jquery as below:

[code=html]
$(function() {
$('#TabsContain er > ul').tabs({ fx: { height: 'toggle', opacity: 'toggle'} });
});

$(document).rea dy(function() {
$("dd").hide( );
$("dt a").click(funct ion() {
$("dd:visible") .slideUp("mediu m");
$(this).parent( ).next().slideD own("medium");
return false;
});
});
[/code]

Now when I click a button in DIV 1 or DIV 2, I have to show the DIV 6(tab6).
Hope you understand my problem.

Thanks

[Frinavale]

I moved this question to the JavaScript forum where I think you'll get more help.

Happy Coding
-Frinny