I followed the helpful advice on so many pages as to how to turn on file upload. I finally got the file attach screen (under the link button mind you), and I kept getting invalid file type (or specified, I cannot remember the error).

Frustrated, I did some good old debugging and got back to the config file in \editor\filemanager\connectors\cfm\config.cfm . Within this file, circa line 52, is a line that states:

Config.ConfigAllowedTypes = “Image” ;

It is here, young padawan, that you want to change your line to:

Config.ConfigAllowedTypes = “Image,File” ;

Tadaa. File uploading complete.

But, a couple of years ago things changed. I learned the beauty of the DOM, XMLHttpRequest, and the ability to change page items on the fly. Since then, I’ve learned the greatness of closures, object oriented Javascript, Regular expressions (although, not limited to JS), and the usefulness of JavaScript libraries.

So, without further ado, here are a few of my favorite JavaScript resources.

• Resource: The Mozilla Javascript Documents
• Resource: W3 Schools
• Debugging: Firebug
• Beautifier: JS Unpacker and Beautifier
• Code Quality tool: JSLint
• REGEX: Regular expression checker
• Library: JQuery
• Newsgroup:  comp.lang.javascript (despite the spam)

Many of these I use daily. What are some of your favorite resources?

CFDirectory and CFTree

My latest endeavor includes creating a selectable tree from directory navigation. Much like that seen on many sites using Java. However, thanks to Coldfusion, this was done quickly and efficiently.

Since I didn’t comment the code, here is what is happening:

• Set directory file path to a variable
• Do a recursive listing of all files in said directory path
• Filter out anything that needs to be filtered out by doing a query of queries. Also setup sort order to look like normal directory listings.
• Open the CFForm
• Open a CFTree
• Set some friendly variables.
• If the current record’s directory doesn’t have a length, it is a parent item.
• If it does have a length, it is a child. (used for the parent attribute)
• Close cftree
• Close cfform

Your file path will be located in the form struct, under the cftree name, as the node value. In this case “form.foldertree.node”.

Fin! Auf Wiedersehen!

Enjoy!

*PS: WP took out some characters. I’ll leave them for you to figure out =P.

<cfset DirectoryFilePath = 'D:\SOMEFOLDER'>
<cfdirectory directory="#DirectoryFilePath#" name="Directories" action="LIST" recurse="yes">
<cfquery name="Directories" dbtype="query">
	SELECT *
	FROM Directories
	WHERE Attributes != 'H'
	ORDER BY Type,Name
</cfquery>
<cfform name="directoryForm" format="html" width="400" height="450">
	<cftree name="folderTree" completepath="no" border="No">
		<cfoutput query="Directories">
			<cfset MainDirectory = Replace(Directory, DirectoryFilePath, '')>
			<cfset Value = MainDirectory & '\' & NAME>
			<cfset Img = 'document'>
			<cfif Type EQ 'DIR'>
				<cfset Img = 'folder'>
			<!--<span class="hiddenSpellError" pre=""-->cfif>
			LEN(MainDirectory)>
				<cftreeitem value="#Value#" display="#NAME#" expand="no" img="#Img#" parent="folderTree">
			<cfelse>
				<cftreeitem value = "#Value#" display="#NAME#" parent = "#MainDirectory#" expand="no" img="#img#">
			</cfif>
		</cfoutput>
	</cftree>
	<input type="submit" />
</cfform>
<cfdump var="#form#">
StructIsEmpty(form)>
<cfoutput>#form.foldertree.node#</cfoutput>
</cfif>

*Exclude .svn folders if you have them, they will cause a mess!

However, these weren’t working for me… and I needed a quick and dirty solution.

Here is what I did.

First – I created a structure with CFScript and gave it an ID (ThisCounter).

<cfscript>
CartoonRows = StructNew();
ThisCounter = 1;
CartoonRows[ThisCounter++]['cartoonName'] = 'Simpsons';
CartoonRows[ThisCounter++]['cartoonName'] = 'Family Guy';
</cfscript>

Next up was the use of QueryNew() to generate an order-able selection based on my ‘ID’.

<cfset CartoonColumns = QueryNew('ID,ColumnName,FriendlyName','Integer,VARCHAR,VARCHAR')>
<cfloop collection="#CartoonRows#" item="ID">
<cfset QueryAddRow(CartoonColumns)>
<cfset QuerySetCell(CartoonColumns, 'ID', ID)>
<cfloop collection="#CartoonRows[ID]#" item="column">
<cfset QuerySetCell(CartoonColumns, 'ColumnName', column)>
<cfset QuerySetCell(CartoonColumns, 'FriendlyName', CartoonRows[ID][column])>
</cfloop>
</cfloop>
<cfquery name="CartoonColumns" dbtype="query">
SELECT *
FROM CartoonColumns
ORDER BY ID
</cfquery>

And now, of course, much more manipulation can be done since it is indeed a query.
Fin!

*ps*: Another alternative would be to use the thiscounter variable above, and use a for loop to loop from 1 to structcount. This will maintain order, but won’t give you all the yummy goodness of a query.

