CF AJAX Programming

November 23, 2009

JavaScript Binding

Now, we will see how simple power can be managed on the browser. We will create
a standard JavaScript function and pass the same bound data field through the
function. Whenever we update the text box and it looses focus, the contents of the
div will be updated from the function on the page. It is suggested that we include all
JavaScript rather than put it directly on the page. Refer to the following code:



	<cfform id=”myForm” format=”html”>

		This is my edit box.<br />

		<cfinput type=”text” name=”myText”>

	</cfform>

	<hr />

	And this is the bound div container.<br />

	<cfdiv bind=”javascript:updateDiv({myText})”></cfdiv>

	<script>

		updateDiv = function(myEdit){

			return ‘This is the result that came from the JavaScript function

			with the edit box sending “<strong>’+myEdit+’</strong>”‘;

		}

	</script>

Here is the result of placing the same text into our JavaScript example.

URL Binding

We can achieve the same results by calling a web address. We can actually call a
static HTML page. Now, we will call a .cfm page to see the results of changing the
text box refl ected back, as for CFC and JavaScript. Here is the code for our main page
with the URL binding.



	<cfform id=”myForm” format=”html”>

		This is my edit box.<br />

		<cfinput type=”text” name=”myText”>

	</cfform>

	<hr />

	And this is the bound div container.<br />

	<cfdiv bind=”url:bindsource.cfm?myEdit={myText}”></cfdiv>

In the above code, we can see that the binding type is set to URL. Earlier, we used
the CFC method bound to a file named bindsource.cfc. Now, we will bind through
the URL to a .cfm file. The bound myText data will work in a manner similar to the
other cases. It will be sent to the target; in this case, it is a regular server-side page.
We require only one line. In this example, our variables are URL variables. Here is
the handler page code:



	<cfoutput>

		‘This is the result that came from the server page with the edit

		box sending “<strong>#url.myEdit#</strong>”‘

	</cfoutput>

This tells us that if there is no prefix to the browse request on the bind attribute of the
<cfdiv> tag, then it will only work with on-page elements. If we prefix it, then we
can pass the data through a CFC, a URL, or through a JavaScript function present on
the same page. If we bind to a variable present on the same page, then whenever the
bound element updates, the binding will be executed.

Bind with Event

One of t he features of binding that we might overlook its binding based on an event.
In the previous examples, we mentioned that the normal event trigger for binding
took place when the bound field lost its focus. The following example shows a bind
that occurs when the key is released.



	<cfform id=”myForm” format=”html”>

		This is my edit box.<br />

		<cfinput type=”text” name=”myText”>

	</cfform>

	<hr />

	And this is the bound div container.<br />

	<cfdiv bind=”{myText@keyup}”></cfdiv>

This is similar to our first example, with the only difference being that the contents of
the div are updated as each key is pressed. This works in a manner similar to CFC,
JavaScript, and URL bindings. We might also consider binding other elements on a
click event, such as a radio button. The following example shows another feature. We
can pass any DOM attribute by putting that as an item after the element id. It must
be placed before the @ symbol, if you are using a particular event. In this code, we
change the input in order to have a class in which we can pass the value of the class
attribute and change the binding attribute of the cfdiv element.



	<cfform id=”myForm” format=”html”>

		This is my edit box.<br />

		<cfinput type=”text” name=”myText” class=”test”>

	</cfform>

	<hr />

	And this is the bound div container.<br />

	<cfdiv bind=”{myText.class@keyup}.{myText}”></cfdiv>

Here is a list of the events that we can bind.

@click

@keyup

@mousedown

@none

The @none event is used for grids and trees, so that changes don’t trigger bind events.

Extra Binding Notes

If you h ave an ID on your CFForm element, then you can refer to the form element
based on the container form. The following example helps us to understand
this better.



	Bind = “url:bindsource.cfm?myEdit={myForm:myText}”

The ColdFusion 8 documents give the following guides in order to specify the
binding expressions.

cfc: componentPath.functionName (parameters)



	The component path cannot use a mapping. The componentPath value

	must be a dot-delimited path from the web root or the directory that

	contains the page.