Using Dojo with Coldfusion Part 1
Tags: Dojo
At the last Melbounre Coldfusion Usergroup I said I would post and example on using dojo, after having some time to myself I thought I would start a running tutorial on using Dojo with coldfusion. The first thing I thought I would do is show a small snippet of code to do a logon using Dojo, and show the benfits to do binding with it. Below is a typical form for a login screen<title>Login page</title>
<body>
<form>
<h1>Login</h1>
<table>
<tr><td>Login:</td><td><input id="login" /></td></tr>
<tr><td>Password:</td><td><input id="password" /></td></tr>
</table>
</form>
</body>
</html>
Now on its own the code doesnt do anything, so lets add a button just after the table with the code below.
As you can see I have set the button up to call a JS function called asLogin, this script will contain the code to do the login using Dojo and the binding feature provided by Dojo.
Before I go any further, lets now add the include that will load the Dojo framework.
Now I'll begin by creating another script block and add the following line of code.
djConfig = { isDebug: false };
Ok, now has Dojo is built up of widgets and libraries. What we have done here is told dojo that we are going to require the IO set off libraries. And the djConfig I am saying that we are not going to do any debugging for this page.
Lets now begin with the asLogin function, the following code will do the actual server request and return a result, it is fairly straight foward but I will explain it more a bit later.
dojo.io.bind({
method : 'POST',
content : {
login : dojo.byId('login').value,
password : dojo.byId('password').value
},
url: 'login.cfm',
load: function(type, data, evt) {
if ('url:' == data.substr(0, 4)) {
alert('Sucess');
//location.href = data.substr(4);
}
else {
alert(data);
}
},
mimetype: "text/plain"
});
return false;
}
You will notice the entire function is one Dojo function call, so the first thing you'll notice is that we are doing a post here. Now because this is binding, we are telling dojo that the content to pass is defined as the Login and Password to be passed to the url: and in this case it is the login.cfm page.
Now comes the best part, the load part of the dojo.io.bind. This is what gets called when the call has returned to us, and from here we can do what we need to do. In this case, I have placed alerts to show you what gets returned from the login.cfm page, which I will show later. In this case I am returning a url if it is successful and the data if it is not so you can see what is happening here. And of course the mimetype to say its going to be text being transfered.
This is a very basic entry to dojo, but does highlight and important feature for io.binding.
Ok now for the last piece to the puzzle.
<cfscript>
if (login eq 'joe' and password eq 'secret')
{
WriteOutput('url:/Login/Success/');
}
else
{
WriteOutput('Wrong login/password.');
}
</cfscript>
<cfsetting enablecfoutputonly="No">
As you aware Coldfusion returns a lot of white space, so in this example, because I am doing an comparison with what is being returned, I need to suppress the whitespace. In the success string, you'll notice that I am returning back to calling function the URL to redirect to.
-
In you "asLogin" function, even though there's a line break at the end of the comment, a copy-paste doesn't preserve it. When you put that into your code, the comment blocks the "else", and so there's no "failure" action.
Also, it might be important to add "showdebugoutput='no'" to the second <cfsetting> tag -- otherwise it will print the debug stuff in the alert box!# Posted By Oblio | 1/5/07 1:13 PM -
Thanks for pointing that out, I have ammended the code view so that this is not that obvious if someoen copies and pastes the code.
# Posted By andrew scott | 1/7/07 6:51 PM -
@Trent, this post is 2 years old. Dijit did not exist then.
# Posted By Andrew Scott | 7/29/09 4:22 AM
Have you tried putting a CFGRID in dijit.TitlePane? In IE the grid will disappear if the titlepane is closed then opened.
TweetBacks