locked
Ajax Tab Container & Tab Panel RRS feed

  • Question

  • User1077245351 posted

    I have three tabs but the third tab doesn't work like the first and second when I click the tabs.  Before worked with the first, second and third tabs , and now the third tab stop working?????  Why?

    Wednesday, September 10, 2014 6:33 PM

Answers

  • User2103319870 posted

    Also I tried with Jquery tab but it's give me an error:   Object doesn't support property or method 'tabs'

    Your jquery Code for tab is working fine in my sample application.

    Sample Code:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script>
          $(function () {
              $("#tabs").tabs();
          });
      </script>
    </head>
    <body>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">tab2</a></li>
        <li><a href="#tabs-3">tab3</a></li>
      </ul>
    
    <div id="tabs-1">
    </div>
    
    <div id="tabs-2">
    </div>
    
    
    <div id="tabs-3">
    </div>
    </body>
    </html>

    You need to ensure that you are connected to internet since you are using online hosted Jquery Libraries.

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

    However if you dont have internet then you may need to downlad the file later when you are connected to internet and then add the files to your solution. so that it will work always.

    You can follow the below steps to add the jquery files to your solution

    You can download the latest Jquery files from Jquery download section or from online Jquery Hosted sites and use it in your project. Personally I also prefer to do that as we have a dependency on network (internet) whenever we use the online hosted libraries.

    To add JQuery files to your project you need to manually add  the Jquery Js files to your solution

    First add a scripts folder to your project, so that you can keep all your script files in

    • Open your Project within the Solution Explorer
    • Right-click the Main WebProject and Choose Add option
    • You will be able to see new side window opened from that select the New Folder option
    • Rename the folder name to “Scripts” to add it to your project. 

    Now you have a folder where you can keep all your Js scripts files. 

    • Right-click the Scripts folder and Choose Add Existing Item option
    • Next step is to add the jquery files to your project
    • Find and select the jquery-1.10.2.js library  by browsing to its downloaded folder location)
    • Click the Ok button to add it to your Project.

    Next step is to add the jquery ui files to your project

    • Find and select the jquery-ui-1.10.4.min.js library by browsing to its downloaded folder location.
    • Click the Ok button to add it to your Project.

    Next step is to add the css files to your project

    • Find and select the jquery-ui-1.10.4.min.css library  by browsing to its downloaded folder location)
    • Click the Ok button to add it to your Project.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 10, 2014 7:56 PM

