Geek Answers Handbook

How to get current display tab index with jquery 1.7.2

I am developing a usin html + PHP + jquery webpage and am facing the following problem. The page uses jquery-1-7-2.js (I cannot update some historical reasons ...). I use PHP and the form to query the MySQL database, and then diplay the result on different tabs (using jquery).

The problem is that I want to be able to stay on the current active tab when the page is refreshed (the form provokes an automatic refresh when changing).

There is a type of code that I use:

<html> <div class="container"> <div class="row"> <div class="span12"> <div class="well"> <div class="row"> <div class="span2"> <form name="choice"> <label>Choice :</label> <select name="menu" style="width:150px" onChange="refreshFormTechno(this.options[this.selectedIndex].value);"> <option value="%">ALL</option> <option value="choice1">Choice 1</option> <option value="choice2">Choice 2</option> </select> </form> </div> </div> </div> <ul class="nav nav-tabs" id="MyTab"> <li class="active"><a href="#tab1" data-toggle="tab">First Tab</a></li> <li><a href="#tab2" data-toggle="tab">Second Tab</a></li> <li><a href="#tab3" data-toggle="tab">Third Tab</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <div class="row"> MY CODE TO DISPLAY IN TAB 1 </div> </div> <div class="tab-pane" id="tab2"> <div class="row"> MY CODE TO DISPLAY IN TAB 2 </div> </div> <div class="tab-pane" id="tab3"> <div class="row"> MY CODE TO DISPLAY IN TAB 3 </div> </div> </div> </div> </div> </div> <script type="text/javascript" language="javaScript"> function refreshFormTechno(value_id) { document.location = './index.php?choice='+value_id; } </script> </html>

If I changed the script part to:

 <script type="text/javascript" language="javaScript"> function refreshFormTechno(value_id) { //document.location = './index.php?choice='+value_id; var index = $('#MyTab a[href="#tab2"]').parent().index(); alert(index); } </script>

I can get the ID of the bookmark I want (0 for tab1, 1 for tab2). But I can’t figure out how to get the id of the active tab.

I found a lot of threads on this type of problem and tried to check the submitted code, but it did not work. I tried:

 <script type="text/javascript" language="javaScript"> function refreshFormTechno(value_id) { //document.location = './index.php?choice='+value_id; var index = $('#MyTab').tabs('option', 'selected'); alert(index); } </script>

Or:

 <script type="text/javascript" language="javaScript"> function refreshFormTechno(value_id) { //document.location = './index.php?choice='+value_id; var index = $('#MyTab').parent.tabs('option', 'selected'); alert(index); } </script>

without result ...

Knowing the current tab index will allow me to change the default active tab when reloading the entire page. Moreover, this would allow me to load php scripts only when necessary, and limit the page loading time.

Thank you in advance for your help.

+4
source share
1 answer

Can't you use the "active" panel id?

 var visiblePaneId = $('div.tab-pane.active').attr('id') var activeTabIndex = $('#MyTab a[href="' + visiblePaneId + '"]').parent().index();

Or get the active tab:

 var tabHref = $('li.active:first-child').attr('href'); //returns the anchor href which has # var activeTabIndex = $(tabHref).parent().index();
+3
source

More articles:


All Articles