Hi Peter
I finally got it to work. One big mis-step on my part was not including the following line: Once I did this, my code worked fine.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
The standard <script type="text/javascript"> was not enough.
Because I can't stand unresolved help threads I am including some code and explanation in hopes it helps others.
Goal: Make my last clicked tab stay as the selected tab. Even if I go to another page and return.
Tab is to stay selected/active until I click on another tab.
Product: KoolTabs multipage tabs (not sure if this would work with other Kooltabs.
My skill level: Somewhere between d'oh! and novice.
Near the top of the page but AFTER session_start code...
if (isset($_SESSION['selectedTab'])) {
$mySelect_tab = $_SESSION['selectedTab'];
}else{
$mySelect_tab = "tab1";
}
Then in the php section where the tabs are created, my code looks like this... (NOTE: No default or selected tab is set until further below)
$kts->addTab("root","tab1","Tab 1","javascript:showPage(\"tab1_page\")");
$kts->addTab("root","tab2","Tab 2","javascript:showPage(\"tab2_page\")");
$kts->addTab("root","tab3","Tab 3","javascript:showPage(\"tab3_page\")");
$kts->addTab("root","tab4","Tab 4","javascript:showPage(\"tab4_page\")");
$kts->getTab($mySelect_tab)->selected = true; //this works to set tab but not the content of the tab page. :(
Then at the end of my php at the top of the page, I have the following code...
(I thought it was rather silly to have to insert this code so if someone has a better/more efficient working code, please share.
This code is so the content of the tab page would show correctly.)
echo '<script type="text/javascript">showPage($mySelect_tab);</script>';
//
$displayTab1 = ""; //double quotes, equals nothing.
$displayTab2 = "";
$displayTab3 = "";
$displayTab4 = "";
//
switch ($mySelect_tab){
case "tab2":
$displayTab2 = 'style="display:block;"';
break;
case "tab3":
$displayTab3 = 'style="display:block;"';
break;
case "tab4":
$displayTab4 = 'style="display:block;"';
break;
default:
$displayTab1 = 'style="display:block;"';
}
In my HTML section I had to change code for one particular DIV code.
per KoolTabs examples, one line of code appeared as
...
<div id="tab1_page" class="pageTab1" style="display:block;">
with remaining DIVs similar to...
<div id="tab2_page" class="pageTab2">
//swap out tab2 for tab3, tab4 as needed
I had to change all these lines to...
<div id="tab1_page" class="pageTab1" <?php echo $displayTab1; ?>>
//exchange tab2, tab3, tab4 as needed.
Then at the bottom of my page where KoolTabs ShowPage function exist, I added the following javascript AFTER the ShowPage function...
kts.registerEvent("OnSelect",function(sender,arg){
postTab(arg.TabId);
});
function postTab(tabvalue)
{
var dataString = 'tabvalue=' + tabvalue;
$.ajax({
type: "POST",
url: "updatetab.php",
data: dataString,
dataType: 'json',
cache: false,
});//end ajax
};//end postTab
This ends what I did on my php page with the tabs.
To get my selected tab from javascript to my php code, I ended up doing an ajax call (above) to another php page (below).
File name: updatetab.php
Content:
<?php
if (!isset($_SESSION)) {
session_start();
}
$_SESSION['selectedTab'] = $_POST['tabvalue'];
?>
As I stated earlier, I hope this helps someone.