So, you're curious how this application works? You've come to the right place. First, let me describe how I get and display the data. I created a ColdFusion
page that uses Now, as far as the mechanics that make the application work. You may have noticed that when you type stuff in the query boxes (or select a category), the data is displayed without a page refresh. This is possible because the page is using ajaxCFC. This works by using JavaScript to make a http post. The http post calls a ColdFusion function in a separate page. Here is an example.:
<input type="text" id="tagQuery" onKeyup="loadTags()">
This input tag calls the JavaScript function loadTags():
function loadTags()
{
if (document.getElementById("tagQuery").value) {
var tagQuery = DWRUtil.getValue("tagQuery");
DWREngine._execute(_cfscriptLocation, null, 'cfTagsLookup', tagQuery, getResult);
}
}<cffunction name="cfTagsLookup"> <cfargument name="cftag" required="yes" type="string" hint="This variable is passed in from the JavaScript. It's the characters the user is typing in the 'cf____' field."> <!--- Include the file that will initiate the cftagsQuery query object, if necessary ---> <cfinclude template="init/initXMLQuery.cfm"> <!--- perform a query of query on the cftagsQuery query object ---> <cfquery name="cftagQuery" dbtype="query"> select tag, category, summary from cftagsQuery where lower(tag) like '#cftag#%' order by tag </cfquery> <!--- Create all the HTML that will be returned to the JavaScript function ---> <cfset result = "<table><tr><td>Tag</td><td>Category</td><td>Summary</td></tr>"> <cfoutput query="cftagQuery"> <cfset result = result & "<tr><td>#tag#</td><td>#category#</td><td>#summary#</td></tr>"> </cfoutput> <cfset result = result & "</table>"> <cfreturn result> </cffunction>
function getResult(result)
{
document.getElementById("info").innerHTML = result;
}
<div id="info"></div>
My real code is a lot more complex than this (data scrubbing, formatting, etc.), but this gives you an idea of what's going on. |