Classes (1)  /  ColdFusion (14)  /  ColdFusion Jobs (2)  /  General (6)  /  JQuery (7)  /  Quick and Dirty (3)  / 
Search Blog

 

Archives
RSS

 

 

 

Adobe Community Expert in ColdFusion

 

Adobe Ceritfied Instructor

 

CTT+ Certified Technical Trainer

 

Hosted By:

Alurium Hosting

Powered by BlogCFM v1.14

17 November 2011

Dynamic colspans with jQuery

making sure that dynamic columns don't break a table structure

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);
});


});




Share |
Posted by admin at 10:10 AM| Link  |  0 comments |

 

30 July 2010

My first "official" JQuery Plugin

jquery.alaxPost.js
I have written my first JQuery plugin, it basically ties up the code that I've blogged about before into a plugin wrapper. You can download it here: http://www.sstwebworks.com/apps/jquery.ajaxPost.js feel free to use it under the GNU Lesser General Public License.

 

I've also created a ColdFusion custom tag with this code and it's here CF_AjaxPost at RIAForge
Share |
Posted by admin at 11:56 AM| Link  |  0 comments |

 

21 March 2010

cfajaxproxy and JQuery

The agnostic nature of cfajaxproxy
Untitled Document

The agnostic nature of cfajaxproxy.

I always thought that cfajaxproxy was inexorably tied to the Ajax functions built into ColdFusion.. I recently found out that
I was wrong.

CFAjaxproxy is used to create a javascript proxy of a ColdFusion Component (cfc) for use in the web client. This means any javascript,
not just ColdFusion based AJAX components.

Lets take the AJAX post code from my last post and see how it would work with cfajaxproxy.

This is the original code: It's calling action pages to execute ColdFusion components.


$("#getTOByWeek").live("click", function(){
   $.ajax({
         type:"post",
         url:"webapps/hr/admin/actions/act_adminHR_Handler.cfm",
        data:$("#toByWeek").serialize(),
        cache:"false",
        success: function(){
            $("#content-box").load("webapps/hr/admin/display/dsp_TOList.cfm");
        },
       error: function(){
           alert("data");
       }
   });
   return false;
});

If I use cfajaxproxy it would look something like this, to achieve the same functionality

<cfajaxproxy cfc = "CFC name" jsclassname = "JavaScript proxy class name">

The CFC property instantiates the entire component, using dot notation (com.foo.bar.component), jsclassname is the name that is given to the function
inside javascript:

<cfajaxproxy cfc="hr.cfc.hr_dao" jsclassname="hr_dao">

This gives me a javascript representation of my hr_dao.cfc that can be used in any javascript case.
//instantiate the ColdFusion Function
<cfajaxproxy cfc="hr.cfc.hr_dao" jsclassname="hr_dao">

//capture the click event
<script>
$("#getTOByWeek").click(function(objEvent){
         //call the ColdFusion method directly

         hr_dao.getTimeOffStatus(objEvent);
        //trigger the success function based on return
       return false;
      });
<script>

Share |
Posted by admin at 5:50 PM| Link  |  0 comments |

 

22 February 2010

JQuery Nuts and Bolts

The "Ajax Post"

This entry is about the "Ajax Post", sending data to a form action and returning results to a receiving div. I want to throw out big mad props to John Arrowwood from the JQuery List for parameterizing and wrapping my code in a function.

What this piece does is take form data from a named form, post it to an action page which can point to (or contain business logic), and then display a sucess page in a desgnated div.

The form exists within a global div called 'content-box'.

The original code:

$("#getTOByWeek").live("click", function(){
  $.ajax({
     type:"post",
     url:"webapps/hr/admin/actions/act_adminHR_Handler.cfm",
     data:$("#toByWeek").serialize(),
     cache:"false",
     success: function(){
         $("#content-box").load("webapps/hr/admin/display/dsp_TOList.cfm");
     },
     error: function(){
       alert("data");
     }
   });
  return false;
});


