How can I change my defautl tab in jQuery

Question

I want to change the default tab in my jQuery code here:

    $(function () {
        $("#tabs").tabs({
            activate: function () {
                var selectedTab = $('#tabs').tabs('option', 'active');
                $("#<%= hdnSelectedTab.ClientID %>").val(selectedTab);
            },
            active: "<%= hdnSelectedTab.Value %>"
        });
    });

Here are some of my tabs.

 <div id="tabs">           
  <ul id="tabs-name">
    <li><a href="#tabs-searchContractSection">Buscar contrato</a></li>
    <li><a href="#tabs-quoteSection">Cotización</a></li>
    <li><a href="#tabs-clienteSection">Client</a></li>
    <li><a href="#tabs-TimeSection">Tiempo</a></li>
    <li><a href="#tabs-brokenProductInformationSection">Equipo</a></li>
    <li><a href="#tabs-ComponentesSection">Componentes</a></li>
    <li><a href="#tabs-completedInterventionSection">Intervención terminado</a></li>
    <li><a href="#tabs-warrantyAndRepairSection">Garantia y reparacion</a></li>
    <li><a href="#tabs-archiveSection">Archivos</a></li>
    <li><a href="#tabs-expeditionSection">Expedicion</a></li>
  </ul>
    <asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
     <div id="tabs-searchContractSection" class="menusection">             
             <contratoBuscarWebControl:contratoBuscarControl ID="WebControl3" runat="server" />
    </div>   

       <div id="tabs-quoteSection" class="menusection">
                <cotizacionWebControl:cotizacionControl ID="Header2" runat="server" />
        </div>      

       <div id="tabs-clienteSection" class="menusection">
             <ClientWebControl:clientControl ID="Header4" runat="server" />
        </div>

       <div id="tabs-TimeSection" class="menusection">
             <tiempoControlerWebControl:tiempoControler ID="Header5" runat="server" />
     </div>

I want to make "tabs-quoteSection" the default tab how can I adjust my jQuery to make this happen. Thank you for any help

Did you adding double quotes between: `<%= hdnSelectedTab.Value %>` Something like this: `active: "<%= hdnSelectedTab.Value %>"`? — Danny Fardy Jhonston Bermúdez, Sep 05 '19 at 19:53
I did now thank you for pointing out the error. But I still you like to know how I can change the default tab to "tabs-quoteSection" — J.C, Sep 05 '19 at 19:57
What is the tabs method? Is this jqueryUI? If so, please update the tag. — wazz, Sep 05 '19 at 20:24
Please see: https://api.jqueryui.com/tabs/#option-active The Option requires an Integer not a String. — Twisty, Sep 06 '19 at 18:27

score 1 · Answer 1 · answered Sep 06 '19 at 18:38

I generally suggest to separate client side and server side scripting. You can use .NET results to populate JS yet it may be better to POST or GET the data you need from the back-end.

Consider the following example:

$(function() {
  function getTabIndex() {
    var min = 0;
    var max = $("#tabs-name li").length - 1;
    var i = -1;
    // Ask .NET for Index via POST
    // Push resulting Integer to 'i' variable
    if (i == -1 || i > max) {
      i = max;
    }
    return i;
  }
  var defaultTabIndex = getTabIndex();
  $("#tabs").tabs({
    active: defaultTabIndex
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul id="tabs-name">
    <li><a href="#tabs-searchContractSection">Buscar contrato</a></li>
    <li><a href="#tabs-quoteSection">Cotización</a></li>
    <li><a href="#tabs-clienteSection">Client</a></li>
    <li><a href="#tabs-TimeSection">Tiempo</a></li>
    <li><a href="#tabs-brokenProductInformationSection">Equipo</a></li>
    <li><a href="#tabs-ComponentesSection">Componentes</a></li>
    <li><a href="#tabs-completedInterventionSection">Intervención terminado</a></li>
    <li><a href="#tabs-warrantyAndRepairSection">Garantia y reparacion</a></li>
    <li><a href="#tabs-archiveSection">Archivos</a></li>
    <li><a href="#tabs-expeditionSection">Expedicion</a></li>
  </ul>
  <asp:HiddenField ID="hdnSelectedTab" runat="server" Value="0" />
  <div id="tabs-searchContractSection" class="menusection">
    <contratoBuscarWebControl:contratoBuscarControl ID="WebControl3" runat="server" />
  </div>

  <div id="tabs-quoteSection" class="menusection">
    <cotizacionWebControl:cotizacionControl ID="Header2" runat="server" />
  </div>

  <div id="tabs-clienteSection" class="menusection">
    <ClientWebControl:clientControl ID="Header4" runat="server" />
  </div>

  <div id="tabs-TimeSection" class="menusection">
    <tiempoControlerWebControl:tiempoControler ID="Header5" runat="server" />
  </div>

Hope this helps.

I am no expert in programming how exaclty do I // Ask .NET for Index via POST // Push resulting Integer to 'i' variable? — J.C, Sep 06 '19 at 23:44
@JuniorCortenbach take a look: https://stackoverflow.com/questions/4251157/what-is-a-postback — Twisty, Sep 07 '19 at 05:47

How can I change my defautl tab in jQuery

1 Answers1