RSS feed for InstantSpot site Dave Shuck's InstantSpot

Related checkbox validation with JQuery

Wed, 16 Jul 2008 14:41:00 GMT

I was given a problem yesterday where I needed to do the following client-side validation. If a user selects a checkbox that they wish to enable credit card transactions, I need to display a panel of specific credit card companies and they need to select at least one before submitting.

If you think about writing the JS to do this without a library it is a somewhat lengthy task. In essence, you would need to do some type of an onsubmit function on your form, check the value of the key checkbox. If it was checked, check the value of each credit card checkbox to see if the user had selected one of the children. After writing this in JQuery, I thought it might be worth demonstrating what an easy task this is.

Let's start with the specific part of my form that has my checkboxes:

<label for="RequireCCInfo">Require Credit Card Information?</label>
<input name="RequireCCInfo" id="RequireCCInfo" value="1" type="checkbox">
<div id="CreditCardCompanyPanel">
	<div>
		<input id="ccAmex" class="ccCheckBox" value="1" type="checkbox">
		<label for="ccAmex">American Express</label>
	</div>
	<div>
		<input id="ccVisa" class="ccCheckBox" value="1" type="checkbox">
		<label for="ccVisa">Visa</label>
	</div>
	<div>
		<input id="ccDiscover" class="ccCheckBox" value="1" type="checkbox">
		<label for="ccDiscover">Discover</label>
	</div>
	<div>
		<input id="ccMc" class="ccCheckBox" value="1" type="checkbox">
		<label for="ccMc">Master Card</label>						
	</div>
</div>

There is nothing too notable in all of that other than the fact that you should notice that I have added a class "ccCheckBox" to all of my dependent checkboxes. I will explain more on that in a bit, but I wanted to point out that it is there. You will also notice that I am not doing anything in the way of hiding the "CreditCardCompanyPanel" div. We need to determine at request time whether that will be hidden or not based on whether the "RequireCCInfo" checkbox is checked.

Now, here is the fun part... I am including the JS that I use for this task below:

<script language="javascript">	
(document).ready(function(){
	$("#RequireCCInfo").change(function(){
		toggleCreditCardCompanyPanel();
	}); 	
	function toggleCreditCardCompanyPanel()	{
		if ($("#RequireCCInfo").attr("checked") == true) 	$("#CreditCardCompanyPanel").show();	
		else $("#CreditCardCompanyPanel").hide();
	}
	$("#SaveButton").click(function(){
		var pass = false;
		if ($("#RequireCCInfo").attr("checked") == true){
			$(".ccCheckBox").each(function() {
               			if ($(this).attr("checked") == true) pass = true;
            		});
		}
		else pass = true;
		if (pass) $("#frmMyForm").submit();
		else alert('You must select at least on credit card company if "Require Credit Card Information" is checked.');
	}); 
	toggleCreditCardCompanyPanel();
});
</script>

First, by using the $(document).ready() function we are telling JQuery to run this JS once the DOM has been completely loaded. Let's look at each section within that ready() block...

The first thing you will see is the $("#RequireCCInfo").change() method. JQuery gives us the concept of binding a listener to an element. For our example, this listener says that anytime that an element with an ID of "RequireCCInfo" is changed, that we will run the code in its function(). You will see that anytime our "RequireCCInfo" checkbox is changed we are going to run a function called toggleCreditCardCompanyPanel(). As you can see we have that method defined immediately after our "RequireCCInfo" checkbox.

In our toggleCreditCardCompanyPanel() method, we are making the decision as to whether or not our "CreditCardCompanyPanel" will be displayed based on whether our user has decided to check the box labeled "Require Credit Card Information?". By using the JQuery selectors we are in essence saying: If a checkbox with an ID of "RequireCCInfo" is checked, display an element with the ID "CreditCardCompanyPanel". Otherwise we will hide this element.

Next comes our validation on form submit... and pretty cool stuff!

Basically I have added a listener which is bound to our submit button with the ID of "SaveButton" which will submit our form "frmMyForm". Anytime that this button is clicked, we will run the code in the function() block. We start this function by setting a value pass=false. We will use this variable to determine whether our form has passed validation. Next we get just a small taste of the magic of JQuery selectors. First, as we did in the toggleCreditCardCompanyPanel() function, we are determining if the element with the ID of "RequireCCInfo" is checked. If so, by using the each() function, we are going to loop through all elements on the page with the class "ccCheckBox" (remember that from above?). In each iteration of the loop we are going to determine if the element has been checked. If so, we are going to set pass=true since we know that our validation has passed.

Lastly, now that we have determined that our form is either going to pass/fail, we take the appropriate action. If pass==fail, we are simply going to alert a message telling the user that if they are going to enable credit cards that they have to choose at least one credit card company. Otherwise, we are going to call the submit() method on our form.

I almost took the time to write out the equivalent of this in POJS (plain old JavaScript) to show how much easier life is with JQuery, but I realized I didn't have the time, patience, or will. JQuery has spoiled me!

ColdFusion in odd places - using the directory watcher on my desktop

Mon, 21 Apr 2008 05:02:00 GMT

Since recently installling yet another distro on my laptop, I was unable to get the FTP functionality of my webcam software (Camorama) to work properly. The program will save snapshots locally, but bombs on transfer. Rather than troubleshoot it to death, I decided to whip out a quick and dirty ColdFusion directory watcher event gateway and have it watch for updated images, and then push them to my webserver via FTP.

For anyone interested in this non-earth shattering bit of code, here it is. First I created a config file:

WebcamWatcher.cfg

# The directory we want to watch. 
directory=/home/dshuck/Webcam_Pictures

# Do we want to recurse the directories?
recurse=no

# miliseconds between checks
interval=6000

