Multiple Radio Buttons or Check Boxes and Multiple Select
We can also do binding of multiple radio buttons or check boxes. This is done
by giving the same name attribute to the radio button collection or to the check
box. We can use unique IDs to allow the use of the HTML <label></label> tags
for extending the selection to the contents of for tags, based on the usage of the
matching ID of the check boxes or radio buttons. In HTML, the use of a for tag
would appear like the following, thus making the user interface better.
<label for=’firstRadio’>
<input id=’firstRadio’ value=’1′ type=’radio’>
</label>
When we have check boxes or multiple select, the results of the bind are treated
like a list. If more than one item is selected, they are stored by separating them with
commas similar to any other returning form data.
Spry Binding
Spry is an independent AJAX library that works with the browser DOM. Spry uses
the same curly bracket type of parameters for binding. There are some differences in
implementation though. Another thing that you can bind to your forms is the Spry
data in what is called a Spry dataset. You would do that as shown in this example:
{spryDataset.dataField}
If we wish to bind deeper into a Spry dataset in more detail, we can use standard
Spry dataset notation to refer to the data.
To include a literal brace character in a bind expression, excape the
character with a backslash.
CFAJAXProxy
This is another very popular AJAX programming feature. This tag allows us to bind
AJAX component changes to CFCs, JavaScript, and URLs without the requirement
of an AJAX component to pass through it. It also allows us to interact with CFCs
directly from JavaScript without binding to any other AJAX component. The
JavaScript interface is created for us, and we can reuse the CFC as if it was present
locally inside the browser JavaScript. It is very simple and acts as a good solution.
Let’s take a look at how it works.
CFAJAX Proxy Binding
We are going to build two text boxes that do arithmetic. The application only adds
or subtracts. The first line of our code binds to the radio button set with the name
calcType. We will bind to the click event. When either of the buttons is clicked,
the call is made to the JavaScript function doCalc() passing the value of the radio
button selected. Then the JavaScript function extracts the values of the two boxes and
makes sure that they are fl oating-point numbers. If we didn’t convert them, it would
see them as text, and append the first text item to the second text item, or we would
get some sort of error in subtraction. Then the results are stored and displayed with
the alert function.
<cfajaxproxy bind=”javascript:doCalc({calcType@click})”>
<cfform id=”myForm” format=”html”>
Enter Two Numbers.<br />
<cfinput type=”text” name=”number1″ id=”number1″><br />
<cfinput type=”text” name=”number2″ id=”number2″><br />
<label for=”calcAdd”>
<cfinput type=”radio” value=”add”
name=”calcType” id=”calcAdd”>
Add</label><br />
<label for=”calcSubtract”>
<cfinput type=”radio” value=”subtract”
name=”calcType” id=”calcSubtract”>
Subtract</label><br />
< /cfform>
<script>
doCalc = function(thisCalc){
var myResult = 0;
var number1 = parseFloat(document.getElementById(‘number1′).
value);
var number2 = parseFloat(document.getElementById(‘number2′).
value);
switch(thisCalc){
case ‘add’:
myResult = number1 + number2;
break;
case ‘subtract’:
myResult = number1 – number2;
break;
}
alert(myResult);
}
</script>
This is what we would see if we entered ’23′ and ’11′ and had selected the subtract
radio button:
We could have sent the results to either a CFC or URL as we did earlier. We do not
need to have visible results in this example either, but it was just to show what was
going on. We can see that one of the uses of CFAJAXProxy is to bind.
CFC Proxy Class Objects
An other use of CFAJAXProxy is to extend the remote methods of a CFC into the
currently loaded AJAX page on the browser. This function is not binding, but
rather an actual proxy. This means that we will extend the functionality of the
remote methods right into the web page without writing extensive code. We will be
converting our math webpage to support multiplication and division. We could do
this easily in the browser. But we want to show the power of extending CFCs, so we
will add these two functions in our CFC and work with them from there.
<cfajaxproxy bind=”javascript:doCalc({calcType@click})”>
<cfajaxproxy cfc=”serverMath” jsclassname=”remoteMath”>
<cfform id=”myForm” format=”html”>
Enter Two Numbers.<br />
<cfinput type=”text” name=”number1″ id=”number1″><br />
<cfinput type=”text” name=”number2″ id=”number2″><br />
<label for=”calcAdd”>
<cfinput type=”radio” value=”add”
name=”calcType” id=”calcAdd”>
Add</label><br />
<label for=”calcSubtract”>
<cfinput type=”radio” value=”subtract”
name=”calcType” id=”calcSubtract”>
Subtract</label><br />
<label for=”calcMultiply”>
<cfinput type=”radio” value=”multiply”
name=”calcType” id=”calcMultiply”>
Multiply</label><br />
<label for=”calcDivide”>
<cfinput type=”radio” value=”divide”
name=”calcType” id=”calcDivide”>
Divide</label><br />
</cfform>
<script>
jsMath = new remoteMath();
doCalc = function(thisCalc){
var myResult = 0;
var number1 = parseFloat(document.getElementById(‘number1′).
value);
var number2 = parseFloat(document.getElementById(‘number2′).
value);
switch(thisCalc){
case ‘add’:
myResult = number1 + number2;
break;
case ‘subtract’:
myResult = number1 – number2;
break;
case ‘multiply’:
myResult = jsMath.doMultiply(number1,number2);
break;
case ‘divide’:
myResult = jsMath.doDivide(number1,number2);
break;
}
alert(myResult);
}
</script>
The first modification to our code is to use the CFAJAXProxy tag in order to
generate a proxy connection to the remote CFC component. We use an alias
name of remoteMath for this component. This becomes a JavaScript class that
helps in creating a local object that proxies between this page and our CFC. We
then add two more radio buttons so that we have an interface for doing the
multiplication function and the division function in our example. The next new
line is where we create an object called jsMath in this example. This is not actually
JavaScript math, but a JavaScript object that uses the remoteMath class to build an
object for communicating with the CFC. Lastly, we check the value of the selected
radio button. Then we use our jsMath object, and communicate with the remote
server. The name of the remote method is the same as we use on our object and
then we pass the argument parameters to the server. The return value is put in our
myResult variable just as we did from JavaScript in add and subtract. If we use the
same numbers and click Divide, the following result will be obtained. Here is the
screenshot of the page in action and the CFC code.
<cfcomponent output=”false”>
<cffunction name=”doDivide” access=”remote”>
<cfargument name=”number1″>
<cfargument name=”number2″>
<cfreturn arguments.number1 / arguments.number2>
</cffunction>
<cffunction name=”doMultiply” access=”remote”>
<cfargument name=”number1″>
<cfargument name=”number2″>
<cfreturn arguments.number1 * arguments.number2>
</cffunction>
</cfcomponent>
Now in a real-world application, we might be looking for some data or updating a
database if we were doing this type of proxy function interaction. The point is that
all the coupling and AJAXing is done with little code. It is truly a remarkable work as
the Adobe engineers have worked hard for this connectivity. This is how ColdFusion
has become better than ever before!
One thing that we have not yet dealt with is the callback functions. There are
two standard types of callback object methods in remote CFC proxy classes, the
setCallbackHandler() method and the setErrorHandler() method. We are going
to modify our code so that the results are automatically sent to these handlers with
our CFC interaction. Here is the final code for our examples.
<cf ajaxproxy bind=”javascript:doCalc({calcType@click})”>
<cfajaxproxy cfc=”serverMath” jsclassname=”remoteMath”>
<cfform id=”myForm” format=”html”>
Enter Two Numbers.<br />
<cfinput type=”text” name=”number1″ id=”number1″><br />
<cfinput type=”text” name=”number2″ id=”number2″><br />
<label for=”calcAdd”>
<cfinput type=”radio” value=”add”
name=”calcType” id=”calcAdd”>
Add</label><br />
<label for=”calcSubtract”>
<cfinput type=”radio” value=”subtract”
name=”calcType” id=”calcSubtract”>
Subtract</label><br />
<label for=”calcMultiply”>
<cfinput type=”radio” value=”multiply”
name=”calcType” id=”calcMultiply”>
Multiply</label><br />
<label for=”calcDivide”>
<cfinput type=”radio” value=”divide”
name=”calcType” id=”calcDivide”>
Divide</label><br />
</cfform>
<script>
jsMath = new remoteMath();
doCalc = function(thisCalc){
var number1 = parseFloat(document.getElementById(‘number1′).value);
var number2 = parseFloat(document.getElementById(‘number2′).value);
jsMath.setCallbackHandler(showResult);
jsMath.setErrorHandler(showError);
switch(thisCalc){
case ‘add’:
showResult(number1 + number2);
break;
case ‘subtract’:
showResult(number1 – number2);
break;
case ‘multiply’:
jsMath.doMultiply(number1,number2);
break;
case ‘divide’:
jsMath.doDivide(number1,number2);
break;
}
}
showResult = function(result){
alert(result);
}
showError = function(statusCode,statusMsg){
alert(“status: “+statusCode+”\n”+statusMsg);
}
</script>
We set the callback handers inside our doCalc() function for the jsMath object.
These methods are default names in the ColdFusion AJAX plumbing. It should
be noted that we do not want to create remote methods with these names in our
CFCs. We removed the variable that we were using and have now created another
function called showResult() for handling the addition and subtraction. Now, let us
look at the multiply case statement block and the divide case statement block for our
code. There is no evidence as to how the output from these calls is being handled.
This is why we have declared the setCallbackHandler() and setErrorHandler()
methods. In those methods, we put the name of the callback handler functions
without their parents. This is a standard way to handle the referencing of a callback
handler in JavaScript. We can see that the standard parameters are passed to the
error handler. Run the modified code and pass in a zero for the bottom number, and
this is what you will see. We could produce much more elaborate code for handling
the error. We could pass structured code back to the success method, and do much
more there also. We kept this example as simple as possible to help us understand
the power and features of how ColdFusion AJAX programming works for both
binding and proxy functions.
This handles all the data type conversions between ColdFusion and browser
JavaScript variables and structure.
This makes ColdFusion the easiest and fastest application for doing AJAX. Also, this
platform provides a high level of power and ease to developers.
November 23, 2009
AJAX