Passing value between php and javascript

Dear All,
I am using third part tab. So I have build the tabs nicely and include the code like below. The problem now is that when one of the tab is press it call the javascript. So that is when I dont know how to pass the $dD or $dK value to be set true. If pure php I know how to do it but I dont know how to pass the value via the javascript. I have tried putting <?php ?> in the javascript but no sucess too. Any help please.

<?php 
require "KoolTabs/kooltabs.php";


echo"dD".$dD;
echo "dK".$dK;
//Step 2: Create kooltabs object.
$kts2 = new KoolTabs("kts");

//Step 3: Set properties for kooltabs
$kts2->styleFolder = "KoolTabs/styles/silver";

//Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
$kts2->addTab("root","dD","dD","javascript:showTab(\\"dD\\")",$dD);
$kts2->addTab("root","dK","dK","javascript:showTab(\\"dK\\")",$dK);
?>

It seems to me that you don’t understand the difference between PHP and Javascript: PHP is executed on the server, by the server, whereas Javascript is executed on the user’s computer, locally, by the Javascript engine inside the user’s browser. Therefore, you can not set PHP variables from Javascript, at least not the way you intend to do it. What you can do is use Ajax to send data from the client’s browser to a PHP script on the server, and then, again using Javascript, fetch the server’s response containing data that was generated by PHP.

Dear Capricorn,
Any idea how to send data for my case? I am not use to Ajax stuff. Thank you.

Best thing you can do is read up how it works then.

Whilst we can help for general issues, this one in particular requires looking up the framework you’re looking at, finding how it works, then figuring out what is actually not working correctly etc. That is unlikely to be advice given away for free.

Another thing you might want to try is reword your question, I’m not really sure what you’re asking.

Dear Jade,
My requirement is simple basically I would like to control which tab is being activated. So when a particular tab is activated then for e.g. first tab is selected then the final parameter at right most is set to be true $kts2->addTab(“root”,“dD”,“dD”,“javascript:showTab(\“dD\”)”,true); and for the rest the parameter value will be empty. So I hope now I am clearer now.

Unfortunately I don’t understand what you are trying to do, but you can learn how to obtain data via AJAX through this tutorial: AJAX Introduction . Or you may use one of the javascript frameworks, such as jQuery.

Which of these are you wanting?

Are you wanting PHP to create the page with the same tab open?
Or, are you wanting the page to remember the tab a person has open, so that the same tab will be open the next they load up the page?

If you want the page to remember the tab a person has open, you need to do two things.

  1. Save the selected tab id from JavaScript as a cookie
  2. Read the selected tab id from PHP, and use that value when creating the tabs

