Menu
I’m trying to filter tabular data using AJAX. I have a text input field that should reduce the table display to only show entries that contain the string entered into the box. Currently, changing the text box does nothing.
This is the PHP script that generates the main page:
[code=php]<?PHP
session_start();
$_SESSION[‘current_entity_ID’] = ‘0’; // delete this later!!
// this is a list of events, that is sortable!!
// include some crap
require(‘../../global/config.php’);
require(‘../../include/functions/global_functions.func’);
require(‘../../include/SQL_connect.php’);
require(‘../../include/ajax/event_list_table.func’);
// start page output
require(‘../../include/header.php’);
// Include the AJAX basic JS function
echo “<script src=’../../include/ajax/ajax_basic.js’></script>”;
// close the head and start the page body
echo “</head><body>”;
/* Start To Build the Main HTML Page */
// main body area
echo “<div id=’border’>”;
// query for table guts
$query = “SELECT * FROM Events JOIN Producers WHERE Events.producer_ID = Producers.producer_KEY AND Events.entity_ID = ‘” . $_SESSION[‘current_entity_ID’] . “‘ ORDER BY Events.event_start_time”;
$result = safe_query($query);
// build the table guts
$event_table = draw_event_list_table($result);
// output the table inside of a div
echo “<div id=’event_table_area’>”;
echo $event_table;
echo “</div>”;
// show the filter form
echo “<form method=’post’ name=’filter’ action='”. $_SERVER[‘PHP_SELF’] .”‘>”;
echo “<label for=’event_name_filter’>Event Name:</label>
<input type=’text’ onkeyup=’ajaxFunction();’ value=’start typing an event name to filter the form’ name=’event_name_filter’ id=’event_name_filter’ />”;
echo “</div></body>”; //close the main body area
?>
This is ajax_basic.js:
[CODE]function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.event_table_area.value=xmlHttp.responseText;
}
}
xmlHttp.open(“POST”,”event_list_table.func”,true);
xmlHttp.send(null);
}
and this is event_list_table.func, the PHP script that it calls:
[code=php]<?PHP
/* The following is a set of functions to sort the event list display
based on user preferences. This function will be called using AJAX.
*/
// Create the header row of the Event List Table
function draw_event_list_tabletop()
{
$h_output = “<br /><table width=’720px’ align=’center’ class=’sortable’ id=’unique_id’>”;
$h_output .= “<tr class=’sortable’>
<th class=’sortable_space’></th>
<th width=’280px’ class=’sortable’>Event</th>
<th class=’sortable_space’></th>
<th width=’115px’ class=’sortable’>Producer</th>
<th class=’sortable_space’></th>
<th width=’55px’ class=’sortable’>Start</th>
<th class=’sortable_space’></th>
<th width=’55px’ class=’sortable’>End</th>
<th class=’sortable_space’></th>
<th width=’120px’ class=’sortable’>Date</th>
</tr>”;
return $h_output;
}
// Create the Events List Table
function draw_event_list_table($result)
{
// Start the table
$h_output = draw_event_list_tabletop();
$output = $h_output;
$i = 1;
WHILE ($row = mysql_fetch_array($result))
{
$output .= “<tr class=’sortable’>”;
$output .= “<td><input id=’eventlist_$i’ type=’checkbox’ /></td>”;
$output .= “<td class=’sortable’><label for=’eventlist_$i’>” . $row[‘event_name’] . “</label></td>”;
$output .= “<td></td>”;
$output .= “<td class=’sortable’>” . $row[‘producer_name’] . “</td>”;
$output .= “<td></td>”;
$output .= “<td class=’sortable’>” . date(‘g:i a’, $row[‘event_start_time’]) . “</td>”;
$output .= “<td></td>”;
$output .= “<td class=’sortable’>” . date(‘g:i a’, $row[‘event_end_time’]) . “</td>”;
$output .= “<td></td>”;
$output .= “<td class=’sortable’>” . date(‘l, F d’, $row[‘event_start_time’]) . “</td>”;
$output .= “</tr>”;
$i++;
}
// close the table
$output .= “</table>”;
return $output;
}
function filter_by_event_name($event_name_IP_string)
{
$query = “SELECT * FROM Events WHERE event_name = ‘%” . $event_name_IP_string . “%'”;
$result = safe_query($query);
// build the table guts
draw_event_list_table($result);
}
?>