Ajax into same page

JavaScript
1

Dear All,
I have tab when I press will call a javascript and in that I call it like this. The problem now the whole page get refresh. The tabTest1.php is the same page not another page. How can I pass the value without refreshing the page.

if(tabID=="driverDetails")
	{
		var Result = 55;
    location.href="tabTest1.php?Result=" + Result;

		document.getElementById("driverDetails").className = "show"; 
		document.getElementById("driverLicenses").className = "hide";
2

Here are some articles you should consider reading

AJAX: Usable Interactivity with Remote Scripting » SitePoint
Easy Ajax with jQuery Article » SitePoint
Build Your Own AJAX Web Applications » SitePoint

3

Dear Legend,
I have modified it to like this but is still not working as how I want it to be.

if(tabID==“driverDetails”)
{
differentiator=Math.floor(Math.random()*50000);

	if (window.XMLHttpRequest)
	  {// code for IE7+, Firefox, Chrome, Opera, Safari
	  xmlhttp=new XMLHttpRequest();
	  }
	else
	  {// code for IE6, IE5
	  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	  }
	xmlhttp.onreadystatechange=function()
	  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
	    {
	    
	    }
	  }
	xmlhttp.open("GET","tabTest1.php?dL=true&d="+differentiator,true);
	xmlhttp.send();
	




	document.getElementById("driverDetails").className = "show"; 
	document.getElementById("driverLicenses").className = "hide";	
	
	
}
4

See how this goes for you

if (tabID == 'driverDetails') {
    var differentiator = Math.floor(Math.random() * 50000);
    
    if (window.XMLHttpRequest) { // IE 7+, Firefox, Chrome, Opera, Safari
        var xmlhttp = new XMLHttpRequest();
    } else { // IE 5&6
        var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    }
    
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('driverDetails').className = 'show';
            document.getElementById('driverLicenses').className = 'hide';
        } else {
            alert('An error has occurred while trying to connect to the server!\
\
Status Code: ' + xmlhttp.status);
        }
    }
    
    xmlhttp.open('GET', 'tabTest1.php?dL=true&d=' + differentiator, true);
    xmlhttp.send(null);
}
5

Dear Legend,
I have put my page at this link http://183.78.169.54/v3/tabTest1.php. It gives me error of connection. Thus if you notice when I press either one of the bottom tab(Driver Details or Driver Licenses) I want to pass the true value so that the top tabs will be selected (Either Driver List or Driver Profile)

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

$driverList=$_GET[‘dL’];
$driverProfile=$_GET[‘dP’];
$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”,“tabTest1.php”,$driverList);
$kts->addTab(“root”,“home”,“Driver Profile”,“tabTest1.php”,$driverProfile);

//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);

//require_once(‘tabList1.php’);
?>

<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') 
{    
	var differentiator = Math.floor(Math.random() * 50000);        
	if (window.XMLHttpRequest) { 
		// IE 7+, Firefox, Chrome, Opera, Safari        
		var xmlhttp = new XMLHttpRequest();    
		} 
	else 
	{ // IE 5&6        
		var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');    
	}        
	xmlhttp.onreadystatechange = function() 
	{        
		if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
		{            
			document.getElementById('driverDetails').className = 'show';            
			document.getElementById('driverLicenses').className = 'hide';        
		} 
		else 
		{            
			alert('An error has occurred while trying to connect to the server!\


Status Code: ’ + xmlhttp.status);
}
}
xmlhttp.open(‘GET’, ‘tabTest1.php?dL=true&d=’ + differentiator, true);
xmlhttp.send(null);
}
else if(tabID==“driverLicenses”)
{
var differentiator = Math.floor(Math.random() * 50000);
if (window.XMLHttpRequest) {
// IE 7+, Firefox, Chrome, Opera, Safari
var xmlhttp = new XMLHttpRequest();
}
else
{ // IE 5&6
var xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP’);
}
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
document.getElementById(‘driverDetails’).className = ‘hide’;
document.getElementById(‘driverLicenses’).className = ‘show’;
}
else
{
alert('An error has occurred while trying to connect to the server!

Status Code: ’ + xmlhttp.status);
}
}
xmlhttp.open(‘GET’, ‘tabTest1.php?dP=true&d=’ + differentiator, true);
xmlhttp.send(null);

}

} </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>