<a onclick="..."></a>

You would first think of the unbind function. However, that function only works for events binded with JQuery. In order to unbind an inline event, set the attribute of the event you want to unbind to nothing.

.attr('onclick', '')

The problem:

I have a datepicker on an input box when the page loads. This works fantastically. However, if adding a new input via the DOM, and continuing with the same class as my previous input box ([class=datepicker]), my newly added input boxes do not have a pretty little datepicker box on click. Now, I’m sure there is some super duper, easy way to resolve this using the live method, or one of its cousins… but when you are at a lack of time, sometimes (unfortunately)  efficiency suffers.

My solution:

In the end I ended up grabbing all of the inputs with class datepicker upon each newly added DOM input. I then removed the class that triggers the datepicker from any fields that had it. I also removed the calendar image sitting next to it. Finally, I re-added the datepicker to the inputs.

function runDatePicker(){
	var inputs = $('.datepicker');
	$.each(inputs, addPicker);
	function addPicker(){
		if($(this).hasClass('hasDatepicker')){
			$(this).removeClass('hasDatepicker');
			$(this).next('img').remove();
		}
		$(this).datepicker({
			showOn: 'both',
			buttonImage: imagePath + '/calendar.png',
			buttonImageOnly: true,
			numberOfMonths: 3,
			showButtonPanel: true
		});
	}
}

Create an upload button within a form, submit to the page without reloading, and display the new entry.

AJAX was the first thing to come to mind. However.. it didn’t work. I ended up having to create a hidden iFrame, adjust my form target, and retrieve the result.

Let’s look at some code tidbits.

var iframe;
		try {
		  //O I hate IE ><
		  iframe = document.createElement('<iframe name="uploadFrame"></iframe>');
		} catch (ex) {
		  iframe = document.createElement('iframe');
		  iframe.name = 'uploadFrame';
		}
		var initAction = document.getElementById('skillsForm').action;
		iframe.id = 'uploadFrame';
		iframe.style.display = 'none';
		document.body.appendChild(iframe);
		document.getElementById('skillsForm').target = 'uploadFrame';
		document.getElementById('skillsForm').action = webPath + '/skills/_uploadDoc.cfm';
		document.getElementById('skillsForm').submit();
		document.getElementById('skillsForm').target = '';
		document.getElementById('skillsForm').action = initAction;

What’s going on?
I created an IFrame, got the default action (it was different than my new action), appended the iframe to the body (which this really doesn’t matter where it is appended to), and manipulated the target. This sent my form off to the correct page and processed it.

To get the result, I used a little Jquery magic =):

var fileName = '';
$('#uploadFrame').load( function(){
fileName = $('#uploadFrame').contents().find('#docFileName').html();
...
});

Of which this found the element with the id of docFileName and returned to me the text.

1. Download and unzip PHP package to desired PHP directory (eg: C:\PHP)
2. Add ‘;c:\PHP’ (or wherever you stored your PHP directory without quotes) to your PC Path. To get there go to “my computer” -> right click > properties > advanced > environement variables > and add to the system variable ‘Path’
3. Restart your computer
4. Open IIS
5. Right click on your site or virtual directory
6. Make sure execute permissions on the home tab says ‘scripts only’
7. Click configuration and click add to add the PHP executable
8. Add ‘.php’ as the extension and browse to your php folder and add php-cgi.exe as the executable
9. Leave everything else the same and click okay a few times…
10. Go back up from your home directory and click on web service extension. It is the same level as your website branch.
11. Right click and go to “add new web service extension”
12. Type PHP as the name and browse to php-cgi.exe for the required file.
13. Create and test a PHP file!

However, here is an ever so useful tip brought to you by me – CodeStar.

So, CFoutput should be on the forefront of every beginner ColdFusion scrip-tor. However, lo- and behold, I wanted to group my results. Simple right? No, not so much. In order to use the group attribute on the cfoutput tag, you must use order by… or else group won’t work. Ah, the joys and wonders of ColdFusion. Of course although I overlooked this, it is documented in the docs:

Use if you retrieved a record set ordered on one or more a query columns.

I have an object, and within that object… I have methods (nothing special there, huh?). So, I figured that since all of this is so prettily encapsulated, I should have no issues adding an event handler inside my object that would allow me to click and go to a method inside my object.

Woe is me. You see, the ‘this’ keyword refers to the parent of the caller. And since I changed the caller from my object to my delightful event handler method, this went to the object that called the event, and not the parent object.

So my problem was – how do I access all of my properties and other events that are in my parent object, from my method that was actually an input object… phew.

It did take some work, and some browsing of the Interwebs. Unfortunately, the Interwebs yielded unhelpful and verbose ways to get around what seemed like a simple problem.

I did eventually come across an answer, and here it is – short, sweet, and to the point (unlike me :p).

    var objCopy = this;
    this.myObjMethod.onclick = function(e) {
        objCopy.displayTimes(e);
    };

Source: http://paste.pocoo.org/show/131280/