Archive for December, 2009

Changing the IE diaper!

Thursday, December 31st, 2009

I noticed a small bug with Internet Explorer 7 (and probably the rest of the versions) using the jQuery change() method.  Don’t ask me why, but it seems that IE remembers a change, but doesn’t register it until one click after the change actually occurred.  I’ve set up a little demo of what I’m talking about here.  Of course if you look at the demo in Firefox, Safari, Opera, or Chrome both examples will work perfectly fine.  But if you look at it in IE 7 you’ll see that the .click example works fine, but the .change example requires you to click an extra time to get the change to actually take place.

I don’t mean to be insensitive, but this is a change event.  I might understand this not working in IE 6.  This is IE 7. It was released in October 2006 according to Wikipedia.  That’s just a couple years ago.  This is a change event! This is the last day of 2009!  It probably doesn’t even work in IE 8!

Granted HTML standards do state: “The onchange event occurs when a control loses the input focus and its value has been modified since gaining focus. This attribute applies to the following elements: INPUT, SELECT, and TEXTAREA.” So first of all, according to the standards, we shouldn’t even be attaching the change event to a radio input, and second of all the change event actually occurs on blur.  So it seems that IE is maybe kind of following the rules here.  I just think it’s unfortunate that the only rule IE is following is the one rule that just doesn’t make a lot of sense to begin with.

Seriously, with just a touch of common sense Firefox, Safari, Opera, and Chrome uses the change method appropriately.

I wanted to get this post off before the end of the year so I can start the new out fresh, happy, and IE free (for a while).  And one last thing. If you happened to look at the demo and it opened in Internet Explorer by default, please – for the love of God download Firefox, Opera, or Chrome.  All are free and cross platform.  Even safari is not half bad on a PC.

HAPPY NEW YEAR!!!

jQuery to add textfield labels

Friday, December 25th, 2009

In the world of web aesthetics a nice principle to follow is the less clutter the better. Traditional forms have contained a label and then a text input usually. More and more we’re beginning to see the labels being placed inside the text field until the user selects them, at which point they can type whatever. The reason we may be seeing it more often is because jQuery, as usual makes what is otherwise a fairly time-consuming task and makes it simple.  To get an idea of what I’m talking about you can see a demo here.  I checked the demo.  I’m pretty sure that the tooltips work fine in Firefox, but are incorrectly positioned in Safari, and I don’t even want to know for IE.  I’m sure this is no fault of the plugin, but that there is just some conflict in the plugin CSS and my demo template CSS.  I just really didn’t feel like figuring it out.  On top of all that, if you don’t have Firefox to view the demo with shame on you

Let’s think about what it is we are wanting to accomplish.  Generally we want a form with no labels.  Instead our labels are a prefilled value inside the form field.  However, when a field with one of these prefilled labels is clicked or tabbed to we want to empty the field and ready it for typing.  Next if new data is entered the data should stay in the field, and if no data is entered the field should return to the prefilled label.  Lastly, if the user focuses a field that they have already entered data into we want to make sure that we don’t empty the field, but instead just select the entered data and ready it for editing.  One last thing.  Because our field label disappears when the field is selected I felt that it made sense to make sure that the user doesn’t forget what they are typing into the field.  To accomplish this I used the jQuery Tools tooltip plugin.  I won’t explain this too much, but for this demo I pretty much just copied and pasted their demo code from their site.  Nonetheless, this is a really powerful and flexible plugin, and on top of everything really looks great.

On to the code.  First we’ll take a look at the HTML.

The HTML

<!-- div that will show our tooltip -->
<div id="mytooltip">&nbsp;</div>

<!-- form with labels in the field label in the 'id' and tooltip in the 'title' -->
<form name="myForm" id="myFormId" method="post" action="#">
    <input type="text" name="firstname" id="Your First Name" value="" title="Enter Your First Name" /><br /><br />
    <input type="text" name="lastname" id="Your Last Name" value="" title="Enter Your Last Name" /><br /><br />
    <input type="text" name="mycolor" id="Your Favorite Color" value="" title="Enter Your Favorite Color" /><br /><br />
    <input type="text" name="mycat" id="Your Favorite Cat" value="" title="Enter Your Favorite Cat" /><br /><br />
    <input type="submit" name="mySubmit" />
</form>

(more…)

Submitting a form with cfajaxproxy

Thursday, December 17th, 2009

I was looking at Adobe’s Coldfusion docs concerning cfajaxproxy earlier today when I noticed a method I had never used nor seen that intrigued me at first sight.  It’s the setForm() method.  This method is written in your javascript call to the function via a cfajaxproxy tag that loads a cfc.  All that is required to pass all values in a form to a cfc is to write [cfc_instance_here].setForm([form_id_here]).  It will get the form, get all of its elements with values, and pass it to the cfc as arguments at which point you can do as you please.  You don’t even have to create the arguments in your cfc method.

Let’s take a look at some sample code.

(more…)

Using Safari 4 to develop.

Thursday, December 17th, 2009

Like most developers I have always used firebug in Mozilla Firefox to debug web applications.  Why?  Because it’s an awesome tool.  However, this morning I thought for some reason that I should take a look at the development debugging tools that was included in Safari 4.  I’ve noticed that Safari 4 is recognizably faster than Firefox, and I’ve always found it difficult choosing a browser for testing.  The reason was that if I needed the console I felt I had to use Firefox, but if I just needed to check some functionality I preferred Safari for its speed.

So what was my revelation?  Simply put, Safari has a great built in developer tool.  It’s located under the ‘Develop’ menu at the top.  This menu is not enabled by default, so if you don’t see it go to Preferences > Advanced and check the bottom box labeled ‘Show Develop Menu in menu bar’.  Once you have your menu you’ll see your development tools.  The main one to focus on is the ‘Show Web Inspector’ item.  This is where the bulk of your development tools are located.  I’m not going to run through the features.  There are plenty of blogs out there that do this.

One thing though that I would like to mention, just because I had a little trouble finding it, is the console.  Unlike Firebug, it’s not located on the top menu bar.  Instead look for a small button in the lower left corner of the tool.  There are three buttons here, one of them opens the console.  It’s the one with a greater than sign and three horizontal lines.  Clicking this will open your console.  So if you run a cfc via cfajaxproxy your call to the method will show up here.  If you click it you will be taken to the resources panel where you can see your response and parameters and so forth.

Is it a better tool? Don’t know.  I just opened it this morning.  My guess is that like most applications there’s a time and place for both Firebug and the Safari Developer tool.

Last thing I’ll mention is that I like the design.  I stare at text files all day.  I think that getting to see all those nice colors and transparencies and rounded corners will help brighten my day a little.  Are they necessary for debugging?  Probably not.  But, hey, I’m only human.

Disabling a form with jQuery

Tuesday, December 15th, 2009

Sometimes we need to disable an entire form based upon user input. The example I thought of was in the case of asking how a person wants to pay for something. So for example, if a user wishes to pay for their product with a check we don’t need a form, but if they wish to pay with a credit card then we need to give the user a form to fill in their credit card information. You can see an example of this here.

I would normally just not show the form unless the user chose to pay with credit card.  In my opinion this is less intimidating to the user and keeps them scrolling as little as possible.  Nonetheless, here we’re just going to disable it if the user is paying with check, and enable it if the user is paying with credit card.  So let’s take a look at the HTML.

(more…)

Using the UPS Shipping & Rating API with Coldfusion

Friday, December 11th, 2009

Just a heads up that this is a fairly long article and makes several assumptions about your application. Using the UPS API is fairly easy, but there are several variables that are required for the api to work successfully.

I’ll be making several assumptions here.  First and foremost that you are looking to implement the UPS shipping and rating API for ecommerce.  Second that you have a database set up with a table named ‘shipping_tbl’ that includes column names ‘package_weight’, ‘package_width’, ‘package_length’, and ‘package_height’.  And that these values are in some way related to the products whose dimensions and weight they represent.  As well as other assumptions like how we store our cart data that will be further explained later.

