Using Ajax to Retrieve Data from a MySQL Database

[warthogweb]

I am using MOdX Evo CMS and am using some PHP to retrieve sample data from a small contact database in the form of a list of twenty or so records. I want to add a 'Details" link to show additional information and have been recommended to use Ajax.

This I have done (code below) but regardless of which record the 'Details" link is clicked, only the first record's details are shown under the first record and the page freezes until refreshed. The code works fine on a single record but not on a list.

It would seem to be a simple thing but is proving to be a problem.

Anyone any ideas?

Martin

<?php
$output = '';//create variable for holding the output
$sql = $modx->db->query( 'SELECT town, ass_name, email, extra1, id FROM `publicity` WHERE region="durban" LIMIT 0, 1000');//define the DB query, in this case the table is named 'tblprojects', add WHERE AND etc. as needed
$resultArray = $modx->db->makeArray( $sql );//put it into an array
foreach($resultArray as $item)//go through each record in the array
{//start looping through the data array
$params['region']=$item['region'];//set the placeholders, the $params sets the name of the placeholder, the $item is the column name from the DB table
$params['town']=$item['town'];
$params['ass_name']=$item['ass_name'];
$params['email']=$item['email'];
$params['website']=$item['website'];
$params['extra1']=$item['extra1'];
$params['id']=$item['id'];

$output.=$modx->parseChunk('ProjectTpl', $params, '[+', '+]');//define the chunk name and process the content, here it's ProjectTpl which has the placeholders for the data
}//finish looping through the data array
return $output;//now return the output from the processed chunk
?>



Output Page:::


<script type="text/javascript">
var url = "GetCustomerData.php?id="; // The server-side script
function handleHttpResponse() {
if (http.readyState == 4) {
if(http.status==200) {
var results=http.responseText;
document.getElementById('divCustomerInfo').innerHTML = results;
}
}
}

function requestCustomerInfo() {
var sId = document.getElementById("txtid").value;
http.open("GET", url + escape(sId), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject() {
var xmlhttp;

if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject){
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp){
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
}

}
return xmlhttp;


}
var http = getHTTPObject(); // We create the HTTP Object
</script>



<table border="0" cellspacing="0" cellpadding="0" width="600" align="center" class="output">
<tbody>
<tr height="20" align="center">
<td width="350">[+ass_name+]</td>
<td>[+extra1+]</td>
</tr>
<tr height="20" align="center">
<td><a href="mailto:[+email+]">[+email+]</a></td>
<td><a href="http://www.[+website+]">[+website+]</a></td>
</tr>
<tr>
<td colspan="2">[+id+] </td>
</tbody>
</table>


<br>

<p>Enter customer ID number to retrieve information:</p>
<p>Customer ID: <input type="text" id="txtid" value="[+id+]" /></p>
<p><input type="button" value="Get Customer Info" onclick="requestCustomerInfo()" /></p>
<div id="divCustomerInfo"></div>

[Mr Alfa]

It appear as the tpl should have a button for each user so that the user can select an item for getting te information. All the snippet which generates a form or link will have certain plcae holders for displaying the tpl details. Try to use the place holder in the parameter list of the onclick function.

Just go through the following code:

<input type="button" value="Select Image" onclick="BrowseServer('[+notes.id+]')" />

Also the BrowseServer javascript function accepts it as an argument which is assigned as a global variable. Simply pass it as a parameter to the AJAX function as shown below:

function BrowseServer(notesId) {    window.notesId = notesId;