Get KoolPHP UI with 30% OFF!

Set Tab as selected true upon page refresh or postback

Bud Steslicki
Our project is using the multipages tab feature and each tab/page has its own submit button. All pages/tab are within a single form. Each submit button has it's own ID.
All aspects of this layout work fine. But I would like to keep the last tab selected as the active / selected tab when the page refreshes after a submit.
I've tried several attempts based on the Suite demo for KoolTabs but I must be missing something as I cannot get this to work.
Kool 8.6, php 5.6
Posted Dec 28, 2015 , edited Dec 28, 2015 Kool
Peter
Hi Bud,
You can do this:
  1. Create an hidden <input> in the form. Name it as tabRecentSelect
  2. Register the event OnSelect on KoolTabs and set the selected tab id to to above hidden input
  3. On the page post page, you will get the post value of recent tab select
  4. At client-side, use tab = kooltab->getTab(_tab_id); tab->select();. The _tab_id is replaced by the server-side code with recent tab select value above

Hope that helps and let us know if you need further assistance.
Posted Dec 28, 2015 Kool
Bud Steslicki
Peter
I think I may need help with the javascript.
This is what I wrote...but I think my second line of javascript code is incorrect.
name of hidden input - tabData
kts.registerEvent("OnSelect",function(sender,arg){
_tab_id = document.getElementById("tabData").submit();
});
On my php side I use
$kts->getTab('_tab_id')->selected = true;
I also tried
$kts->kooltab->getTab(_tab_id);
$kts->select();
Posted Dec 28, 2015 , edited Dec 28, 2015 Kool
Bud Steslicki
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.
Posted Dec 29, 2015 , edited Dec 29, 2015 Kool -
Peter
Oh, that's great :)
Posted Dec 29, 2015 Kool
Hallie
Hi Bud,
Is there anyway you can show me an example of your code? I am trying to create a similar page, with Tabs and submit forms on each tab.
Let me know! Thank,
Posted Jan 24, 2017 Kool
Bud Steslicki
Hi Hallie,
The page using that code has been updated since this post. I believe I may still have the code archived but it will take me some time to locate. I will search for it in my archives and see if I can locate that for you.
Our parameters changed and I don't use tabs and submit form on the current version. I'll try to get you an answer soon.
Posted Jan 24, 2017 Kool
Hallie
ok thank you again,
I look forward to understanding it!!
Posted Jan 24, 2017 Kool
Bud Steslicki
Hallie - I apologize for not replying sooner but I am unable to access the USB drive which has that archive. After recovery efforts, the file is corrupt - sorry. I have a upcoming project where I can use TABS with a submit form. I'll update my post then but for now, I can't provide you with a copy of the code.
Posted Feb 2, 2017 Kool
Hallie
Thank you for looking, it is really appreciated!
Posted Feb 2, 2017 Kool