Search

Subscribe

Enter your email address to subscribe to this blog.

Recent Comments

Groovy's null safe operator
diana said: Thanks for the cold fusion example..... [More]

Groovy's null safe operator
avi said: thanks danvega for the information.... [More]

Sneakerhead Git Branches
James Brown said: The successful branching model you referenced can be used even if here is only one developer on a pr... [More]

Learning Groovy & Grails at Harvard
Sam Farmer said: Signed up and ready to go! [More]

Groovy & Grails - List of Learning Resources
Eric Pierce said: Thanks for this, Dan! [More]

jQuery Tools

I just came across one of the coolest new additions to the jQuery framework. jQuery tools is a collection of the most important user-interface components for today's websites. The great thing about the tools collection is that it weighs in a whooping 5.8KB. With all things jQuery it's incredible easy to use and it is a great addition to an already GREAT framework. I encourage you to check out the demo's because they are really great and it's pretty exciting to see them in action.
 
 

jQuery Select Example

Now that I am working a lot more with jQuery I thought I would start posting little examples of why I enjoy using it so much. If you are looking for a full on beginner or selective tutorial you should head over to the tutorials section on the jQuery site, it is packed with great stuff. This first example is a short one but to me is the main reason I have been using jQuery so much lately. Just keep in mind when I am going through these examples that I am no JS expert so there may be better ways to accomplish the task at hand.

Everyone has dealt with a select box (drop down) at one point or another right? One thing I really hate about JS is how much code I have to write just to accomplish what should be a simple task. Here is the way I would of done it in the past. In our example we have a list of developers in a select menu. We explicitly set an onChange event handler (not a good practice more on that another time) that calls our onSelectChange method. The problem now is that you have to grab the element from the dom, find the selected index and write all this code to get the values and text. I just don't have fun writing this and you can probably see why. If there is a better way that is my fault and while this would work its just no fun for me.

Now on to the fun part. The first thing we need to do is include the jquery library and create a ready function. We also have our list of developers and our goal is to write out what developer the user selects every time the selection changes.
The first thing we need to do is to notify our application that the user changed their selection. To do that we can use a jquery change event. To use this event we must first have a jquery object. This is really where the beauty of the code lies, almost everything is returned as a jQuery object. By selecting our developer select we simply attach an event and pass in the name of the function we would like to call when the event occurs.

Now we can write our method that handles the actual logic of our application. Remember all that code we wrote earlier, it was ugly right? This to me is a better approach, first you can get the selected option using the option:selected selector. This will return to us a jQuery object and we can get what we need by using the val() and text() attributes. The html() method in this case sets the contents of an element.
There is a link below for a live demo of this. This was just a quick example of why I enjoy using jQuery. The code is clean and I am never guessing what some method returned to me (object/string/date) because I will almost always get back a jQuery object. If you have any questions about this example let me know and for you more advanced users I got some good stuff in the pipe so stay tuned.

Select Demo

 
 

Its no wonder ColdFusion developers love jQuery

Lately I have been doing a lot more development using jQuery and I am loving it. If you think back to when you first started using ColdFusion I would imagine we have a similair story. Some of you may have read an article somewhere about this great language but I bet most of you may have a story closer to mine. I was getting into building dynamic sites and a friend told me you really need to pick up ColdFusion. It makes complex things very easy and cuts down on development time. I thought perfect, this is exactly what I need, more time to hang out with friends.

Fast forward to today and I find myself in the same position. I have used jQuery before but for smaller projects. Now that I am getting deep into some project I can truly understand what the hype it about. So I am doing today what someone did for me awhile back and that is trying to push some people in the right direction. If you have not had a chance to check it out then you really need to. Just as ColdFusion it make really easy things simple and what a time saver on code. Over the next couple of weeks you are going to see a lot of examples from me (I have at least 6 now) that I am going to walk you through. You may have seen most but for those who have not it will hopefully open up your eyes.

 
 

Spry Auto Suggest IE6 Bug

If you have been living under a rock and have not had a chance to check out the spry widgets than I suggest you go do it now. The widgets are easy to use and configuration is a snap. There is a bug when using the Auto Suggest widget in MSIE6. When the auto suggest list pops up you are unable to use your mouse to select the item. Everything seems to work fine for me in IE7, FF & Safari so I am pretty sure that it is a IE6 specific issue. Here is a screen shot and a link to the sample.
http://labs.adobe.com/technologies/spry/samples/autosuggest/SuggestSample.html

Now that you know what the problem is I would like to share with you the fix that was posted. I found this while digging through the spry forums. To fix the problem simply open up the SpryAutoSuggest.css file and find the class hideSuggestClass. All you hanave to do is add a new z-index property and give it a value of 1011. The default class should now look like this.

view plain print about
1<style>
2.hideSuggestClass{
3    border: 2px solid #999999;
4    background-color: white;
5    height: 75px;
6    overflow:auto;
7    display:none;
8    width: 250px;
9    margin: 0px;
10    cursor: pointer;
11    z-index: 1011;
12}
13</style>

 
 

ajaxCFC Login Form

This weekend I had a chance to download ajaxCFC and play around with it a bit. If you are not familiar with ajaxCFC please be sure to click the link above to learn more about it. The short version of what it is though straight from the source of Rob Gonda's website is as follows. AjaxCFC is a ColdFusion framework meant to speed up ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems.

