Search:

Calendar:

Sun	Mon	Tue	Wed	Thu	Fri	Sat
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Subscribe:

Enter your email address to subscribe to this blog.

Archives By Subject:

Action Script (1) [RSS]
Adobe (33) [RSS]
AIR (7) [RSS]
Ajax (3) [RSS]
Buzzword (1) [RSS]
CFUG (42) [RSS]
ColdFusion (69) [RSS]
Flash (6) [RSS]
Flex (40) [RSS]
Frameworks (2) [RSS]
Free Software (2) [RSS]
FXUG (22) [RSS]
General (33) [RSS]
JpgMetadataReader (3) [RSS]
jQuery (1) [RSS]
Mac (2) [RSS]
Off Topic (13) [RSS]
OpenSource (14) [RSS]
PaperVision (10) [RSS]
Spry (2) [RSS]
Transfer (1) [RSS]

Tags:

adobe air ajax cfug coldfusion flash flex frameworks free software fxug general jpgmetadatareader mac off topic opensource papervision spry

Top Commenters:

[8] Campbell
[8] Ben Nadel
[6] Steve Bryant
[6] Mark Flewellen
[4] barry.b
[4] Raymond Camden
[3] John Whish
[3] Peter Bell
[2] carlos
[2] riabook

My Links:

New Zealand Bloggers

Other Links

My Email:
djohnsmarie@gmail.com

RSS:

Adventures in jQuery

Posted At : July 3, 2008 12:41 PM | Posted By : David
Related Categories: ColdFusion,Ajax,jQuery

The last week or so I've had the pleasure of working deeply with jQuery.

And I mean that, it's been a pleasure.

Once you get used to the 'style' of how it works, it makes sense and has a consistent coding experience.

I've worked mainly with the core and the ui.jquery libraries, with fileupload thrown in. In the mix is also , and they have all played together nicely (so far!)

I've got jQuery adding and removing custom DOM elements on the fly, while updating information on the server, uploading and deleting images and also maintaining the structure of the form so that when it is submitted in the usual "post" manner, the server knows what to do with the data it receives.

So all in all I've had a good experience with it.

Things it has helped me understand is the use of "anonymous Functions" (I think that is what they are called)

EG:

$("#myelement").hide();

will hide the element with the id of "myelement"

now the "hide" method will accept an argument of a function that it will call when it has completed. Commonly called a "callback", so i we had a function like this:

function alertme(){ alert('me'); }

you could call that function when hide was complete like this:

$("#myelement").hide( alertme );

so the function has the name "alertme", so is not anonymous.

To use an anonymous function to do the same thing, this is what you would do:

$("#myelement").hide( function(){ alert('me'); } );

You can also do this in Flex.

eg:

rather than:

addEventListener( "SomeEvent" , someFunction );

You can go:

addEventListener( "someEvent" , function( event: Event): void { [do stuff here] } );

While you can put as much in you function as you like, I did find it makes code a bit hard to read.

One thing that works, but somehow feels wrong, is that the anonymous functions have direct access to the variables declared in the calling function.

eg:

function myFunction()
{

var someString = "bob";
$("#myelement").hide( function(){ alert( someString ); } );

}

This seems to be true of both JS and AS. I guess this is because the function itself belongs to the function it is being called in, so has access to the variables called in there...

So all in all I've enjoyed getting to know jQuery, and suspect it's the beginning of a beautiful friendship!

...but, I still prefer Flex!

Comments (5) |

Print |

Send |

del.icio.us |

Linking Blogs | 4282 Views

Comments

[Add Comment]

jQuery is awesome. One of the biggest hurdles for me initially was coming up with a tabbing / line-break style that I was comfortable with. This is the first time I ever had to deal with chained methods and it certainly requires a totally different formatting. I finally came up with a style that I liked:

jQueryObject
. . . . .attr()
. . . . .attr()
. . . . .attr()
;

(the extra periods (.) are just for spacing. They are supposed to be tabs.

Also, the headless function was a bit more tricky:

jQueryObject.click(
. . . . function(){
. . . . . . . . var jThis = $( this );
. . . . . . . . return( something );
. . . . }
. . . . );

Once I figured out that stuff, it made me much more comfortable.

# Posted By Ben Nadel | 7/4/08 12:40 AM

Hi Ben,

I too have a coding style that works for me.
Laying out the code in a consistent manner sure helps readability!

One thing I don't like about lots of white space is the weight in size it can introduce to my JS files.
...so that's why I've been so interested in the 'combine' project @ RIA forge (http://combine.riaforge.org/)
I downloaded the raw jQuery and ran "combine" over it and the resulting JS file was almost identical to the minified jQuery package. I guess this shouldn't be a surprise since I think it uses the same jsMin to do it ;-)

What's great about this is that I can write my verbose, nicely layed out JS and then reduce it's size of my site user on the fly.

The "combine" project is still Alpha, but Joe has been very active on it, So keep an eye on it!

Cheers,

David

# Posted By David | 7/4/08 7:36 AM

David,

Good point. White space does add overhead unlike in a ColdFusion file which is compiled on the server.

# Posted By Ben Nadel | 7/4/08 8:14 AM

I'm glad you are finding the project useful. I agree, I find it quite liberating to be able to fill my JavaScript full of comments and white space without the nagging file-size issues!

I used to keep two versions of each .js file, one minified for production, and the other for development. I experimented with minifying the javascript during the build process, but opted for doing it at runtime as this offers the added advantage of reducing the number of http requests.

# Posted By Joe Roberts | 7/4/08 9:33 AM

@David
"...but, I still prefer Flex!"

So do I :)

# Posted By Andrew S. | 10/1/08 4:10 AM

[Add Comment]

David Harris's Technology Blog

ColdFusion, Flex, and other stuff... (and 332,167 hours, 14 mins in to my plan for global domination)