Answered
Using AJAX with ColdFusion...
Is it true that AJAX doesn't really fetch data realtime from
the database when they say they do? For example, I have 2 lists of
products that I display using AJAX (See code below). On Template A,
if I click the "Display Top 5 Products" link and then click the
"Display Top 10 Products" link and then leave the browser there,
then I go to my database and modify the content of the second
Product Name in the top 5 products, then click on the "Display Top
5 Products" link again, I don't see the modified content in the
second Product Name. Is AJAX supposed to only display different
sets of pre-loaded data?
Template A:
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
function createRequestObject(){
var obj;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer"){
obj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
obj = new XMLHttpRequest();
}
return obj;
}
var http = createRequestObject();
function outputResult(c) {
http.open("get", "TemplateB.cfm?Count=" + c, true);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if (http.readyState == 4) {
document.getElementById('result').innerHTML = http.responseText;
}
}
</script>
</head>
<body>
<a href="javascript:outputResult(5)">Display Top 5 Products</a><br>
<a href="javascript:outputResult(10)">Display Top 10 Products</a><br>
<br><br>
<div id="result"></div>
</body>
</html>
Template B (TemplateB.cfm):
<cfquery name="GetProducts" datasource="MyDataSource">
SELECT TOP #Count# Product_ID, Product_Name, Product_Desc
FROM Products
ORDER BY Product_ID DESC
</cfquery>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Product ID</td>
<td>Product Name</td>
<td>Product Description</td>
</tr>
<cfoutput query="GetProducts">
<tr>
<td>#Product_ID#</td>
<td>#Product_Name#</td>
<td>#Product_Desc#</td>
</tr>
</cfoutput>
</table>
</body>
</html>
Template A:
<html>
<head>
<title>Untitled</title>
<script language="javascript" type="text/javascript">
function createRequestObject(){
var obj;
var browser = navigator.appName;
if (browser == "Microsoft Internet Explorer"){
obj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
obj = new XMLHttpRequest();
}
return obj;
}
var http = createRequestObject();
function outputResult(c) {
http.open("get", "TemplateB.cfm?Count=" + c, true);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if (http.readyState == 4) {
document.getElementById('result').innerHTML = http.responseText;
}
}
</script>
</head>
<body>
<a href="javascript:outputResult(5)">Display Top 5 Products</a><br>
<a href="javascript:outputResult(10)">Display Top 10 Products</a><br>
<br><br>
<div id="result"></div>
</body>
</html>
Template B (TemplateB.cfm):
<cfquery name="GetProducts" datasource="MyDataSource">
SELECT TOP #Count# Product_ID, Product_Name, Product_Desc
FROM Products
ORDER BY Product_ID DESC
</cfquery>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<table border="1" cellpadding="1" cellspacing="1">
<tr>
<td>Product ID</td>
<td>Product Name</td>
<td>Product Description</td>
</tr>
<cfoutput query="GetProducts">
<tr>
<td>#Product_ID#</td>
<td>#Product_Name#</td>
<td>#Product_Desc#</td>
</tr>
</cfoutput>
</table>
</body>
</html>
AdChoices