Let’s start out with our HTML.  This is the HTML that represents your cart, which is where I assume you are showing the shipping rate for whatever packages are being sold.  We’ll pretend there’s a cart here.  I’m, however, only going to show the code for the output of the shipping rate.  So it is as follows.

The HTML (Output of shipping data)

<!---set our shipping rate--->
<cfset VARIABLES.shippingrate = "">

<span class=”shippingrate”>
	<!---output our shipping rate to the page--->
	<cfoutput>#dollarformat(VARIABLES.shippingrate)#</cfoutput>
</span>

(more…)

Binding & Unbinding jQuery Event Listeners

Friday, December 4th, 2009

I had a little issue with jQuery yesterday evening.  The problem I was running into was running an event on an element created by jQuery.  Let me explain.  If I create a button in my HTML, and in jQuery write a $(“.button”).click(function(){//append a ’1′ to some element}); method, each time I click the button I will get a single 1 on the screen that has been added to the existing HTML.  For example, if I click my button five times, I will end up with ’11111′ being output the the page.  Wonderful.  This is how it’s supposed to work.  Click here to see a demo of this.  My HTML and jQuery look like the following for this example.

The HTML

<body>

<!— CREATE A BUTTON TO CLICK TO INITIALIZE OUR EVENT —>
<span class=”runscript”>RUN</span><br /><br /><br />

<!— SET AN EMPTY DIV TO BE POPULATED WITH CONTENT VIA JQUERY —>
<div class=”container”></div>

</body>

The jQuery

//once the document loads run our script
$(document).ready(function()
{

//bind an onclick listener to our RUN button
$(“.runscript”).click(function()
{

//run the addData() method
addData();

});

});

addData = function()
{

//append the word ‘output’ to our container HTML
$(“.container”).append(“Output <br />”);

}

(more…)

Dynamically displaying struct data with a loop

Wednesday, December 2nd, 2009

This post is a follow-up to a previous post. If you don’t think you need to read it or just don’t feel like it, I’ll just dump the code and a snapshot of how our struct that we’ll be looking at is structured.  However, if you are interested, you can check it out at Creating a Struct by Looping. Anyway, here’s the code and snapshot from the other post.

<!— SET THE NUMBER OF LOOPS TO RUN —>
<cfset VARIABLES.loops = 5>

<!— CREATE A STRUCT —>
<cfset VARIABLES.data = structnew()>

<!— SET A DATA INTO THE STRUCT.  THIS REPRESENTS HOW TO HARDCODE DATA INTO THE STRUCT —>
<cfset VARIABLES.data.working = true>

<!— RUN OUR LOOP —>
<cfloop from=”1″ to=”#VARIABLES.loops#” index=”VARIABLES.i”>

<!— SET DATA DYNAMICALLY INTO THE STRUCT —>
<cfset “VARIABLES.data.loops.loop#VARIABLES.i#” = “loop_data_” & VARIABLES.i>

</cfloop>

<!— DUMP OUR STRUCT —>
<cfdump var=”#VARIABLES.data#”><br /><br /><br />

What our struct looks like.

What our struct looks like.

So what we’re going to do is loop over the ‘loops’ portion of our struct and output each of the 5 loop labels data.  So we are wanting to show the data from our struct like:

OUTPUT OUR LOOPED DATA IN OUR STRUCT

DATA 1: loop_data_1
DATA 2: loop_data_2
DATA 3: loop_data_3
DATA 4: loop_data_4
DATA 5: loop_data_5

The key is that we want to loop over the struct holding this data and output it dynamically.  That way if it is 5 loops or 200 loops the data will always output the same and account the for the varying amounts of data.  Let’s look at the code first.

OUTPUT OUR LOOPED DATA IN OUR STRUCT<br /><br />

<!— GET THE LENGTH OF OUR LOOPS STRUCT —>
<cfset VARIABLES.structLength = structcount(VARIABLES.data.loops)>

<!— LOOP THROUGH OUR STRUCT AND OUTPUT THE VALUES —>
<cfloop from=”1″ to=”#VARIABLES.structLength#” index=”VARIABLES.i”>

<!— SET THE NAME OF THE LABEL OF EACH OF SET OF DATA IN THE LOOP —>
<cfset VARIABLES.loopdata = “loop” & VARIABLES.i>

<!— GET THE DATA WE SET FOR THAT LOOP —>
<cfoutput>
<strong>DATA #VARIABLES.i#</strong>: #VARIABLES.data.loops[VARIABLES.loopdata]#<br />
</cfoutput>

</cfloop>

First we need to get how many sets of data is in our struct.  Remember that the struct that I’m referring to here is the struct inside of the larger struct.  You can get the amount of data in a struct by using the handy ‘structcount()’ method.  Just pass in the struct you want to get the count of. Afterwards, we can loop from 1 to however many sets of data is stored in our struct.  Simple enough so far.

Once inside the loop we need to grab the first set of data in the struct we are looping over.  This is the data with a label of ‘loop1′.  First we set a var that will update with each loop to create the new label.  So loop 1 will be set to ‘loop1′, second loop ‘loop2′, and so on.  Once we have this set we can get our data by using brackets as opposed to just continuing the dot notation.  For example we could get the value of ‘loop1′ by hardcoding the following: VARIABLES.data.loops.loop1.  But that is just going to output the first set of data 5 times.  In order to pass a dynamic value into our struct path that points to our value, we need to use the brackets.  Using brackets, we can pass in our var that sets its value dynamically with each loop, which will output each of the 5 sets of data in our struct.

Creating a struct by looping

Wednesday, December 2nd, 2009

On a regular basis I find myself needing to create a Coldfusion struct dynamically with a loop.  Although creating a struct in Coldfusion couldn’t be simpler or more intuitive (in my opinion), creating a struct dynamically is a little more problematic.  The problem is that you can’t set the name of your labels in your struct that holds your looped data dynamically.

So for example, let’s say that we want to create a struct that holds five sets of data labeled loop1 that is equal to loop_data_1, loop2 that is equal to loop_data_2, and so on up to loop 5.  When we dump our struct we want it to look like the following.

Dynamically created data in a struct

Dynamically created data in a struct

So let’s look at the code that we need to write to accomplish this.

<!— SET THE NUMBER OF LOOPS TO RUN —>
<cfset VARIABLES.loops = 5>

<!— CREATE A STRUCT —>
<cfset VARIABLES.data = structnew()>

<!— SET A VALUE INTO THE STRUCT.  THIS REPRESENTS HOW TO HARDCODE DATA INTO THE STRUCT —>
<cfset VARIABLES.data.working = true>

<!— RUN OUR LOOP —>
<cfloop from=”1″ to=”#VARIABLES.loops#” index=”VARIABLES.i”>

<!— SET DATA DYNAMICALLY INTO THE STRUCT —>
<cfset “VARIABLES.data.loops.loop#VARIABLES.i#” = “loop_data_” & VARIABLES.i>

</cfloop>

<!— DUMP OUR STRUCT —>
<cfdump var=”#VARIABLES.data#”>

Everything here is fairly straightforward up until we get to setting the data into the struct inside our loop.  What we need to do is set the label of our data to be “loop” and then whatever the current loop index is.  So if we are on our third loop our label will be “loop3″.  The problem is that you can just set a label by writing VARIABLES.data.loops.loop#VARIABLES.i#.  You’ll get yourself a nice little cf error something along the lines of:

Error thrown when creating a dynamically named struct label.

Error thrown when creating a dynamically named struct label.

To get around this all you need to do is wrap your label in quotation marks as is above in the code.  So VARIABLES.data.loops.loop#VARIABLES.i# becomes “VARIABLES.data.loops.loop#VARIABLES.i#”.  And that is it.  Your now able to create and label your struct dynamically.  To see how to output this data dynamically I’ve written another post on Dynamically Displaying Struct Data with a Loop.  Feel free to check it out as well.