Posted By : Dan Wilson     June 27, 2007 1:15 PM

I posted a week ago about how to map a directory to a drive letter. This was a good tip for me because to get to my webroot directory, I needed to click 6 times. These 6 clicks have annoyed me for so long, I built a tool to generate the mapping scripts.

The SUBST generation tool uses JQuery. There is no technical wizardry involved, I promise. Matter of fact, all of the logic is client side, so you can view the source if you like. Building the tool seemed like a fun little morning task and I happen to have a few spare moments. I hope you like it.

Note: I've tested this on WinXP, if there are other steps needed for other Windows based OS's, please leave a comment and I'll add it to the program straight away.

Posted By : Dan Wilson     May 21, 2007 2:56 PM

Closures in JavaScript are a very important tool. The ability to control the execution contexts of variables and functions gives a lot of power. In some cases, closures aren't only handy and powerful, they are necessary. For example, in the process of wrapping up a JavaScript AutoSave, I ran into a bit of a scoping problem with setTimeout().

As you know, setTimeout hangs off of the 'window' scope. The fully qualified call is window.setTimeout(). Inside of my javascript object I created a setTimeout command to run the doSave() function. The setTimeout() function takes two arguments:

1. The Code to execute on completion
2. The number of milliseconds before executing Arg1

Since I was several layers inside the AutoSave object, I addressed the function as this.doSave(). The problem arose that the execution context of setTimeout means that 'this' will not resolve into my handy doSave function. I could have addressed the function by the global variable containing my AutoSave object, but that would reduce the reusability of my JavaScript object.

What I needed was a way to maintain the variables from one scope into another scope and that is where the closure came in.

This piece is specifically the closure.

Notice above how I get a reference to the function doSave from the this scope. Inside the AutoSave object, 'this' points to the AutoSave object. Then I set this.doSave to a new variable which I then put inside the first argument of setTimeout.

When this code executes, _OnTimeoutEnd correctly resolves to the AutoSave.doSave function and the save is completed.

JavaScript closures are very powerful and should become a part of your toolbox as well. If you would like to read more about Closures in JavaScript, I suggest Javascript Closures

by Richard Cornford.

Posted By : Dan Wilson     May 11, 2007 11:20 AM

I am currently working through a problem and at the point of pulling my hair out. I have an Ajax process that pops up a nice little div on success. In Firefox, predictably, I see the pop-up window and all is well. In IE, the ajax process runs and I do not get the pop-up window.

Maybe I am a little spoiled using Firebug because I can see the details of the request, the DOM and other important runtime bits. In IE I get nothing useful.

After writing the hundredth alert( ' yadda ' ); command, I thought I would ask the community for input. What do YOU use to debug javascript and ajax requests in IE?

P.S. Any one who write 'The Microsoft Script Debugger' will be taken out back and shot.

Posted By : Dan Wilson     March 13, 2007 8:13 PM

I was digging through a bunch of javascript code today and trying to trace out some variables. In JSEclipse, an eclipse plugin made by Interakt(newly in the Adobe fold), if you highlight a variable name, or a property name, it not only highlights all instances in the file, it also places little markers for each instance on the right hand gutter of the IDE. A quick mouse click jumps right to the instance. I've used JSEclipse for a little while now, but this was the first I noticed this handy feature.

This particular JS file was well over 700 lines and I needed all the help I can get. Thank you Interakt for JSEclipse.

There are plenty of other nice features in the JSEclipse plugin such as:

1. Contextual code completion
2. Suggest parameters to be filled
3. Reads all classes in current project
4. Scan current file for words
5. Syntax Highlighting
6. Syntax based code folding
7. Error reporting

Get a full feature list here.

You can get JSEclipse here. (Registration Required).

Posted By : Dan Wilson     February 8, 2007 9:02 PM

A wonderful presentation by Joe Hewitt, creator of Firebug is available for viewing at Yahoo Theater. I use Firebug a lot when working with Javascript and Ajax and was pleased to note the new Firebug 1.0 release a few weeks ago. Firebug was already a great productivity tool in my development environment. The new features in Firebug add some real power.

New features include:

1. A Javascript profiler - excellent for checking the performance of your scripts.
2. The javascript command line has autocomplete for objects and properties
3. A dom walker, for inspecting elements and their properties in the DOM.
4. An inline CSS editor- for tweaking CSS in real time. There is an interesting feature in the CSS editor where selecting a number and using the arrow keys, adjusts the numeric value. Great for keeping your eyes on the design instead of the code
5. An amazing amount of in-line editing and cross linked properties, for example, in the Javascript debugger, you can put the cursor over a variable and Firebug will show you the value of that variable at the time the breakpoint was hit.

Rather than me banging on about how great it is, have a read directly from the source. These two links got me the most excited:
When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, padding, and sizes for you.

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and see what each variable looked like at that moment. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.

The video is about a hour long. A worthwhile investment.

Posted By : Dan Wilson     January 23, 2007 9:30 PM

How many times have you wished for that?

ColdFusion is tops at list parsing. I remember back in the day all my data structures were either lists or structs. With some combination of structs and lists, I could solve anything. Of course, that was before UDFs and Components and all that.

Anyways, Topper at cftopper has made available javascript functions that operate on lists. The wait is officially over. No more tossing about with ugly looking arrays.... ;)

Have a look

UPDATE: There are at least two three other CF/Javascript projects out there:

1. From Leftcorner JavaScript Library of ColdFusion Functions.

This is a JavaScript library that emulates many ColdFusion functions. It is useful for ColdFusion developers who are new to JavaScript or who want to maintain consistency in a ColdFusion and JavaScript mixed application. It is also useful for developers who prefer the ColdFusion (and Visual Basic) syntax of invoking functions.

2. From Shlomy Gantz CFMLjsLibrary

Basically it is a translation of ColdFusion functions to javascript.

3. For the JQuery fans from Christopher Jordan CFJS for jQuery is a set of ColdFusion functions written for JavaScript and can be accessed as $.funcName();

Posted By : Dan Wilson     January 17, 2007 8:50 PM

The script tag should not be used in short-tag form. I found this out while playing with JQuery.

JQuery has underwent a lot of changes to the API as of late. Lots of useful functionality,a much simpler API, Guaranteed to be 100 times more fun than your favorite javascript / ajax library or your money back. <cf_salespitch /> While adding some functionality and refactoring, I hit a snag. All of a sudden my JQuery code stopped working. I figured I'd called something incorrectly and went poking around in the docs.

Finding nothing amiss, I started placing alerts all through my code looking for some sign of life in my Javascript.

Nothing.

Eventually I got everything happy again. It turns out I was using the script tag incorrectly. The script tag should be only used in the long form. If the short form is used, it can cause other scripts on the page to fail.

Example 1

This is an example of the short form of the script tag. The code will not alert.

Example 2

This is an example of the long form of the script tag. This code will alert.

I am sure I've run across this before but I didn't think of it first off. Seems since the body of the tag is empty, it shouldn't matter which form of the script tag is used. Curious, I tried a few more tests:

Example 3

This code will alert: (Note the use of the short form in the first script tag. The second tag is in long form.

Disclaimer: I tested this code on Firefox 1.5 and IE 6.