...

View Full Version : coldfusion and ajax



teedoff
09-03-2010, 03:52 PM
Hi new here and know nothing at all about ajax. I have a coldfusion site with a search page that queries a database and displays results in a dynamic table. Everything works great, however, I would like for the user to then be able to narrow the search results down even further should they need too. For example, if the type GE in the search form, they would as of now get over 500 products returned to the results page. Thats where I would like a dropdown list or two that is populated with the initial query results. I worked through this tutorial here (http://www.adobe.com/devnet/coldfusion/articles/cf_pwrd_ajax_pt1.html), and it works great, but its populating its dropdown list with a fresh query. If anyone knows how to do this, or a link to show me how to do it, I would greatly appreciate it! Thanks in advance!

teedoff
09-04-2010, 02:39 AM
Ok maybe I didnt pose the qeustion right..lol or maybe since I didnt post my code. So here is my search page where the user types in a search criteria in the form.


<cfquery name="rsBulbs" datasource="rlbulbs">
SELECT item
FROM rlbbulbs /*are you sure this is the right template???*/
ORDER BY item ASC
</cfquery>
<form action="results.cfm" method="post">
<table border="0" cellpadding="2" cellspacing="0">
<tr>
<th width="137" nowrap="nowrap">Item Number:</th>
<td width="221"><input type="text" name="item" size="35" /></td>
<td width="130" nowrap="nowrap">Ex. 75K19</td>
</tr>
<tr>
<th>Brand Name:</th>
<td><input type="text" name="brandName" size="35" /></td>
<td nowrap="nowrap">Ex. Philips</td>
</tr>
<tr>
<th>Base Type:</th>
<td><input type="text" name="base" size="35" /></td>
<td nowrap="nowrap"><a href="#"><img src="images/screwBase.gif" alt="Base Type" width="30" height="25" /></a></td>
</tr>
<tr>
<th>Glass Type:</th>
<td><input type="text" name="glass" size="35" /></td>
<td><a href="#"><img src="images/classic.gif" width="30" height="35" alt="Glass Type" /></a></td>
</tr>
<tr>
<th>Wattage:</th>
<td><input type="text" name="wattage" size="35" /></td>
</tr>
<tr>
<th>Voltage:</th>
<td><input type="text" name="voltage" size="35" /></td>
</tr>
<tr>
<td align="center" colspan="3"><input type="submit" value="Search" />
<input type="reset" value="Reset" name="reset" /></td>
</tr>
</table>
</form>

And here is the results page displayed in a dynamic table:

<cfparam name="FORM.item" default="" type="String">
<cfparam name="FORM.brandName" default="" type="String">
<cfparam name="FORM.base" default="" type="String">
<cfparam name="FORM.glass" default="" type="String">
<cfparam name="FORM.wattage" default="" type="String">
<cfparam name="FORM.voltage" default="" type="String">
<!--- Find the Record --->
<cfquery name="rsSearch" datasource="rlbulbs">
SELECT a.bulbID,
a.item,
b.brandName,
b.brandID,
a.base,
a.glass,
a.wattage,
a.voltage,
a.oldPage
FROM rlbbulbs a,rlbbrand b
WHERE a.brandID = b.brandID

<!--- Compare Form Variable with DB --->

<cfif FORM.item IS NOT "">
AND a.item LIKE '#FORM.item#%'
</cfif>
<cfif FORM.brandName IS NOT "">
AND b.brandName LIKE '%#FORM.brandName#%'
</cfif>
<cfif FORM.base IS NOT "">
AND a.base LIKE '%#FORM.base#%'
</cfif>
<cfif FORM.glass IS NOT "">
AND a.glass LIKE '%#FORM.glass#%'
</cfif>
<cfif FORM.wattage IS NOT "">
AND a.wattage LIKE '#FORM.wattage#%'
</cfif>
<cfif FORM.voltage IS NOT "">
AND a.voltage LIKE '#FORM.voltage#%'
</cfif>

<!--- All Results Ordered by brand and Item--->
ORDER BY b.brandName, a.item
</cfquery>

<cfquery name="rsBrand" datasource="rlbulbs">
SELECT brandName
FROM rlbbrand
ORDER BY brandName ASC
</cfquery>
<cfquery name="rsItem" datasource="rlbulbs">
SELECT DISTINCT item
FROM rlbbulbs
ORDER BY item ASC
</cfquery>
<cfquery name="rsBase" datasource="rlbulbs">
SELECT DISTINCT base
FROM rlbbulbs
ORDER BY base ASC
</cfquery>

<cfif rsSearch.RecordCount GT 0>
<div style="overflow:auto; height:500px; width: 95%;">
<table border="1" cellpadding="1" cellspacing="0">
<tr>
<th>Item #</th>
<th>Brand</th>
<th>Base</th>
<th>Glass</th>
<th>Wattage</th>
<th>Voltage</th>
</tr>
<cfoutput query="rsSearch">
<tr>
<td><a href="bulbsDetail.cfm?bulbID=#rsSearch.bulbID#">#item#</a></td>
<td>#rsSearch.brandName#</td>
<td>#base#</td>
<td>#glass#</td>
<td>#wattage#</td>
<td>#voltage#</td>
</tr>
</cfoutput>
<tr align="center">
<td colspan="7"><a href="search.cfm">Search Again</a>||<a href="results.cfm">Return to Top</a></td>
</tr>
</table>

So once the table is populated, a dropdown list at the top could contain the results of whats in the table. If the user selects GE, then the table would contain all GE products and the dropdown lists could be divided by other criteria such as "base", "glass", or "wattage". Similar to what you might see on Ebay where you can narrow search results. Please if anyone knows how to go about coding this, I would very much appreciate it. Thanks!

teedoff
09-10-2010, 06:01 PM
hmmm no advice? lol except a spammer...lol

Kor
09-13-2010, 04:53 PM
have you understood AJAX?
http://www.w3schools.com/Ajax/Default.Asp

[the spammer was banned :) ]

teedoff
09-20-2010, 02:22 PM
No I dont understand Ajax, I have never tried to learn it, as Im pretty much just starting out and have only used CF and starting to learn PHP currently. Do you know how this would be accomplished? I mean I think it would basically come down to when a user runs a search by typing a word in my form, the results are displayed, but the data of those results would also be captured in variables and then called by an ajax function. I just dont know the syntax to create such code.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum