jQuery Tools
Wednesday June 3, 2009 9:44 PM
Word Count: 96
jQuery Select Example
Tuesday July 1, 2008 12:00 AM
Word Count: 1152
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
Monday June 30, 2008 9:21 AM
Word Count: 272
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
Wednesday December 12, 2007 3:19 PM
Word Count: 278
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.
<style>
.hideSuggestClass{
border: 2px solid #999999;
background-color: white;
height: 75px;
overflow:auto;
display:none;
width: 250px;
margin: 0px;
cursor: pointer;
z-index: 1011;
}
</style>
.hideSuggestClass{
border: 2px solid #999999;
background-color: white;
height: 75px;
overflow:auto;
display:none;
width: 250px;
margin: 0px;
cursor: pointer;
z-index: 1011;
}
</style>
ajaxCFC Login Form
Monday December 4, 2006 5:54 PM
Word Count: 1472
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<html>
<head>
<title>Ajax CFC Login Example</title>
<!-- ajaxCFC -->
<script type="text/javascript">_ajaxConfig = {'_cfscriptLocation':'Security.cfc', '_jsscriptFolder':'js/'};</script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function submitForm() {
authenticateUser();
return false;
}
function authenticateUser() {
var username = $("username").value;
var password = $("password").value;
DWRUtil.useLoadingMessage();
DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'authenticate', username,password, authenticateResults);
}
function authenticateResults(r) {
// evaluate server side JS if( eval(r) == true ) {
$('results').innerHTML = "user ok";
}else {
$('results').innerHTML = "bad username / password try again";
document.getElementById("username").style.border = "1px solid red;";
document.getElementById("password").style.border = "1px solid red;";
}
}
</script>
</head>
<body>
<form name="frmLogin" method="post" onSubmit="return submitForm()">
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
</p>
<p>
<input type="submit" name="submit" value="Login">
</p>
</form>
<div id="results"></div>
</body>
</html>
<head>
<title>Ajax CFC Login Example</title>
<!-- ajaxCFC -->
<script type="text/javascript">_ajaxConfig = {'_cfscriptLocation':'Security.cfc', '_jsscriptFolder':'js/'};</script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function submitForm() {
authenticateUser();
return false;
}
function authenticateUser() {
var username = $("username").value;
var password = $("password").value;
DWRUtil.useLoadingMessage();
DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'authenticate', username,password, authenticateResults);
}
function authenticateResults(r) {
// evaluate server side JS if( eval(r) == true ) {
$('results').innerHTML = "user ok";
}else {
$('results').innerHTML = "bad username / password try again";
document.getElementById("username").style.border = "1px solid red;";
document.getElementById("password").style.border = "1px solid red;";
}
}
</script>
</head>
<body>
<form name="frmLogin" method="post" onSubmit="return submitForm()">
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
</p>
<p>
<input type="submit" name="submit" value="Login">
</p>
</form>
<div id="results"></div>
</body>
</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.
<!-- ajaxCFC -->
<script type="text/javascript">_ajaxConfig = {'_cfscriptLocation':'Security.cfc', '_jsscriptFolder':'js/'};</script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">_ajaxConfig = {'_cfscriptLocation':'Security.cfc', '_jsscriptFolder':'js/'};</script>
<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.
<script type="text/javascript">
function submitForm() {
authenticateUser();
return false;
}
function authenticateUser() {
var username = $("username").value;
var password = $("password").value;
DWRUtil.useLoadingMessage();
DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'authenticate', username,password, authenticateResults);
}
function authenticateResults(r) {
// evaluate server side JS if( eval(r) == true ) {
$('results').innerHTML = "user ok";
}else {
$('results').innerHTML = "bad username / password try again";
document.getElementById("username").style.border = "1px solid red;";
document.getElementById("password").style.border = "1px solid red;";
}
}
</script>
function submitForm() {
authenticateUser();
return false;
}
function authenticateUser() {
var username = $("username").value;
var password = $("password").value;
DWRUtil.useLoadingMessage();
DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'authenticate', username,password, authenticateResults);
}
function authenticateResults(r) {
// evaluate server side JS if( eval(r) == true ) {
$('results').innerHTML = "user ok";
}else {
$('results').innerHTML = "bad username / password try again";
document.getElementById("username").style.border = "1px solid red;";
document.getElementById("password").style.border = "1px solid red;";
}
}
</script>
Finally we setup our form that calls the method submitForm() on submit. And we declare a region that will hold our results.
<form name="frmLogin" method="post" onSubmit="return submitForm()">
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
</p>
<p>
<input type="submit" name="submit" value="Login">
</p>
</form>
<div id="results"></div>
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
</p>
<p>
<input type="submit" name="submit" value="Login">
</p>
</form>
<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.
<cfcomponent name="Security" extends="ajax" hint="I handle security in our application.">
<cffunction name="authenticate" access="public" returntype="boolean" hint="I will authenticate a user">
<cfargument name="username" type="string" required="true" />
<cfargument name="password" type="string" required="true" />
<cfset var isAuthenticated = false>
<!--- you would replace this with db functionality --->
<cfif arguments.username EQ "admin" AND arguments.password EQ "password">
<cfset isAuthenticated = true>
</cfif>
<cfreturn isAuthenticated>
</cffunction>
</cfcomponent>
<cffunction name="authenticate" access="public" returntype="boolean" hint="I will authenticate a user">
<cfargument name="username" type="string" required="true" />
<cfargument name="password" type="string" required="true" />
<cfset var isAuthenticated = false>
<!--- you would replace this with db functionality --->
<cfif arguments.username EQ "admin" AND arguments.password EQ "password">
<cfset isAuthenticated = true>
</cfif>
<cfreturn isAuthenticated>
</cffunction>
</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 ExampleYAHOO User Inteface & YAHOO Ext
Wednesday November 8, 2006 11:53 PM
Word Count: 453
I have been testing the Yahoo User Interface library lately and I must admit I am impressed. Also known as YUI this library allows you to take full advantage of Dom Scripting, DHTML, and AJAX. In addition the library also includes many css resources. This library was extremely useful and easy to use for me. I am a novice when it comes to JavaScript so I needed something I could pick up quick.
After learning the ways of YUI I came across Jack Slocum's blog and found a brilliant add on to the Yahoo UI. Here is a blurb from Jacks blog explaining exactly what the YAHOO.ext is.
When I first started looking at the Yahoo! UI library, one of the things I noticed was a lack of real world examples. Sure, the examples make little boxes fly and fade, make them drag and drop and other cool effects but how do you take that and put it into your website or application? This blog is going to be dedicated to demonstrating how to do that. While writing this blog a small library of reusable components based on YUI has been started. The library was namespaced YAHOO.ext (short for Yahoo! UI extensions), and already has a few very useful classes that make day to day development with YUI much easier. All of the classes are well-documented and there are some examples of using them found in the posts on this blog. The code is of course free and has the same unrestrictive (BSD) license as Yahoo! UI.
Jack also happens to live right near me in Cleveland so hopefully I can drag him out for a beer sometime. Anyways the point of all my rambling is simple. I am here to point the beginners (like me) in the right direction. Plus I have been doing some cool integrations with the data grid display and ColdFusion. If yo like what Jack has done go ahead and drop him a line and If you need any help send me an email and I will give it my best. Below are the links to the Yahoo User Interface library and Jack Slocum's Yahoo ext library. I will defiantly post some examples in the near future so be on the look out.
WalkJogRun
Tuesday August 8, 2006 9:39 AM
Word Count: 318
I have come across a great site that I would like to tell the world about, even if the world already knows about it. The site I am talking about is http://www.walkjogrun.net/. This project was created and updated by Adam Howitt who is a great contributor to the ColdFusion community. WalkJogRun allows runners to interact with the Google maps API to create routes. The easy to use interface and smooth integration of Google maps makes this application a pleasant one to work with, not to mention the idea is just great. This is great because you now have a good idea of how long your favorite route is. If you live in or near Cleveland do a quick search for Edgewater, I love that place and created a couple of routes. Another reason I like it is for the find feature, let's say your traveling to another city and you would like to find some nice routes, just punch in a zip code and use the satellite view to find what type of route your looking for.
If you know me then you know I have taking up a great love for running so this truly is my cup of tea. I am hopefull to run in a marathon next year but for now the 5 and 10k’s are doing me just fine. Anyways, if anyone is using the application I would like to hear your thoughts on it. Below are some links to Adam’s personal blog, the walkjogrun main site, and the walkjogrun blog.
http://www.webdevref.com/blog/
http://www.walkjogrun.net/
http://www.walkjogrun.net/blog/
Lightbox v2.0
Wednesday March 29, 2006 10:47 AM
Word Count: 34
The new version of lightbox has been released. There are some cool new features to check out so make sure you go download the new version.
