Learning jQuery, Day 3
Day 2 of this series showed how to use the CFAJAXPROXY tag along with jQuery to do sortable lists. Today, let's just see how to use jQuery to load content on the server -- both from a CFM file and a CFC.
We'll start with an HTML page called "formlesspage.htm":
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#show_form').click(function(){
$('#container_form').load('smallform.cfm');
});
$('#cancel').click(function(){
$('#container_form').empty();
});
});
</script>
</head>
<body>
<p>Hello, welcome to our small, formless page. Would you like to add your name?</p>
<input type="button" id="show_form" value="Sure!">
<div id="container_form"></div>
</body>
</html>
When the user clicks the "Sure!" button, we'll use jQuery to load the contents of the file, "smallform.cfm", into the div, "container_form".
Here's the contents of "smallform.cfm":
<div id="container_firstName">
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName">
</div>
<div id="container_lastName">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName">
</div>
<input type="button" id="cancel" value="Cancel">
<input type="submit" value="OK">
</form>
Now, if you try that out, you'll see it works great!
Well, almost.
If you click the "Cancel" button, nothing happens. But in our "formlesspage.cfm", we have jQuery code to handle the cancel button being clicked. So why doesn't it work?
Let's look at the one that works: our "Sure!" button. The code...
...code here...
});
Similarly, jQuery attempts to attach an anonymous function as an event handler when the DOM element with an id of "cancel" is clicked. But when the page loads, there is no such element. jQuery doesn't throw an error since there is no error.
But, of course, that's not the behavior we're looking for. Prior to version 1.2 (I think) of jQuery, this caused developers to have to think about something called "event delegation". I won't get into this because...
- you would have to understand how something called "event bubbling" occurs
- you would have to understand how event bubbling is handled by different browsers
- you don't have to worry about this anymore!
With the latest version of jQuery,the "live" method was introduced. Let's use it to solve this problem. I'll change the code for the "cancel" button:
$('#container_form').empty();
});
Now, even though the code with the cancel button is loaded after the initial jQuery code runs, the event handler will be attached.
As for using a CFC instead of a .cfm file, something like this will work:
<cffunction name="display" access="remote" output="true">
<form action="process_smallform.cfm" method="post">
<div id="container_firstName">
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName">
</div>
<div id="container_lastName">
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName">
</div>
<input type="button" id="cancel" value="Cancel">
<input type="submit" value="OK">
</form>
</cffunction>
</cfcomponent>
jQuery's introduction of the "live" method is an example of how John Resig and his excellent team work hard to make programmers' lives a bit easier. Grazi, John.
I'm sure you covered it somewhere but I missed it.
.load('SmallForm.cfc?method=display');