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
Mike said: great app! thanks heaps.
found a few bugs in the initial install...
-forgot.cfm - no need to inclu...
[More]
Project Tracker v2.0 Released
Nathan said: Hi Joe
I went to check out the demo site http://ajaxcf.com/project... and it throws an error.
Inval...
[More]
Project Tracker v2.0 Released
Lachie said: Wow thanks for creating a version 2. I have extensively used version 1 for my projects. It works gre...
[More]
Project Tracker v2.0 Released
Steve W said: Joe,
You style sheet is missing because a period was left out of the path.
<link rel="styl...
[More]
Project Tracker v2.0 Released
Mark Mandel said: Joe,
Great work! I can't wait to have a play!
Btw, your CSS isn't rendering on your post view pag...
[More]