Now that we are all caught up lets go ahead and dive right into some code. The first thing you want to do download the ajaxCFC zip by clicking here. After extracting the zip file you will notice 3 folders inside of the ajaxCFC folder. The only one we are interested in right now is the core folder. In the core folder there is an ajax.cfc file and js folder. These are the the files we would like to copy into our example application. Create a new folder structure in your webroot ajax/loginexample and copy the files here. Now that we have our folder structure setup we are going to create 2 files and will explain them below. So of the information below is taken directly from the ajaxCFC documentation.

index.cfm
view plain print about
1<html>
2<head>
3    <title>Ajax CFC Login Example</title>
4    <!-- ajaxCFC -->
5    <script type="text/javascript">_ajaxConfig = {'_cfscriptLocation':'Security.cfc', '_jsscriptFolder':'js/'};</script>
6    <script type="text/javascript" src="js/ajax.js"></script>
7    <script type="text/javascript">
8    function submitForm() {
9        authenticateUser();
10        return false;    
11    }
12    function authenticateUser() {
13        var username = $("username").value;
14        var password = $("password").value;
15        
16        DWRUtil.useLoadingMessage();
17        DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'authenticate', username,password, authenticateResults);
18    }
19    function authenticateResults(r) {
20        // evaluate server side JS
21        if( eval(r) == true ) {
22            $('results').innerHTML = "user ok";
23        }else {
24            $('results').innerHTML = "bad username / password try again";
25            document.getElementById("username").style.border = "1px solid red;";
26            document.getElementById("password").style.border = "1px solid red;";
27        }
28    }
29    </script>
30</head>
31
32<body>
33    <form name="frmLogin" method="post" onSubmit="return submitForm()">
34        <p>
35            <label for="username">Username:</label>
36            <input type="text" name="username" id="username" />
37        </p>
38        <p>
39            <label for="password">Password:</label>
40            <input type="text" name="password" id="password" />
41        </p>
42        <p>
43            <input type="submit" name="submit" value="Login">
44        </p>
45    </form>
46    
47    <div id="results"></div>
48</body>
49</html>

Ok, lets examine this file and find out what is going on here. '_ajaxConfig' will store the location of the listener CFC and location of the 'js' folder that was included in the ajax.zip file you downloaded. You are not forced to use the '_cfscriptLocation' variable as you may specify the CFC location directly in the ajax call.

view plain print about
1<!-- ajaxCFC -->
2    <script type="text/javascript">_ajaxConfig = {'_cfscriptLocation':'Security.cfc', '_jsscriptFolder':'js/'};</script>
3    <script type="text/javascript" src="js/ajax.js"></script>

The first function submitForm() is called when the form is submitted and returns false so the form is not posted. When the function is called it calls our authenticateUser() method. In this method we get the values of the username and password fields in the form. To invoke an ajax component you need to use 'DWREngine._execute' in the following format: DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'method', args1, args2, args3, callBackFunction). So this means that we are calling the authenticate method in the component _cfscriptLocation and we pass the arguments username and password that we just set above. Finally we tell it the name of the method to call upon completion. In our authenticateResults method we display the results in and if there are errors we update the style of the username and password field so the end user knows where the error came from.

view plain print about
1<script type="text/javascript">
2    function submitForm() {
3        authenticateUser();
4        return false;    
5    }
6    function authenticateUser() {
7        var username = $("username").value;
8        var password = $("password").value;
9        
10        DWRUtil.useLoadingMessage();
11        DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'authenticate', username,password, authenticateResults);
12    }
13    function authenticateResults(r) {
14        // evaluate server side JS
15        if( eval(r) == true ) {
16            $('results').innerHTML = "user ok";
17        }else {
18            $('results').innerHTML = "bad username / password try again";
19            document.getElementById("username").style.border = "1px solid red;";
20            document.getElementById("password").style.border = "1px solid red;";
21        }
22    }
23    </script>

Finally we setup our form that calls the method submitForm() on submit. And we declare a region that will hold our results.

view plain print about
1<form name="frmLogin" method="post" onSubmit="return submitForm()">
2        <p>
3            <label for="username">Username:</label>
4            <input type="text" name="username" id="username" />
5        </p>
6        <p>
7            <label for="password">Password:</label>
8            <input type="text" name="password" id="password" />
9        </p>
10        <p>
11            <input type="submit" name="submit" value="Login">
12        </p>
13    </form>
14    
15    <div id="results"></div>

Security.cfc
The first thing you will notice about our security component is that it extends our ajaxCFC that was included in the download. To create ajax listeners you will need to extend ajax.cfc. Next we have our function called authenticate that will accepet 2 arguments; username and password. The method is self explanatory and easy enough to replace with a call to your database.

view plain print about
1<cfcomponent name="Security" extends="ajax" hint="I handle security in our application.">
2    
3    <cffunction name="authenticate" access="public" returntype="boolean" hint="I will authenticate a user">
4        <cfargument name="username" type="string" required="true" />
5        <cfargument name="password" type="string" required="true" />
6        <cfset var isAuthenticated = false>
7        
8        <!--- you would replace this with db functionality --->
9        <cfif arguments.username EQ "admin" AND arguments.password EQ "password">
10            <cfset isAuthenticated = true>
11        </cfif>
12        
13        <cfreturn isAuthenticated>
14    </cffunction>
15    
16</cfcomponent>

I hope this tutorial help you to understand how easy it is to get started using ajaxCFC and just how cool it can be. This tutorial is not the greatest example just because there are many security concerns, but it is a great example how easy ajaxCFC is to setup. You can click on the link below for a fully functional example. Enter admin as the username and password as the password for authentication to pass.

Login Example
 
 

More Entries