JavaScript doesn’t have functions to directly work with cookies, so we have to roll our own.
This createCookie function comes from the Quirksmode site, which has really good info on dealing with [url=“http://www.quirksmode.org/js/cookies.html”]cookies using JavaScript.


function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

KoolTabs provides a way to easily register event. What we want, is that when a tab is selected, for a cookie value to be saved for 365 days with that tabs’ id value.


kts.registerEvent('OnSelect', function (sender, arg) {
    createCookie('selectedTab', arg.TabId, 365);
});

Then in PHP you can check for that selectedTab cookie, and if it’s available you can use it when creating your tabs.
You need to know which tab to mark as selected, so you can perform that check by putting the information in an array and looping through them as you create them.

Using the addTab code from the KoolTabs guide as an example, you might do something like this:


$selectedTab = false;
if (isset($_COOKIE['selectedTab'])) {
    $selectedTab = $_COOKIE['selectedTab'];
}

$tabs = array(
    array(parent => 'root', id => 'home', text => 'Home', link => '/home.php'),
    array(parent => 'root', id => 'products', text => 'Products', link => '/products.php')
);

foreach ($tabs as $tab) {
    $isSelected = ($tab['id'] === $selectedTab);
    $kts->addTab($tab['parent'], $tab['id'], $tab['text'], $tab['link'], $isSelected);
}

Dear Paul,
You are great I really appreciate you time. The think is like this when I press my tab the page is not to be refreshed but what I do is that I few divs, so I will hide all divs and show the one tab which is selected. Then when tab is pressed you see I called this javascript:showTab(\“dK\”)" which will show accordingly the relevant tabs. So my problem now I dont know how to send the value showTab(\“dK\”)" to the php part so that tab can be highlighted to signify that it is selected for e.g. $kts2->addTab(“root”,“dK”,“dK”,“javascript:showTab(\“dK\”)”,$dK); how to send the $dk as true.

I’m afraid that I don’t know what you mean there. If your needs are different from what I provided help about, then you’ll need to clarify the situation.

Dear Paul,
Here is my link http://183.78.169.54/v3/tabTest.php. If you notice the Driver Profile is selected followed by Driver Details, but when you press the Driver Licenses it open the relevant div but is not selected.

Below is my codes.

<?php
session_start();
require_once(‘config.php’);
$searchcm=$_POST[‘searchcm’];
$formType=“Add”;
$submitTag=“Add”;

$driverDetails=true;
$driverLicenses=‘’;
$driverNextOfKin=‘’;

require “KoolTabs/kooltabs.php”;

//Step 2: Create kooltabs object.
$kts = new KoolTabs(“kts”);

//Step 3: Set properties for kooltabs
$kts->styleFolder = “KoolTabs/styles/silver”;

//Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
$kts->addTab(“root”,“home”,“Driver List”,“tabTest.php”);
$kts->addTab(“root”,“home”,“Driver Profile”,“tabTest.php”,true);

//Step 2: Create kooltabs object.
$kts2 = new KoolTabs(“kts”);

//Step 3: Set properties for kooltabs
$kts2->styleFolder = “KoolTabs/styles/silver”;

//Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
$kts2->addTab(“root”,“Driver Details”,“Driver Details”,“javascript:showTab(\“driverDetails\”)”,$driverDetails);
$kts2->addTab(“root”,“Driver Licenses”,“Driver Licenses”,“javascript:showTab(\“driverLicenses\”)”,$driverLicenses);
//$kts2->addTab(“root”,“Driver Next of Kin”,“Driver Next of Kin”,“javascript:showTab(\“driverNextOfKin\”)”,$driverNextOfKin);

?>

<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“my1.css” media=“all”>

<script type=“text/javascript”>

window.onload = function () {
document.getElementById(“driverDetails”).className = “show”;
document.getElementById(“driverLicenses”).className = “hide”;

};
</script>
<script type=“text/javascript”>
function showTab(_id)
{
var tabID=_id;

if(tabID=="driverDetails")
{
	document.getElementById("driverDetails").className = "show"; 
	document.getElementById("driverLicenses").className = "hide";	
}
else if(tabID=="driverLicenses")
{
	document.getElementById("driverDetails").className = "hide"; 
	document.getElementById("driverLicenses").className = "show";	
}	

} </script>
</head>

<body>
<?
echo $kts->Render();
echo $kts2->Render();
?>
<form action=“<?=$_SERVER[‘PHP_SELF’]?>” method=“post” name=“form1” enctype=“multipart/form-data” id=form1 onSubmit=“return validateForm();”>
<div id=“driverDetails” class=“show” style=“position:relative” >
DD
</div>
<div id=“driverLicenses” class=“hide” style=“position:relative” >
DK
</div>
</form>
</body>
</html>

There seem to be some fundamental problems occurring there.

What are the instructions that you have been following to set up the kooltabs?

Dear Paul,
I got the instruction based on some sample I saw at their web site(kool tab website). What is the fundamental mistake?

Well, this is one line from the source code of your page:


<script type='text/javascript'>if (document.getElementById('__silverKTS')==null){var _head = document.getElementsByTagName('head')[0];var _link = document.createElement('link'); _link.id = '__silverKTS';_link.rel='stylesheet'; _link.href='/v3/KoolTabs/styles/silver/silver.css';_head.appendChild(_link);}</script><div id='kts' class='silverKTS silvertopKTS' style='width:auto;height:auto;'><div class='ktsLevel ktsLevel0 ktsleft '><ul id='kts.root.sub' class='ktsUL' style='display:'><li id='home' class='ktsLI  ktsFirst ' style='width:;height:'><a class='ktsA ktsBefore' href='tabTest.php' ><span class="ktsOut"><span class="ktsIn"><span class='ktsText'>Driver List </span> </span></span> </a></li><li id='home' class='ktsLI  ktsLast ' style='width:;height:'><a class='ktsA ktsSelected' href='tabTest.php' ><span class="ktsOut"><span class="ktsIn"><span class='ktsText'>Driver Profile </span> </span></span> </a></li></ul></div><div style='clear:both;'></div><input id='kts_selected' name='kts_selected' type='hidden' /><div id='kts.tab.template' style='display:none'><span class="ktsOut"><span class="ktsIn">{tabcontent} </span></span></div></div><script type='text/javascript'>if(typeof _libKTS=='undefined'){document.write(unescape("%3Cscript type='text/javascript' src='/v3/KoolTabs/kooltabs.php?32981a13284db7a021131df49e6cd203'%3E %3C/script%3E"));_libKTS=1;}</script><script type='text/javascript'>var kts; function kts_init(){ kts=new KoolTabs('kts','top');}if (typeof(KoolTabs)=='function'){kts_init();}else{if(typeof(__KTSInits)=='undefined'){__KTSInits=new Array();} __KTSInits.push(kts_init);if(typeof(_libKTS)=='undefined'){var _head = document.getElementsByTagName('head')[0];var _script = document.createElement('script'); _script.type='text/javascript'; _script.src='/v3/KoolTabs/kooltabs.php?32981a13284db7a021131df49e6cd203'; _head.appendChild(_script);_libKTS=1;}}</script> 

which when formatted more appropriately, looks like cargo-cult coding:


<script type='text/javascript'>
if (document.getElementById('__silverKTS')==null){
    var _head = document.getElementsByTagName('head')[0];
    var _link = document.createElement('link');
    _link.id = '__silverKTS';
    _link.rel='stylesheet';
    _link.href='/v3/KoolTabs/styles/silver/silver.css';
    _head.appendChild(_link);
}
</script>
<div id='kts' class='silverKTS silvertopKTS' style='width:auto;height:auto;'>
    <div class='ktsLevel ktsLevel0 ktsleft '>
        <ul id='kts.root.sub' class='ktsUL' style='display:'>
            <li id='home' class='ktsLI  ktsFirst ' style='width:;height:'>
                <a class='ktsA ktsBefore' href='tabTest.php' >
                    <span class="ktsOut">
                        <span class="ktsIn">
                            <span class='ktsText'>Driver List </span>
                        </span>
                    </span>
                </a>
            </li>
            <li id='home' class='ktsLI  ktsLast ' style='width:;height:'>
                <a class='ktsA ktsSelected' href='tabTest.php' >
                    <span class="ktsOut">
                        <span class="ktsIn">
                            <span class='ktsText'>Driver Profile </span> 
                        </span>
                    </span>
                </a>
            </li>
        </ul>
    </div>
    <div style='clear:both;'></div>
    <input id='kts_selected' name='kts_selected' type='hidden' />
    <div id='kts.tab.template' style='display:none'>
        <span class="ktsOut">
            <span class="ktsIn">{tabcontent} </span>
        </span>
    </div>
</div>
<script type='text/javascript'>
if(typeof _libKTS=='undefined'){
    document.write(unescape("%3Cscript type='text/javascript' src='/v3/KoolTabs/kooltabs.php?32981a13284db7a021131df49e6cd203'%3E %3C/script%3E"));
    _libKTS=1;
}
</script>
<script type='text/javascript'>
var kts;
function kts_init(){ 
    kts=new KoolTabs('kts','top');
}
if (typeof(KoolTabs)=='function'){
    kts_init();
}else{
    if(typeof(__KTSInits)=='undefined'){
        __KTSInits=new Array();
    } 
    __KTSInits.push(kts_init);
    if(typeof(_libKTS)=='undefined'){
        var _head = document.getElementsByTagName('head')[0];
        var _script = document.createElement('script'); 
        _script.type='text/javascript'; 
        _script.src='/v3/KoolTabs/kooltabs.php?32981a13284db7a021131df49e6cd203'; 
        _head.appendChild(_script);
        _libKTS=1;
    }
}
</script> 

Dear Paul,
You mean this is my code or your code which you have helped modify is it? I dont quite understand.

That is your own code, that you have as your source code on your page. Line 30.

That is why I am asking about where you received the instructions to do things that way.

Dear Paul,
Is quite funny if you look into the code at post #11 is different then #14 so I dont know where the #14 comes from? I am confuse too.

The site you linked has that code when you view the source:
http://183.78.169.54/v3/tabTest.php

Dear All,
Yes I notice that too. I guess that is generated by the kool tab because below is my php codes.So the crumple one line code is not written by me.

<?php
session_start();
require_once(‘config.php’);
$searchcm=$_POST[‘searchcm’];
$formType=“Add”;
$submitTag=“Add”;

$driverDetails=true;
$driverLicenses=‘’;
$driverNextOfKin=‘’;

require “KoolTabs/kooltabs.php”;

//Step 2: Create kooltabs object.
$kts = new KoolTabs(“kts”);

//Step 3: Set properties for kooltabs
$kts->styleFolder = “KoolTabs/styles/silver”;

//Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
$kts->addTab(“root”,“home”,“Driver List”,“tabTest.php”);
$kts->addTab(“root”,“home”,“Driver Profile”,“tabTest.php”,true);

//Step 2: Create kooltabs object.
$kts2 = new KoolTabs(“kts”);

//Step 3: Set properties for kooltabs
$kts2->styleFolder = “KoolTabs/styles/silver”;

//Step 4: Add tabs for KoolTabs: addTab($parentid,$id,$text,$link)
$kts2->addTab(“root”,“Driver Details”,“Driver Details”,“javascript:showTab(\“driverDetails\”)”,$driverDetails);
$kts2->addTab(“root”,“Driver Licenses”,“Driver Licenses”,“javascript:showTab(\“driverLicenses\”)”,$driverLicenses);
//$kts2->addTab(“root”,“Driver Next of Kin”,“Driver Next of Kin”,“javascript:showTab(\“driverNextOfKin\”)”,$driverNextOfKin);

?>

<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“my1.css” media=“all”>

<script type=“text/javascript”>

window.onload = function () {
document.getElementById(“driverDetails”).className = “show”;
document.getElementById(“driverLicenses”).className = “hide”;

};
</script>
<script type=“text/javascript”>
function showTab(_id)
{
var tabID=_id;

if(tabID=="driverDetails")
{
	document.getElementById("driverDetails").className = "show"; 
	document.getElementById("driverLicenses").className = "hide";	
}
else if(tabID=="driverLicenses")
{
	document.getElementById("driverDetails").className = "hide"; 
	document.getElementById("driverLicenses").className = "show";	
}	

} </script>
</head>

<body>
<?
echo $kts->Render();
echo $kts2->Render();
?>
<form action=“<?=$_SERVER[‘PHP_SELF’]?>” method=“post” name=“form1” enctype=“multipart/form-data” id=form1 onSubmit=“return validateForm();”>
<div id=“driverDetails” class=“show” style=“position:relative” >
DD
</div>
<div id=“driverLicenses” class=“hide” style=“position:relative” >
DK
</div>
</form>
</body>
</html>