Adding Functionality Using AJAX

In this article we will develop the functionality for two of our menu bar items, the Browse and the Search buttons. To begin with, we need to change the code that populates the select drop-down to actually access the database. Since our table is set up so that the second field contains the client's name, it's easy to make up a select drop-down with our clients so we can choose which one to look at. 

<?php 
$query = "SELECT DISTINCT list_user FROM wordlist";
$result = $modx->db->query($query);
if($result) {
while($row = $modx->db->getRow($result)) {
echo '<option value="'.$row['list_user'].'">'.
ucfirst($row['list_user']).'</option>';
}
}
?>

And we have our dynamic client list.

Select Client

Of course, this means we need to have a table in the database, in this case named "wordlist" to query. Here is the basic SQL to create the table we'll be using for this series of articles. 

CREATE TABLE `wordlist` (
`word_id` int(11) NOT NULL auto_increment,
`list_user` varchar(20) NOT NULL default '',
`german` varchar(255) NOT NULL default '',
`english` varchar(255) NOT NULL default '',
`spanish` varchar(255) NOT NULL default '',
`french` varchar(255) NOT NULL default '',
PRIMARY KEY  (`word_id`)
);

The AJAX

Then comes the AJAX magic. We've already used the AJAX functions to activate simple stubs in our external files, but now it's time to really look at what is happening. I'm using the Prototype library, which makes HttpXMLRequest calls very easy. Since I do all the processing and formatting of the data in the server script, I used the AjaxUpdater class to simply load the return of the AJAX request into the page. 

function loadDatabase() {
var url = '../assets/modules/database/load.php';
var pars = 'user=' + $F(userSelect);
var myAjax = new Ajax.Updater( 'ajaxContainer', url, 
{ method: 'get', parameters: pars }); 
}

The main points here are the three parameters to the Ajax.Updater construcor. The first is the ID of the container to be updated. In our case, it's a <div> container with the ID of "ajaxContainer". The existing content of this will be replaced with the string returned by the AJAX request.

The second is the url. This is the url to the server script that will process the request and return a string.

The third argument is in several parts. The method can be 'get' or 'post', and corresponds to the GET or POST used by forms. The parameters are what get passed in the GET or POST. I used another convenient Prototype function to get the value of the select drop-down to pass to the server script. The function $F(id) gets the value of the given form element, using the element's ID.

Since this is AJAX, it accesses an external .php file which will not have access to the $modx object and all of its database functions. This means in your .php file you have to set up the database query yourself. 

  include "../../../manager/includes/config.inc.php";
$dbase = ltrim($dbase, "`");
$dbase = rtrim($dbase, "`");
$conn = mysql_connect(
$database_server,$database_user,$database_password
);
$db = mysql_select_db($dbase);

Then you can retrieve the value of the GET or POST, whichever you chose to use, and make your SELECT query as usual. Generate a table for the returned data, and echo the results. The Ajax.Updater will simply pass it on to the container you specified, exactly as if you had refreshed the page and built it with the .php file.

Searching

This is very little different from the Browse functionality. Again, in the AJAX function you set the url to the file you will be processing the request with, use the $F() function to retrieve the value from the input field, and send it off with an identical Ajax.Updater call.

As before, your processing script makes its database connection, retrieves the search value from the GET or POST, submits the query and formats the response. 

function searchDatabase() {

var url = '../assets/modules/database2/search.php';

var pars = 'term=' + $F(searchField);

var myAjax = new Ajax.Updater( 'ajaxContainer', url, 

{ method: 'get', parameters: pars }); 

}

Download the files used for this article.