Yesterday I blogged about using ColdFusion's built in Ajax tools to add server-side database checking to a form. This worked, but I wanted to repeat the process using jQuery on the front end. What's nice is that while the front end may change, the ColdFusion Component I wrote on the back end doesn't have to change at all. Let's look at the new version - and as always - keep in mind that this could be rewritten many different ways.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#artist").keyup(function(e) {
var value = $.trim($("#artist").val());
if (value != '') {
$.post("test.cfc?method=checkArtist&returnFormat=json", {n:value}, function(res,code) {
if (res == true) {
$("#warning").html("This artist exists.");
$("#submitBtn").attr("disabled","disabled");
}
else {
$("#warning").html("");
$("#submitBtn").removeAttr("disabled");
}
},"json");
} else {
$("#submitBtn").attr("disabled","disabled");
}
});
});
</script>
</head>
<body>
<form name="mainForm">
New Artist: <input name="artist" id="artist"><br/>
<div id="warning"></div>
<input type="submit" id="submitBtn" value="Save" disabled="disabled">
</form>
</body>
</html>
Outside of the code, the only other difference is in the HTML. Previously I made use of cfform, but since I'm not using any client-side code autogenerated from ColdFusion, I switched to vanilla HTML tags. The code block now loads in jQuery and adds a keyup listener to our artist form field. After I get the value - I either do my Ajax post or just disable the submit button. (Note - since this form has a single field it can still be submitted with an enter key. I'm not going to worry about that now.)
So it's not a lot more code at all. But you do have to handle the binding yourself. It's just one extra line of code though so it's nothing to worry about. You can demo this yourself here (remember to use "Weber" as an artist).
Archived Comments
well post way!
what if we want to check more than 5 fields, user may click submit button two times
You could use event handlers for all 5 that call the same func. The func would gather all 5 values and send them to the CFC to do whatever.
I would recommend limiting the ajax request to only be called if the length of the artist name is greater than 2 characters. In a large list one or two character requests may yield a significant payload which you can control with a TOP n rows, but why bother firing up the query when all you do is fill up the cache with unwanted results while other likely better candidate rows get pushed from cache. Stop it at the front door. Most data sets are not comprised of 1 or 2 char records.
Good call, Dennis. I've done that before, but forgot about it here.
One day I want to do a Ajax Optimization talk. I did one - kinda - at Scotch on the Rocks in 2010, but I'd like to do it again.
So would you recommend using jQuery over the extJS library in ColdFusion? Is it more elegant? Smaller? (Seems like CF will load 5-10 different .js files when doing Ajax)
I'm tempted keep most of my programming in CF even for the front-end just so that when a new developer comes in later it won't require additional knowledge beyond CF.
But... then again, who doesn't know jQuery these days?
By the way, are you in Massachusetts yet? I swear I saw you in a restaurant the other week.
I recommend using the Ajax framework that works best for you.
I know that sounds like a cop out - but hear me out.
When I first started doing Ajax crap, Spry worked -very- well for me. (And I still think Spry deserves credit for how easy it made Ajax.) I was powerful with it. I got stuff done.
When I tried Ext - I found it awkward. I know it does good stuff. I know it does "Application Layout" better than anyone else. But I just didn't like working with it.
One day I picked up jQuery, I found it nicer than Spry, and the rest is history.
When you say the "extjs lib in CF", to me it means, "The Built In Stuff we Give You". That built in stuff comes in two major areas:
Back End Support
Front End "Stuff"
The back end support is stellar. I will say CF does it better than any other language out there. One CFC being able to be used for business logic in the back end _and_ Ajax apps and Flex apps and mobile apps? That's Awesomesauce.
The front end stuff though... it's fine for folks new to Ajax. But if you _know_ Ajax then you really aren't the audience for those tags.
Very helpful for a project update I am planning right now. One question. What is the purpose of the code variable in this line:
$.post("test.cfc?method=checkArtist&returnFormat=json", {n:value}, function(res,code)
The result you get from the POST is both the data and the status code. (200, etc.)
Now I understand. Is there a reason I get the word success rather than the code?
<pre>$.post("Components/deleteme.cfc?method=debtnumCall&returnFormat=json", {qdebtNumber:value, qinDebted:1}, function(res,code)</pre>
I'm sorry - the second arg is the _text_ status. Details here:
http://api.jquery.com/jQuer...