Posted in ColdFusion | Posted on 08-03-2007 | 12,337 views
I was writing some samples for the new CFWACK and built something short and cute that I thought was worth sharing now. If you look at the search form on ColdFusionBloggers you will see that it does a dynamic replacement on the main content area when you perform a search (if you are on the home page). This is handy but I was curious about other ways of doing it. Consider this simple example:
2
3<cfdiv bind="url:results.cfm?search={search}" />
The first line is an extremely simple form. The second line is the cool one. I've bound a CFDIV to a results page. By using {search} in the bind, I've set it so that every time the value changes, the contents will change. You can see this in action here:
http://www.coldfusionjedi.com/demos/ajaxsearch/index2.cfm
You can enter a term and either click outside the box or hit the button. (Don't hit Return/Enter.) While that works, an even slicker version is this:
2
3<cfdiv bind="url:results.cfm?search={search@keypress}" />
I've removed the button and notice now my bind is based on search@keypress. The @ symbol means I'm defining an event to listen to. Instead of onChange, I've used keypress (when using this format, drop the "on"). Now you get "filter as you type" search, all in 2 lines of code without a line of JavaScript. You can see this demo here:
http://www.coldfusionjedi.com/demos/ajaxsearch
While not the prettiest demo, and not the most elegant (you don't want to type very fast), it's darn tooting sweet how simple the code is. Just in case folks are curious, here is the code for results.cfm. It isn't anything special or "CF8-ish":
2<cfset url.search = htmlEditFormat(url.search)>
3<cfset url.search = left(url.search,255)>
4
5<cfquery name="results" datasource="coldfusionjedi">
6select top 10 id, title, posted
7from tblblogentries
8where title like <cfqueryparam cfsqltype="cf_sql_varchar" value="%#url.search#%" maxlength="255">
9order by posted desc
10</cfquery>
11
12<table border="1">
13 <tr>
14 <td>Title</td><td>Posted</td>
15 </tr>
16 <cfoutput query="results">
17 <tr>
18 <td><a href="http://www.coldfusionjedi.com/index.cfm?mode=entry&entry=#id#">#title#</a></td>
19 <td>#dateFormat(posted)# #timeFormat(posted)#</td>
20 </tr>
21 </cfoutput>
22</table>
Who here thinks it would be nice to have a list of cool ColdFusion 8 AJAX sites? I don't mean my ugly little demos, but production sites making use of the technology? I'd happily start a list and link to it under Guides.
http://www.gotcfm.com/thelist.cfm
Just a demo, I know.
Using keyup instead fixes this although it would have problems if the key is not released).
Two huge problems:
1) There is a lazy update. In other words, If I type in a letter, it's as if the keypress event triggers before the letter is entered in the box. So if I type 'D', the keypress event is generated as a blank. If I type 'a' to make the text box appear as 'Da', only the 'D' is submitted to my div page, and so on.
2) The binding event is not compatible with backspaces or pasting.
Any thoughts on these 2 issues?
1) Yep, I think just switching to keyup, instead of keypress, will fix it. I always get those confused.
2) Hmm, then maybe change would do it. (The change event I mean)
I'm planning on doing a blog post like this with jQuery and I'll double check these issues then.
I did try the onchange event, and none of the functionality worked. Unless it is 'change', and not 'onchange'. I will try that Monday!
Thanks for your insight always.
AJ
Imagine a customer list, and as you scroll through, a grid below changes with their order history.
Some users use the mouse, others tab around the screen & use the keyboard. As they select, its bound, and the grid changes.
When keyup, its neat - hitting up and down arrows changes the ajax output. With clicking, the keyboard doesn't work. if I do "on change", they have to leave the field.
Any thoughts?
Sorry if this is basic ... I've been on CF since CF3, but Ajax is new to me ....
Thanks again
Again, a bit rough, but hopefully it gives you some idea.
The original binds were:
bind="cfc:email.showfields({select-field-1},{select-field-2@keypress})"
bind="cfc:email.showfields({select-field-1},{select-field-2@click})"
To get it to listen to both keypress and click all I did was:
bind="cfc:email.showfields({select-field-1},{select-field-2@keypress},{select-field-2@click})"
... and then on the back end CFC I changed:
cfargument name="select-field-1" type="string" required="No" default="0"
cfargument name="select-field-2" type="string" required="No" default="0"
... to ...
cfargument name="select-field-1" type="string" required="No" default="0"
cfargument name="select-field-2" type="string" required="No" default="0"
cfargument name="select-field-dummy" type="string" required="No" default="0"
... works just fine.
It needs to be "keyup" and not "keypress"
Keypress "lags" ... keyup gets it right
I am using this as a client lookup inside a cfwindow. As our staff type the name, the results appear in a cfgrid. Could I be nudged in the direction as to how I may achieve this?
Thanks in advance.
http://bit.ly/QcLik
My problem is: some people hit "enter" and some people click "search". I saw the post about two events on one form...but what event would I use for on "enter"? I can't seem to find anything about that. Any help would be great! :)
i'm new here. i already try the post above in my application. there some problem with my application. i using the same technique as the post. but after i refresh the cfdiv area with ColdFusion.Window.navigate, the problem occur. i seem that the filter can't use anymore. do u have any idea to troubleshoot the problem?
Is this function now disabled?
As for a download, well, it is only 2 files and the source is above. You can cut and paste. :)
[Add Comment] [Subscribe to Comments]