#getTOByWeek is the button that triggers the post., act_adminHR_Handler.cfm is the called action which in this case invokes a ColdFusion component which contains the business logic.. The form data is contained in #toByWeek and is serialized in the post.

When you look at the sucess function it loads dsp_TOList.cfm in #content-box,. Dsp_TOList.cfm, contains a generated table based on a query who's results are modified by the business logic invoked by the action template.

What I was running into, being a JQuery noob at the time was that I had working code but it wasn't parameterized or reusable, a brief post to the JQuery list brought the following:

(function($){

    var defaults = {
            button: '#buttonId',
            form:   '#formId',
            target: '#targetId',
            url:    '/change/me',
            page:   '/change/me/too',
        };
            
    clickToLoad = function( options ) {
        var o = $.extend({},defaults,options);
        $(o.button).live('click',function(){
                $.ajax({
                        type:    'post',
                        url:     o.url,
                        data:    $(o.form).serialize(),
                        cache:   false,
                        success: function(){$(o.target).load(o.page)},
                        error:   function(){alert('data');},
                    });
                return false;
            });

})(jQuery);

and it's called this way
clickToLoad({
        button:  '#theButton',
        form:    '#theForm',
        target:  '#theDiv',
        url:     '/path/to/data/handler',
        page:    '/page/to/load',
    });

This gives you a reusable Ajax form handler..
Share |
Posted by admin at 10:19 PM| Link  |  0 comments |

 

01 February 2010

JQuery Nuts and Bolts

a quick entry, the loader graphic
The infamous spinner as done by JQuery:

Create a div that contains the image that you want to use as a "loader" image.

<div id="loader">
  <img alt="" src="path/to_graphic" />
</div>

It just takes a small piece of Javascript (JQuery) to make the magic happen

$('#loader').hide() //this initially hides the div
   .ajaxStart(function(){
     $(this).show(); // show the div when the Ajax call starts
   )}
   .ajaxStop(function(){
     $(this).hide(); //hide the div when the Ajax call stops
   )};
Place the loader div within the div that's receiving the results of the ajax call, and JQuery code with the rest of your JQuery code and you have a quick and dirty loader
Share |
Posted by admin at 12:00 AM| Link  |  0 comments |

 

29 January 2010

JQuery Nuts and Bolts: Part 1

What is Jquery Anyways

For the one or two of you that don't know what JQuery is....

from JQuery.com:
"jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript."

and it does...

How does it do the voodoo that it does so well?
In the 30,000 ft. view, JQuery converts the entire rendered HTML document to Javascript, which gives it access to the DOM and events.. Now that you know that, store it in the back of your mind somewhere, because the only time you'll need it is if someone asks you, "How does JQuery work?".

There are a few things that you do need to be concerned with in order to implement JQuery, whether you're using ColdFusion or not.

Concept 1. when does the magic happen
JQuery handles things differently than Javascript traditonaly does, under normal circumstances you'd wrap up your Javascript in a window.onLoad() event, and wait until the page rendered, before anything happens.

JQuery circumvents this with the ready event. this checks the document and starts once it is ready to be manipulated. it looks like this:


$(document).ready(function(){ 
  // Your code here   
}); 

Concept 2: selectors
a selector can be a tag ("a") or an id (id="foo"). We'll build on the existing code

$(document).ready(function(){
    $("a").click(function() {
     alert("Hello world!"); 
    }); 
 }); 

In this case we're using the tag "a" we could've just as easily used an ID

$(document).ready(function(){
  $("#IDName").click(function() {
   alert("Hello world!"); 
  }); 
}); 

 

If you''ve not used JQuery before, here's the place to start:
http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Share |
Posted by admin at 12:00 AM| Link  |  0 comments |

 

27 January 2010

JQuery Nuts and Bolts

Getting JQuery and ColdFusion to dance together
I think it's time I give something back to the CF Community. This will start a series of entries dealing with the interaction between Cold Fusion and JQuery.
Share |
Posted by admin at 12:00 AM| Link  |  0 comments |

 

 

© 2011 Scott Stewart / SSTWebworks
Design by Contented Designs