In the first post of this series, we looked at a really basic AJAX example. We simply pulled the time and date into our page via an AJAX call. In this post, we'll take things a step further by passing a variables in and using it in the output.
For this example, we'll take an input string and output it in reverse.
Here is a working sample:
This example is also pretty simple. We'll start again by including the Prototype script in the head of our document:
<script type="text/javascript" src="prototype.js"></script>
Next, create the necessary form fields and buttons with this code:<input type="text" id="input_string" />
<input type="button" value="Reverse It" onclick="run_ajax();" />
<div id="ajax_div"></div>
<script type="text/javascript">
function run_ajax() {
var url = '/ajax/easy2.cfm';
var pars = 's='+escape($F('input_string'));
var target = 'ajax_div';
var myAjax = new Ajax.Updater(target, url, {method:'get', parameters:pars});
}
</script>
<cfsetting showdebugoutput="no">
<cfoutput>
#reverse(url.s)#
</cfoutput>
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
Project Tracker v2.0 Released
Scott said: Joe- Great app - I use it at work. I do have a question, though. I wanted to install this on my host...
[More]
The Importance of HTMLEditFormat()
Andrew said: Just do it when outputting to the screen, not when inserting/updating
data in the database otherwis...
[More]
Project Tracker v2.0 Released
Aaron Bodell said: I came across this app while searching the RIAForge for project trackers. I'm really impressed with ...
[More]
Project Tracker v2.0 Released
Richard said: Thanks Joe - Looking forward to testing the new version!
Is there somewhere we can make suggestions...
[More]
Amazon S3 REST Wrapper
Zac Spitzer said: I've been hacking away on the CFC and I have fixed numerous bugs and added support
for compression, ...
[More]