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:
PHP Code:
<?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');
// 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:
PHP Code:
<?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.
*/
alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;
if(xmlHttp.readyState==4)
{
alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;
}
This would be easier if I had PHP installed on this machine...
Did the alert box show up? If it didn't show up the AJAX call was likely never made. If it did show up was it empty?
It doesn't look like event_list_table.func does anything. It is just a bunch of function declarations. You need to either call one of the functions or just display some text outside of a function to make sure the AJAX getting called properly.
Try renaming event_list_table.func to event_list_table.php, and updating the code where appropriate.
It might be an invalid filetype and PHP doesn't even attempt to process it. You can include .func (or anything) inside a php file, but servers will restrict the types of files a user can actually access.
You need to send the POST header in the request. Your current AJAX function isn't connected to the form, and is just sending an empty POST header. I can't remember how to do that off the top of my head, but if you search for AJAX POST scripts you should be a good skeleton to work off of.
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
function ajaxPost(oParameters){
var valsToSend = "id="+oParameters; // Example
var url = "myajaxpage.php";
xmlhttp.open("POST",url, true)
xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); // Resolve any cache problems...
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Required for POST requests.
xmlhttp.onreadystatechange = someAjaxHandleFunction;
xmlhttp.send(toSend);
}
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;
}
}
}
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
function ajaxPost(oParameters){
var valsToSend = "id="+oParameters; // Example
var url = "../../include/ajax/event_list_table.php";
xmlhttp.open("POST",url, true)
xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); // Resolve any cache problems...
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Required for POST requests.
xmlhttp.onreadystatechange = function()
{
if(xmlHttp.readyState==4)
{
// alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;
}
}
xmlhttp.send(toSend);
}
}
And it's switched back to doing nothing. I must have broken something in the process?
Actually it looks like this function is never called... Is this supposed to be called by the onkeyup event? And what do I pass to it as the oParameters argument?
Code:
function ajaxPost(oParameters)
{
var valsToSend = "id="+oParameters; // Example
Ok, I can get it as far as echoing "event_name_filter=d" (where 'd' is what I typed in the textbox) using 'alert(toSend);'.
I'm assuming this is what the 'toSend' value should be?
When I comment out alert(toSend);, I get nothing.
PHP Code:
function filter_datas()
{
event_name_filter = document.getElementById('event_name_filter');
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;
}
}
}
var toSend = 'event_name_filter=' + event_name_filter.value;
// alert(toSend);
var url = "../../include/ajax/event_list_table_ajax.php";
xmlhttp.open("POST",url, true)
xmlhttp.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT"); // Resolve any cache problems...
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Required for POST requests.
xmlhttp.onreadystatechange = function()
{
if(xmlHttp.readyState==4)
{
alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;
}
}
xmlhttp.send(toSend);
Found a tutorial on IBM's website, and made some corrections. Still no response though. I like PHP so much better because when you make a mistake, the whole thing refuses to load and it gives a big ugly "PARSE ERROR" message. This whole 'doing nothing thing' makes it hard to troubleshoot. Anyway, here's my current code:
PHP Code:
function filter_datas()
{
event_name_filter = document.getElementById('event_name_filter');
var toSend = 'event_name_filter=' + event_name_filter.value;
var url = "../../include/ajax/event_list_table_ajax.php?" + escape(toSend)";
function updatePage()
{
if (request.readyState == 4)
{
if (request.status == 200)
{
alert(xmlHttp.responseText); //To make sure you are getting a reply (then remove)
document.getElementById("event_table_area").innerHTML=xmlHttp.responseText;
}
else
{
alert("status is " + request.status);
}
}
}
Reply With Quote
Bookmarks