All replies

  • User2103319870 posted

    Could you please post the mark up of your tab control?

    Wednesday, September 10, 2014 7:14 PM
  • User1077245351 posted

    Here :

    aspx:

    <script type="text/javascript">
        //function PanelClick(sender, e) {
        //}
        function ActiveTabChanged(sender, e) {
        }
    </script>
    
    
    <ajaxToolkit:ToolkitScriptManager 
        ID="ToolkitScriptManager1" 
        runat="server"
           >
    </ajaxToolkit:ToolkitScriptManager>
    
    
    <ajaxToolkit:TabContainer 
        ID="TabContainer" 
        runat="server"
        Height="660px" 
        Width ="1456px" 
        BorderStyle ="None"  
        BorderWidth ="0" 
        OnClientActiveTabChanged="ActiveTabChanged" 
        ActiveTabIndex ="3" 
        OnActiveTabChanged ="TabContainer_ActiveTabChanged" 
        style="margin-left : 15px"
        CssClass ="ajax__tab_blueGrad-theme ">
    
    
    <ajaxToolkit:TabPanel  
        ID="TabPanel1" 
        HeaderText="TabOne" 
        runat="server"> 
    <ContentTemplate>
    
    First Tab
    
    </ContentTemplate>
    </ajaxToolkit:TabPanel>
    
    
    
    <ajaxToolkit:TabPanel  
        ID="Tabpanel2" 
        HeaderText="tabTwo" 
        runat="server"> 
    <ContentTemplate>
    
    Tab Two
    </ContentTemplate>
    </ajaxToolkit:TabPanel>
    
    
    <ajaxToolkit:TabPanel  
        ID="Tabpanel3" 
        HeaderText="tabThree" 
        runat="server"> 
    <ContentTemplate>
    
    Tab Three
    </ContentTemplate>
    </ajaxToolkit:TabPanel>
    
    

    VB.NET:

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
    
                If Not (ViewState("ActiveTabIndex") Is Nothing) AndAlso (Not (sender Is Nothing)) Then
                    If sender.[GetType]().ToString().Equals("AjaxControlToolkit.TabContainer") Then
                        DirectCast(sender, AjaxControlToolkit.TabContainer).ActiveTabIndex = CInt(ViewState("ActiveTabIndex"))
                    End If
                End If
    End sub
    
    Protected Sub TabContainer_ActiveTabChanged(sender As Object, e As EventArgs)
            ViewState("ActiveTabIndex") = TabContainer.ActiveTabIndex
            ' TabContainer1_ActiveTabChanged(TabContainer1, Nothing)
        End Sub
    

    Wednesday, September 10, 2014 7:42 PM
  • User1077245351 posted

    Also I tried with Jquery tab but it's give me an error:   Object doesn't support property or method 'tabs'

    aspx:

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script>
          $(function () {
              $("#tabs").tabs();
          });
      </script>
    
      <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">tab2</a></li>
        <li><a href="#tabs-3">tab3</a></li>
      </ul>
    
    <div id="tabs-1">
    </DIV>
    
    <div id="tabs-2">
    </DIV>
    
    
    <div id="tabs-3">
    </DIV>
    
    

    Wednesday, September 10, 2014 7:47 PM
  • User2103319870 posted

    Also I tried with Jquery tab but it's give me an error:   Object doesn't support property or method 'tabs'

    Your jquery Code for tab is working fine in my sample application.

    Sample Code:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
        <script>
          $(function () {
              $("#tabs").tabs();
          });
      </script>
    </head>
    <body>
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">Tab1</a></li>
        <li><a href="#tabs-2">tab2</a></li>
        <li><a href="#tabs-3">tab3</a></li>
      </ul>
    
    <div id="tabs-1">
    </div>
    
    <div id="tabs-2">
    </div>
    
    
    <div id="tabs-3">
    </div>
    </body>
    </html>

    You need to ensure that you are connected to internet since you are using online hosted Jquery Libraries.

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
      <script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

    However if you dont have internet then you may need to downlad the file later when you are connected to internet and then add the files to your solution. so that it will work always.

    You can follow the below steps to add the jquery files to your solution

    You can download the latest Jquery files from Jquery download section or from online Jquery Hosted sites and use it in your project. Personally I also prefer to do that as we have a dependency on network (internet) whenever we use the online hosted libraries.

    To add JQuery files to your project you need to manually add  the Jquery Js files to your solution

    First add a scripts folder to your project, so that you can keep all your script files in

    • Open your Project within the Solution Explorer
    • Right-click the Main WebProject and Choose Add option
    • You will be able to see new side window opened from that select the New Folder option
    • Rename the folder name to “Scripts” to add it to your project. 

    Now you have a folder where you can keep all your Js scripts files. 

    • Right-click the Scripts folder and Choose Add Existing Item option
    • Next step is to add the jquery files to your project
    • Find and select the jquery-1.10.2.js library  by browsing to its downloaded folder location)
    • Click the Ok button to add it to your Project.

    Next step is to add the jquery ui files to your project

    • Find and select the jquery-ui-1.10.4.min.js library by browsing to its downloaded folder location.
    • Click the Ok button to add it to your Project.

    Next step is to add the css files to your project

    • Find and select the jquery-ui-1.10.4.min.css library  by browsing to its downloaded folder location)
    • Click the Ok button to add it to your Project.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, September 10, 2014 7:56 PM