Web Trenches

Since I started doing JavaScript and Ajax development I have always been frustrated with the lack of a good debugging tool for Internet Explorer.  Firefox has Firebug, which is outstanding.

I think I may have finally found a solution - http://www.debugbar.com/

This can be a big help for those Ajax calls and JavaScript functions that work in Firefox but just don't seem to work right in IE. 

Some of the features...

• See every Ajax request, the response headers, and the source code.
  
  
• View all the linked and inline scripts, html, and css in any loaded page.
• An enhanced JavaScript console
• HTML check - for validation

There are also some nice extras in there, such as the color picker, window resizing to preset sizes, and the ability to e-mail screen shots when an error occurs.

Read more...

I first started doing Ajax programming using the Prototype framework.  As I learn the new CF8 Ajax features, I find myself looking for simple ways to replicate some of the functionality that is in prototype.  With prototype, you use $F('element') to return the value of a form field.  There is a similar method for CF8, but it needs a little tweak.  More...

Read more...

One of my favorite new features of CF8 is the ability to create a JavaScript object from a CFC.  You can then use the object to make Ajax calls. More ...

Read more...

When using the CFGRID tag (type="html"), there is no built-in way to align the data in the columns.  The dataalign attribute of the CFGRIDCOLUMN tag is not available for the HTML grid type.  There is a simple CSS trick to align the columns.

Each column in the grid has its own css class, and there is also a class that applies to all columns.  The x-grid-col class allows you to apply formatting to all of the columns at once, for example: .x-grid-column {text-align:right;}.  The rest of the columns have numbers associated with them, starting with 0 as the first column.  So, the code below aligns all of the grid columns to the right, then sets only the first and second columns to align left.

 <style type="text/css">
    .x-grid-col {text-align:right;}
    .x-grid-col-0 {text-align:left;}
    .x-grid-col-1 {text-align:left;}
</style>

 You can also update just the column headers using a similar method.  The  headeralign attribute of cfgridcolumn also doesn't work for HTML grids.

 <style type="text/css">
    .x-grid-hd {text-align:center;}      
    .x-grid-hd-0-0 {text-align:left;}     
    .x-grid-hd-0-1 {text-align:left;}
</style>

Read more...