# The comma separated list of extensions to match.
extensions=*

# component method for change events
changeFunction=onChange

# component method for add events
addFunction=onAdd

# no delete events for now
deleteFunction=

Now to create the methods in our WebcamWatcher.cfc. In short, either a changed file or an added file will trigger the putImage function which first creates the FTP connection, changes directories to my webcam directory, then pushes the file to the server. Here is the code:

WebcamWatcher.cfc

<cfcomponent output="false">
	<cffunction name="onAdd" output="false">
		<cfargument name="CFEvent" type="struct" required="yes">
		<cfset var Data=CFEvent.data />
	  	<cflog file="DirectoryWatcher" application="No" 
	     	text=" ACTION: #data.type#;  FILE: #data.filename#;  calling putImage()" />
		<cfset putImage() />
	</cffunction>
	

	<cffunction name="onChange" output="false">
	  	<cfargument name="CFEvent" type="struct" required="yes">
	  	<cfset var data=CFEvent.data>
	  	<cflog file="DirectoryWatcher" application="No" 
	      text=" ACTION: #data.type#;  FILE: #data.filename#; TIME: #timeFormat(data.lastmodified)# calling putImage();" />
		<cfset putImage() />
	</cffunction>

	<cffunction name="putImage" access="private" output="false" returntype="void">
		<cfftp action = "open"
	   		username = "joeuser"
	  		connection = "MyConnection"
	   		password = "mycoolpassword"
	   		server = "www.mywebserver.com"
	   		stopOnError = "true" />
		
		<cfif cfftp.Succeeded>
			<cfftp 
				connection="MyConnection" 
				action="changedir" 
				directory="htdocs/mywebcamdirectory" />
			
			<cfif cfftp.Succeeded>
				<cfftp 
					connection = "MyConnection"
					action = "putFile" 
					name = "uploadFile" 
					transferMode = "binary" 
					localFile = "/home/dshuck/Webcam_Pictures/webcam.jpeg" 
					remoteFile = "DaveWebcam.jpg" />
			</cfif>
	
		</cfif>
		<cflog file="DirectoryWatcher" application="false" text="file push to webserver...#cfftp.Succeeded#" />
	</cffunction>
</cfcomponent>

So, now the internet can yet again be graced with my "almost live" presence. I can almost hear the selective sigh of relief.

I have to consider this to be a somewhat odd place for ColdFusion and it got me thinking... What kinds of odd places do you or have you used ColdFusion?

Adding spell checking to Evolution mail client

Tue, 01 Apr 2008 13:41:00 GMT

I am not sure why I have never pusued this until today, but I for some reason have never spent the time to figure out why I didn't have spell checking in my Evolution mail client. I knew that Evolution used the packages aspell and gnome-spell, which I already had installed, so why wasn't it working?

When I went into my composer settings in the Evolution preferences, I saw a big empty box that was the list of dictionaries that Evolution was using. You would think there would be some method of adding them from there, but unfortunately it isn't quite that obvious. To add the English dictionary I had to install the package aspell-en. Once I added this I reopened Evolution and Bamn!

There it is. For the copy/paste inclined, try the following:

#sudo apt-get install aspell gnome-spell aspell-en

Publishing blog entries with ScribeFire using XMLRPC API

Tue, 29 Jan 2008 15:37:00 GMT

On the most recent release of InstantSpot, we added in XMLRPC support so that blog administration can happen anywhere, using any client that supports XMLRPC. We are thinking it might be fun to create an AIR app for this purpose down the line (or better yet... someone else! hint...hint...), but until that time, there are a variety of clients that can be used, since we followed the MetaWeblog API standards.

I am actually trying this out for the first time on our live instance with this blog entry by using a *sweet* Firefox plugin called ScribeFire. Considering that we haven't really published this ability, I thought it might make sense to do a walk through of setting it up and using it.

First, let's walk through the ScribeFire Account Wizard. One you have installed the ScribeFire plugin (available here), click on the little text pad icon in the bottom corner of your browser window and start the Account Wizard. You should see a window that looks like the one below. Choose "Manually Configure" and continue.

You will then be presented with a number of options of various inferior blogging services. Choose "Custom Blog" and continue.

On the screen you see below, choose "MetaWeblog API" and enter this URL into the Server API URL input box: http://www.instantspot.com/gospot/remote.metaweblogAPI
Leave "Advanced Settings" unchecked and continue.

On the following screen you will be prompted for your username and password. Since the new release of InstantSpot, your email address is now used as your username.

That's it! If you did this correctly you should see your blog listed in the following screen like this:

Now, you should see a list of your categories (labeled in the interface as "tags"), blogposts, and in the future, saved "Notes" which are drafts stored locally by ScribeFire to the right of the ScribeFire window like this:

From here, the interface is pretty simple. One thing that is noteworthy is that we even support the ability for you to upload and insert images through ScribeFire. When you click on the image icon on the editor, you will see a window that looks like this:

Choose "Image Upload", then after browsing to your file, select "Upload Via API".

When it completes you will see the following window. Choose "Insert Image" and you will see your image inserted into your text.

Now you can start posting away to your heart's content!

Gmail Tip: Muting and Unmuting conversation threads

Fri, 17 Nov 2006 23:41:01 GMT

I accidentally learned a new Gmail trick today. I was viewing an email and accidentally hit the 'm' key on my keyboard. This apparently mutes the conversation making that thread disappear from your inbox. This is a cool trick on its own, but what happens if you want to unmute it? In your Gmail search you can enter: is:muted, and you will see a list of all muted threads. To unmute, click into one and choose "Move to Inbox" in the select box at the top.

We have landed

Sun, 10 Jul 2005 05:00:00 GMT

Well, I have installed my blogging software. Time to play. :)