My HTML code is very simple :
<body>
<form id="delForm" action="deleteThirdMulti.php" method="post"> <!--Le fomulaire qui ne sert que pour les checkbox-->
<div class="container">
<div class="col-md-1 pull-right">
<img src="CSS/PICTURES/add.png" />
<br /><br />
</div>
<div class="row">
<div class="col-md-2 form-group">
<button type="submit" class="btn btn-default" name="delete_all">Supprimer</button>
</div>
<div class="col-md-2 form-group">
<select name="choix_service" class="form-control form-update-user" id="sort">
<option selected="selected">TOUS</option>
<option value="COMPTABILITE">CLIENT</option>
<option value="EXPLOITATION">AFFRETE</option>
<option value="INFORMATIQUE">PROPRIETAIRE</option>
</select>
</div>
</div>
<table class="table table-condensed table-responsive table-bordered sortable table-striped" id="table">
<thead>
<tr>
<th class="text-center"><input type="checkbox" onclick="toggle(this)" name="check_all"/></th>
<th class="text-center">Type</th>
<th class="text-center">Code</th>
<th class="text-center">Nom</th>
<th class="text-center">Adresse 1</th>
<th class="text-center">Adresse 2</th>
<th class="text-center">Code Postal</th>
<th class="text-center">Ville</th>
<th class="text-center">Pays</th>
<th class="text-center">Téléphone</th>
<th class="text-center">Fax</th>
<th class="text-center">E-mail</th>
<th class="text-center">Site web</th>
</tr>
</thead>
<tbody>
And then, I have a PHP code which display datas from the database.
The problem is that I would like the user to be able to change the value in the select box and, I would like the datas to be updated without a page reload. Indeed, when I select CLIENT, only CLIENTS from the base will be displayed in the table.
My start of Jquery code :
<script type="text/javascript">
$(document).ready(function() {
$('#sort').change(function(){
var valeur = $('#sort option:selected').text();
$.ajax({
url: 'some-url',
type: 'post',
dataType: 'json',
data: valeur,
success: function(data) {
... do something with the data...
}
});
})
});
</script>
Inside your Success function on the Ajax call you will want to loop through the data and use jquery's
.html(text)
function to fill in the table data.
It may be easier to wrap the table id="table" inside a div container so you can write the entire table HTML from within your success function in the AJAX.
I hope this addresses your question, it was a little unclear what you are trying to accomplish, but it seems there is some language barriers here that we can hopefully overcome.
Let me know if you need any clarification on things!
Clarification for comment #1:
create a div on the page for your ajax response information. Let's call this "clients_table_container"
<div id="clients_table_container"></div>
When your ajax response success function is called, you can fill the content of this container div with the html code you would like to display. For Example:
success: function(data)
{
//TODO: Turn JSON into html string content
var my_html_string = data;
//REPLACE THE CONTENT IN THE DIV WITH THIS DATA
$('#clients_table_container').html(my_html_string);
}
You'll want to make sure you have the <table> html inside the my_html_string variable and you fill in the <tr><td></td></tr> tags based on the json response in the data variable. This part you will have todo as we have no visibility into it's contents.
It works !
This is my code in the AJAX PHP file :
<?php
include('../sqlConnexion.php');
include('../security.php');
if ($_POST['valeur'] == 'TOUS')
{
$req = $bdd->query('SELECT * FROM tiers ORDER BY code');
$response['i'] = $_POST['valeur'];
}
else
{
$req = $bdd->prepare('SELECT * FROM tiers WHERE type = :type ORDER BY code');
$req->execute(array(
'type' => $_POST['valeur']
));
}
$response['table'] = '';
$i = 0;
while ($third=$req->fetch())
{
$response['table'] = $response['table'] . "<tr>
<td align='center'><input type='checkbox' name='delete_$i' value='".$third['id']."'></td>
<td align='center'>" . $third['type'] . "</td>
<td align='center'>" . $third['code'] . "</td>
<td align='center'>" . $third['nom'] . " </td>
<td align='center'>" . $third['adresse1'] . " </td>
<td align='center'>" . $third['adresse2'] . " </td>
<td align='center'>" . $third['cp'] . " </td>
<td align='center'>" . $third['ville'] . " </td>
<td align='center'>" . $third['pays'] . " </td>
<td align='center'>" . $third['telephone'] . " </td>
<td align='center'>" . $third['fax'] . " </td>
<td align='center'>" . $third['email'] . " </td>
<td align='center'><a target='blank_' href='" . $third['website'] . "'>" . $third['website'] . " </td>
<td align='center'><a href='updateThird.php?id=" . $third['id'] . "'><img src='CSS/PICTURES/modification.jpg' title='Modifier le tiers'/></a></td>
</tr>";
$i++;
}
$req->closeCursor();
echo json_encode($response);
Here is my JQuery code with filling the 'tbody' :
$(document).ready(function() {
$('#sort').change(function(){
var valeur = $('#sort option:selected').text();
//window.location.replace('thirdManagement.php?third=' + valeur);
$.ajax({
url: 'MODEL/ajaxSearchThirds.php',
type: 'post',
dataType: 'json',
data: {'valeur': valeur},
success: function(data) {
$('tbody').html(data.table);
$('#ivalue').val(data.i);
}
});
})
});
Hope it will help someone.
Related
Here's the thing, I need to update a selected row from a table, so I'm putting a form for each row of it (Every single row has an update button) and when I click update, it doesn't submit, actually, doesn't do anything.
Here's my code, I'll be grateful with the solution.
<div class="table-responsive">
<table class="table table-condensed">
<thead class="">
<tr>
<th>ID</th>
<th>Project</th>
<th>Type</th>
<th>Kick-Off Date</th>
<th>Deadline Date</th>
<th>Current Ninja</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<?php
$q = $_GET['q'];
$sql="SELECT pr.project_name, pr.project_type, pr.project_start_date, pr.project_end_date, us.nombre, st.id_status, pr.id_project FROM NT_Projects as pr LEFT JOIN Project_Status as st on st.id_status = pr.id_status LEFT JOIN NT_Clients as cl on cl.id_client = pr.id_client LEFT JOIN usuarios as us on us.username = pr.username WHERE cl.id_client = $q";
$result = mysql_query($sql) or die(mysql_error());
$upt = 1;
while($row = mysql_fetch_array($result)) {
echo '
<div id="update-project">
<form method="post" action="sistema/_actions/updateProject.php" id="res-update-proj-'.$upt.'">';
$kickoff = date('m/d/Y', strtotime($row[2]));
$deadline = date('m/d/Y', strtotime($row[3]));
echo '<tr>';
echo '<td width="95px">
<input class="form-control" name="id_Proj" type="text" value="'.$row[6].'" readonly>
</td>';
echo "<td>" . $row[0] . "</td>";
echo "<td>" . $row[1] . "</td>";
echo "<td>" . $kickoff . "</td>";
echo "<td>" . $deadline . "</td>";
echo "<td>" . $row[4] . "</td>";
echo '<td width="225px">';
echo '<select class="form-control" name="proj_Status">';
$qStatus = "SELECT * FROM Project_Status;";
$exStatus = mysql_query($qStatus);
while($rStatus = mysql_fetch_array($exStatus))
{
if($row[5] == $rStatus[0])
echo '<option value="'.$rStatus[0].'" selected>'.$rStatus[1].'</option>';
else
echo '<option value="'.$rStatus[0].'">'.$rStatus[1].'</option>';
}
echo '</select>
</td>
<td class="text-center">
<button type="submit" class="btn btn-sm btn-primary btn-UProj" value="res-update-proj-'.$upt.'">Update</button>
<div id="res-update-proj-'.$upt.'" style="width: 100%; margin:0px; padding:0px;"></div>
</td>
</tr>
</form>
</div>';
$upt = $upt + 1;
}
?>
</tbody>
</table>
</div>
That code is being called from another HTML with ajax
You cannot mix table tags with divs and forms according to the web standards. If you do, browser's HTML-parser will mix your tags in unpredictable way.
The only solution I know is to utilize CSS:
<div style="display: table">
<form style="display: table-row">
<div> style="display: table-cell"></div>
</form>
</div>
I'm having trouble trying to get data from a database. The code will only retrieve the first row of data from the Database. The data is correct but it does not matter what information I put into my html input field the data is the same in the new row that is added. Any help resolving this would be fantastic.
If someone was going to point out that I have both "POST" and "GET" mixed in my code, I could understand as that being a possible problem, but neither when matching would retrieve data from the DB, other than the first row of data in the table.
Any help with this would be great!!! Thanks to all who provide an answer in advance.
My HTML code:
index.php
<div class="row">
<div class="col-md-1"></div>
<div class="col-xs-3">
<h3 class="h4 text-center"><input type="text" name="barcode" id="barcode" size="90" class="col-md-9" value="" method="GET" placeholder="Barcode / Product Name"></h3>
</div>
</div>
<br />
<div class="row">
<div class="col-md-1"><p class=""></p></div>
<div class="col-md-6">
<table id="report" class="table table-bordered table-hover">
<thead>
<tr>
<td>SKU</td>
<td>Model</td>
<td>Item Description</td>
<td>Qty</td>
</tr>
</thead>
<tbody>
<?php get_item(); ?>
</tbody>
</table>
</div>
</div>
This is my AJAX script
<script>
var inp = $("#barcode");
// where #txt is the id of the textbox
$("#barcode").keyup(function (event) {
if (event.keyCode == 13)
{
if (inp.val().length > 0)
{
$.ajax({
url: "index.php",
type: "GET", //Also tried POST method. Didn't work either
data: {id: inp.val()},
success: function(response)
{
values = response.split(' - ');
$('#report tr:last').after(
"<tr class='table-row'>" +
"<td class=''>" + values[1] + "</td>" +
"<td class=''>" + values[2] + "</td>" +
"<td class=''>" + values[3] + "</td>" +
"<td class=''>" + values[4] + "</td></tr>");
}});
}
$('input[name=barcode]').val('');
}
});
</script>
Here is my php code
function get_item(){
global $con;
if(!empty($_POST))
{
$query = query("SELECT * FROM items");
confirm($query);
while($row = fetch_array($query)) {
$sku = $row['sku'];
$model = $row['category'];
$desc = $row['description'];
$qty = $row['qty'];
echo($id.' - '.$sku.' - '.$model.' - '.$desc.' - '.$qty);
die();
}
}
}
Move the die(); function call out of your while loop. It gets called rigth at the end of the first loop terminating your php script.
I want to search by product name then get productdetailsid from db then compare it with each row in this table if it exists , set bachground-color for row!
<div class="input-group m-b"><span class="input-group-btn">
<button type="button" class="btn btn-primary">Go!</button> </span> <input type="text" class="form-control"id="autocomplete">
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="text-align: center">#</th>
<th style="text-align: center">Product Name</th>
<th style="text-align: center">Quantity</th>
<th style="text-align: center">Product Price</th>
<th style="text-align: center">Whole Price</th>
<th style="text-align: center">Supplier Name</th>
<th style="text-align: center"></th>
</tr>
</thead>
<tbody>
<?php
$per_page=5;
if (isset($_GET["page"])) {
$page = $_GET["page"];
}
else {
$page=1;
}
$start_from = ($page-1) * $per_page;
$sql = "select p.productname,p.quantity,p.onesale,p.wholesale,p.productdetailsid,s.fullname from productdetails p , supplier s where s.supplierid = p.supplierID LIMIT $start_from,$per_page";
$count = ($page*5)-4;
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<form method=\"post\" action=\"\">";
echo "<tr>";
echo "<td>" . $count++ . "</td>";
echo "<td>" . $row["productname"] . "</td>
<td>" . $row["quantity"] . "</td>
<td>" . $row["onesale"] . "</td>
<td>" . $row["wholesale"] . "</td>
<td>" . $row["fullname"] . "</td>
<td><button type=\"submit\" class=\"btn btn-xs btn-danger\" name=\"removeBtn\"><i class=\"fa fa-times\"></i> </button></td>
<td style=\"display:none;\"><input type=\"hidden\" name=\"id\" value='".$row["productdetailsid"]."'>
</td>"
;
echo "</tr>";
echo "</form>";
}
}
$conn->close();
?>
</tbody>
</table>
</div>
For Live search in the table you need to use AJAX for getting the result, then using that result you can use Javascript loop to find which rows are found and change the color. I would prefer JSON output (JSON array output) from the PHP script, I can use that in Javascript Loop...
in PHP
You need to make a seperate PHP file for getting ajax output...say ajax.php
<?php
//Assuming that 'q' is the POST variable for finding the query
if(!empty($_POST['q']))
{
//Put your database query execution code here with using q as search query
//Set header to JSON
header('Content-Type:application/json');
//assuming that $result is associative array of your SQL query output
which contains array of the rows to be hightlighted
echo json_encode($result);
}
This will give a JSON array output which can be easily read by AJAX or $.post functions...
in Javascript
here's the tricky part. you need to make an ajax call and then use that data to highlight the rows....but first need to give an ID to the table body...
...<tbody id="table1">....</tbody></table>
Then you need to use ajax or $.post function to make the call, I have used $.post as it's simple
/**** Cosidering "input1" is a input element for getting query to be searched with id = input1 ****/
var q_data = $("#input1").val();
$.post(ajax.php,
{
q: q_data
},
function(data,status)
{
$.each($("#table1").find("<tr>"),function(i,value)
{
var element = $(this);
$.each(data,function(i,val2){
if(val2 == $(element).find("<td>").text())
{
$(element).css('background','lgihtyellow');
}
});
});
}
);
The code may not work before suitable changes, but this is the logic and concept of ajax based live search in the table
I'm working on this project that uses a live table edit style (works perfectly) but trying to include the twitter style follow and unfollow in one of the columns (The last one precisely) the php works well but I've having problems returning the data to ajax to post to another php script.
Below shows the major part of the script (The php and ajax). I included a php comment on the important area of interest.
<?php $query_pag_data = "SELECT * FROM applicant_result WHERE year='$year' AND
class='$class' ORDER by candidate_no "; $uid=strip_tags($id);
$result_pag_data = mysql_query($query_pag_data) or die('MySql Error' . mysql_error());
$finaldata = "";
$tablehead= '';
$tablehead= "<tr>
<th class='data'>#</th>
<th class='data'>Applicant ID</th>
<th class='data'>Year</th>
<th class='data'>Class</th>
<th class='data'>$subject_1</th>
<th class='data'>$subject_2</th>
<th class='data'>$subject_3</th>
<th class='data'>$subject_4</th>
<th class='data'>$subject_5</th>
<th class='data'>Total</th>
<th class='data'>Status</th>
<th class='data'>Interview</th>
</tr>";
while($row = mysql_fetch_array($result_pag_data)) {
$id=htmlentities($row['candidate_no']);
$subject_1=htmlentities($row['subject_1']);
$subject_2=htmlentities($row['subject_2']);
$subject_3=htmlentities($row['subject_3']);
$subject_4=htmlentities($row['subject_4']);
$subject_5=htmlentities($row['subject_5']);
$total=htmlentities($row['total']);
$status=htmlentities($row['interview']);
$uid= strip_tags($row['candidate_no']);
/* HELLO FORUMITES, THIS IS THE MAJOR AREA OF FOCUS HERE */
if($status!=0){$button="
<span id='loading<?php echo $uid; ?>'></span>
<span class='button following' id='following<?php echo $uid; ?>' `onClick='follow_or_unfollow(<?php echo $uid; ?>,'following');'>Following</span>`
<span style='display:none;' class='button follow' id='follow<?php
echo $uid; ?>' onClick='follow_or_unfollow(<?php echo $uid; ?>,'follow');'>Follow</span>
";}
else{
$button="
<span id='loading<?php echo $uid; ?>'></span>
<span class='button follow' id='follow<?php echo $uid; ?>'
onClick='follow_or_unfollow(<?php echo $uid; ?>,'follow');'>Follow</span>
<span class='button following' style='display:none;'`id='following<?php echo $uid; ?>' onClick='follow_or_unfollow(<?php echo $uid;` ?>,'following');'>Following</span>
";}
$tabledata.="<tr id='$id' class='edit_tr'>
<td class='edit_td' ><span class='text'>$counter</span></td>
<td class='edit_td' ><span class='text'>$id</span></td>
<td class='edit_td' ><span class='text'>$year</span>
<input type='hidden' value='$year' class='editbox' id='six_input_$id' /></td>
<td class='edit_td' ><span class='text'>$class</span>
<input type='hidden' value='$class' class='tbox' id='seven_input_$id' /></td>
<td class='edit_td' >
<span id='one_$id' class='text'>$subject_1</span>
<input type='text' value='$subject_1' class='editbox' id='one_input_$id' /></td>
<td class='edit_td' ><span id='two_$id' class='text'>$subject_2</span>
<input type='text' value='$subject_2' class='editbox' id='two_input_$id'/></td>
<td class='edit_td' ><span id='three_$id' class='text'>$subject_3 </span>
<input type='text' value='$subject_3' class='editbox' id='three_input_$id'/></td>
<td class='edit_td' ><span id='four_$id' class='text'>$subject_4</span>
<input type='text' value='$subject_4' class='editbox' id='four_input_$id' /></td>
<td class='edit_td' ><span id='five_$id' class='text'>$subject_5</span>
<input type='text' value='$subject_5' class='editbox' id='five_input_$id' /></td>
<td class='edit_td' ><span class='text'>$total</span></td>
<td class='edit_td' ><span class='text'>$status</span></td>
<td>$button </td>
</tr>";
$counter++;
}
$finaldata = "<table width='100%'>".$tablehead." ".$tabledata. "</table>";
echo $finaldata;
NOW THE AJAX
<script type="text/javascript">
$(document).ready(function() {
$('.following').hover(function() {
$(this).text('Unfollow');
}, function() {
$(this).text("Following");
});
});
function follow_or_unfollow(id, action) {
var dataString = "id=" + id;
$.ajax({
type: "POST",
url: "follow_or_unfollow.php",
data: dataString,
beforeSend: function() {
if (action == "following") {
$("#following" + id).hide();
$("#loading" + id).html('<img src="loading.gif" align="absmiddle" alt="Loading...">');
}
else if (action == "follow") {
$("#follow" + id).hide();
$("#loading" + id).html('<img src="loading.gif" align="absmiddle" alt="Loading...">');
}
},
success: function(response) {
if (action == "following") {
$("#loading" + id).html('');
$("#follow" + id).show();
}
else if (action == "follow") {
$("#loading" + id).html('');
$("#following" + id).show();
}
}
});
}
</script>
Try changing your ajax type to GET type: "GET",
Also how are you receiving your global at the other end of the php
Did you used GET or POST?
I would like to create something like this show here:
http://www.w3schools.com/PHP/php_ajax_database.asp
But instead of drop down list shown in the example, is it possible to change it to table format like example, when I click on the Class 1 it will display the details for class 1...the details are in my database its from phpmyadmin:
Thanks in advance...help greatly appreciated
Is this correct?
<?php
include ('staffheader.php');
?>
<div id="head">Permit Structure</div>
<div class="contents">
<div id="class_data">
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Road Based</td>
<td>Proving Ground PG</td>
<td>Off Road OR</td>
<td>Towing TT</td>
</tr>
<tr id="Class_1">
<td> <a href='#' class='classlink' title='1'>Class 1</a></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Class 2</td>
<td>CAT 2PG</td>
<td>CAT 1OR</td>
<td>CAT 2TT</td>
</tr>
<tr>
<td>Class 3</td>
<td>CAT 3PG</td>
<td>CAT 2OR</td>
<td>CAT 3TT</td>
</tr>
<tr>
<td> </td>
<td>CAT 4PG</td>
<td>CAT 3OR</td>
<td> </td>
</tr>
</table>
</div>
<div id="instruction">Click on the Class or Category to view information on it</div>
</div>
<div id='detailtable'></div>
<?php
include('allfooter.php');
?>
loadergetclassinfo.php:
<?php
$class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"];
$con = mysql_connect("localhost", "root", "cailing8195") or die ("Unable to connect to MySQL Server " . mysql_error());
if(is_resource($con))
$db = mysql_select_db("jlr", $con) or die( "Unable to select database " . mysql_error());
$query = "SELECT PTYPE, TYPE, PREREQ, DES FROM type WHERE TYID=" . $class_id;
$res = mysql_query($query);
$arr_data = mysql_fetch_assoc($res);
mysql_close($con);
foreach ($arr_data as $data)
$html = "<table>\n";
$html .= "<tr><th>Type ID</th><th>Permit Type</th><th>Categories</th><th>Pre-Requisisite</th><th>Description</th></tr>\n";
$html .= "<tr><td>" . $class_id . "</td><td>" . $data['PTYPE'] . "</td><td>" . $data['TYPE'] . "</td><td>" . $data['PREREQ'] . "</td><td>" . $data['DES'] . "</td> </tr>\n";
$html .= "</table>\n";
echo $html;
?>
JQuery (in javascript.js):
$(function() {
$('a.class_link').click(function() {
var class_id = $(this).attr('title');
$.post("loadergetclassinfo.php", {class: class_id}, function(result){
$('#detail_table').html(result);
});
});
});
And i add this inside my header php file too:
<script src="javascript.js"></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
If you want the row in which you click the link, to be populated with the data from the database, do something like this (untested, but here is the gist):
HTML:
<tr id='class_1'>
<td><a href='#' class='classlink' title='1'>Class 1</a></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
jQuery:
$(function() {
$('a.classlink').click(function() {
var class_id = $(this).attr('title');
$.post("loadergetclassinfo.php", {class_id: class_id}, function(result){
$('#class_' + class_id).html(result);
});
});
});
loadergetclassinfo.php:
<?php
$class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"];
$con = mysql_connect("localhost", "your_MySQL_username", "your_MySQL_password") or die ("Unable to connect to MySQL Server " . mysql_error());
if(is_resource($con))
$db = mysql_select_db("your_MySQL_database", $con) or die( "Unable to select database " . mysql_error());
$query = "SELECT data1, data2, data3 FROM your_data_table WHERE class=" . $class_id;
$res = mysql_query($query);
$arr_data = mysql_fetch_assoc($res);
mysql_close($con);
$html = "<td><a href='#' class='classlink' title='$class_id'>Class $class_id</a></td>";
foreach ($arr_data as $data)
$html .= "<td>" . $data . "</td>\n";
echo $html;
?>
UPDATE:
If you want the 'Class x' data to appear somewhere else in your HTML page, you can maybe do something like this:
Add this to your HTML:
<div id='class_data'></div>
Change above jQuery like this:
$.post("loadergetclassinfo.php", {class: class_id}, function(result){
$('#class_data').html(result);
});
Change above php code to something like this (or you can use a list or whatever you like to see here):
$html = "<table>\n";
$html .= "<tr><th>Class Number</th><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>\n";
$html .= "<tr><td>" . $class_id . "</td><td>" . $data['data1'] . "</td><td>" . $data['data2'] . "</td><td>" . $data['data3'] . "</td></tr>\n";
$html .= "</table>\n";
echo $html;
This is assuming that you have columns called data1 etc and that your primary index is called 'class'. Just change it to what it is in your case.
UPDATE in RESPONSE TO YOUR EDITS:
End your HTML code with:
<div id='detailtable'></div>
Edit this jQuery statement:
$.post("loadergetclassinfo.php", {class: class_id}, function(result){
$('#detailtable').html(result);
});
Finally, remove the php code from below your HTML table, and put it in it's own file called "loadergetclassinfo.php" in the same directory as the HTML file.
ALSO, this is wrong (sorry, error was in my code):
$class_id = empty($_POST["class_id"]) ? 1 : $_POST["class"];
Should be:
$class_id = empty($_POST["class_id"]) ? 1 : $_POST["class_id"];
Also change the details table code to:
$html = "<table>\n";
$html .= "<tr><th>Type ID</th><th>Permit Type</th><th>Categories</th><th>Pre- Requisisite</th><th>Description</th></tr>\n";
$html .= "<tr><td>" . $class_id . "</td><td>" . $data['PTYPE'] . "</td><td>" . $data['TYPE'] . "</td><td>" . $data['PREREQ'] . "</td><td>" . $data['DES'] . "</td></tr>\n";
$html .= "</table>\n";
you can try to use ajax function from jquery it could be somethink like this again you could modify it.
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>Road Based</td>
<td>Proving Ground PG</td>
<td>Off Road OR</td>
<td>Towing TT</td>
</tr>
<tr>
<td onclick="getPage(this)" >Class 1</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<div id='content'></div>
<script type="text/javascript">
function getPage(class) {
//generate the parameter for the php script
var data = 'page=' + document.location.hash.replace(/^.*#/, '');
$.ajax({
url: "loadergetclassinfo.php",
type: "GET",
data: (class).innerText,
cache: false,
success: function (html) {
//add the content retrieved from ajax and put it in the #content div
$('#content').html(html);
//display the body with fadeIn transition
$('#content').fadeIn('slow');
}
});
}
</script>