ColdFusioning: Pronunciation \kold-fy�-zhn-ing\ Noun: The action of one that writes ColdFusion.

jQuery: $("#elementID") != document.getElementById("elementId")

Related Categories: jQuery, JavaScript

Just a quick reminder that in jQuery:

$("#elementID") != document.getElementById("elementId")

They are not the same thing.

If you use $("#elementID") you will return an array. If you want the real DOM element you need to use: $("#elementID").get(0)


Comment Comments (3) | Posted At : Feb 27, 2010 11:58 PM | Views: 1094
Follow me on Twitter Follow me on Twitter | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs

ColdFusion and jQuery - Using AJAX to Call a CFC and Return JSON

Related Categories: ColdFusion, JavaScript

I recently had a friend ask me about using jQuery to call a ColdFusion CFC via AJAX and return a value. It is actually quite easy and fun to do. It requires two files to be created. The two filenames I'm using for this example are: index.cfm and myCFC.cfc but you could easily use your own filenames.

The first file we're going to start out with is index.cfm:


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
chkUsernameUnique = function(theUsername){
    $.getJSON("/assets/cfc/myCFC.cfc", {
        method: 'chkUsername',
        Username: theUsername,
        returnformat: 'json'
    }, function(isUsernameUnique){
    
        if (isUsernameUnique == true) {
            $("#theErrorDivID").html('Username is unique');
        }
        else {
            $("#theErrorDivID").html('Please select a new username');
        }
    });
};
</script>

<div id="theErrorDivID"></div>
<input type="text" name="username" id="username" onchange="chkUsernameUnique(this.value);" />

If you read through the code, it is self explanatory. We first include the jQuery library from the Google CDN (you could always point this at your web server if you are going to host the file instead). In the next set of lines, we create a function, setup our AJAX, specify the CFC (you can change the cfc path to match your web server), method and some variables. We then specify the return function to run once the data is returned from our cfc. Based on the data returned, we display a message to the user. The final lines outside the script tag are the DIV for displaying the message and the input.

The next set of code is the cfc we call (myCFC.cfc):


<cfcomponent>
<cffunction name="chkUsername" access="remote" returnformat="json" output="false">
        <cfargument name="Username" required="true">
            
        <cfquery name="chkUsername" datasource="YOURDATASOURCEHERE">
        SELECT ID FROM tb_user WHERE user_login = <cfqueryparam value="#arguments.Username#" cfsqltype="cf_sql_varchar" />
        </cfquery>
        
        <cfreturn yesNoFormat(chkUsername.recordCount) / />
    </cffunction>
</cfcomponent>

This set of code queries the database to check if the username is unique and returns true or false based on that result. This example could quickly be expanded to check for other variables or perform additional functions. If you are new to jQuery, I highly recommend you check it out and dive right into it. If you are looking for a book to learn jQuery, I recommend: Learning jQuery 1.3. It is a great book and walks you through step-by-step to teach you the library.


Comment Comments (19) | Posted At : Oct 29, 2009 1:41 AM | Views: 2321
Follow me on Twitter Follow me on Twitter | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs

jQuery Document Ready Shortcut

Related Categories: JavaScript

Here's a quick tip. Instead of writing:


$(document).ready(function() {
// Code and functions here
});

We can instead write:

$().ready(function() {
// Code and functions here
});

or even:

$(function() {
// Code and functions here
});

Albeit, it isn't a huge code reduction but it is a nice shortcut.


Comment Comments (4) | Posted At : Oct 26, 2009 3:12 AM | Views: 965
Follow me on Twitter Follow me on Twitter | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs

CFJS (ColdFusionJavaScript for jQuery) Gives Us Functions We Already Known

Related Categories: ColdFusion, JavaScript

If you aren't already using CFJS, I would recommend you download this library right away and add it to your repertoire.

The library gives us functions such as DateFormat and IsNumeric that we become so reliant on everyday in ColdFusion. Now you can utilize them in JavaScript too! The library requires jQuery and un-minified is only 23K.


Comment Comments (0) | Posted At : Jul 1, 2009 8:10 AM | Views: 432
Follow me on Twitter Follow me on Twitter | del.ico.us del.icio.us | Digg It! Digg It! | Linking Blogs Linking Blogs