Modifying the AJAX PHP database example - php

Question

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>

Answer 1

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";

Answer 2

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>