17 January 2012
This site will go dark for 24 hours
13 December 2011
Why is there an Amazon Wish list button on my blog?
The long answer is this: If you've found something usefull on my blog, feel free to hit the wish list link.
I don't ask for donations or payment. Alot of what you'll see here are things that I've run into as a developer, that I feel are worth passing along..
Security Hotfix Available for ColdFusion 8 & 9
http://www.adobe.com/support/security/bulletins/apsb11-29.html
21 November 2011
Twister -It's not just a game anymore
Hemant Khandelwal, part of the CF Builder team posted this to the CF Builder blog: Code Name: Twister
If there's a pet bug that you'd like to see fixed, post it here
17 November 2011
Dynamic colspans with jQuery
If you've ever had to create forms that have a user-clonable rows or columns you've probably had to figure out how to change column or row spanning, here's a quick run through of how I did i with jQuery.
The requirement: Click an element and add a column to a table, the table happens to be a form.
First: capture the click event, the form is part of a larger Ajax feature so I'm using the "live" method to keep the reuqest alive
$('#addFlight').live('click', function(event){
});
Inside of this function, we need to get the current value of the "colspan" attribute of the cell in question, using the jQuery .attr() function.
/* get the current colspan value from the row containing the segment info */
var cSpanL = $('td.depFormTitleTop').attr('colspan');
We're adding one column at a time so we can add one to the value and get away with it
/* add 1 to it */
cSpanL = cSpanL + 1
One of the other things that .attr() can do is update existing attributes, so we'll use the variable we created above
/*update the colspan value and we have a dynamic columnspan*/
$('td.depFormTitleTop').attr('colspan', cSpanL);
and voila, a dynamic colspan attribute that updates when we add a column.
To complete the requirement we need to do the actual column add, there's a couple of things to point out:
- I'm using X-Path to find any table row inside of my table(id="departureGridTable") that contains the word "week".
- Secondly I'm using chaining to grab the last cell in a particular row, clone it and append it into the new column
So here we go:
First, we need to find the rows in question, regardless of how many their are and loop over them, jQuery can do for each loops with the each() function.
$('#departureGridTable tr[id~="week"]').each(function(){
});
Then we grab the last existing cell in the row, clone it and append it to the row
$(this).append($(this).children().last().clone());
$(this) refers to the row that were dealing with through each iteration
/* find the last flight number cell, clone it and append it to the flight number row*/
$('#departureGridTable tr[id~="week"]').each(function(){
})
Similarly we can now populate the cells in the column
/* clone the flight status drop down for each row sun - sat*/
$('[data-spack]').each(function(){
var dCell = $('td:last', this).clone();
$(this).append(dCell);
});
If you're wondering what this is: $('[data-spack]'). JQuery allows you to use HTML 5 'data-' elements. I use them all over the place as a data transport mechanism.
The complete code looks like this:
$('#addFlight').live('click', function(event){
/* get the current colspan value from the row containing the segment info */
var cSpanL = $('td.depFormTitleTop').attr('colspan');
/* add 1 to it */
cSpanL = cSpanL + 1
/*update the colspan value and we have a dynamic columnspan*/
$('td.depFormTitleTop').attr('colspan', cSpanL);
/* find the last flight number cell, clone it and append it to the flight number row*/
$('#departureGridTable tr[id~="week"]').each(function(){
$(this).append($(this).children().last().clone());
})
/* clone the flight status drop down for each row sun - sat*/
$('[data-spack]').each(function(){
var dCell = $('td:last', this).clone();
$(this).append(dCell);
});
});