jQuery presentation/demo

[Craig Buchek]

I uploaded the demo page we were working with last night. It's called
'jquery-form-demo.html', and is in the Files section of the Google
Group. I added lots of comments, and fixed a bug, and added some
really simple extension functions. The comments explain what I'm
doing, and how some of the jQuery features work. They're not quite as
thorough as my explanations during the presentation, but are pretty
extensive.

To reiterate a few things from last night:

- jQuery makes it trivial to do quite a few things, like focusing on
the first field of a form, or changing an attribute when an event
fires. It's not too hard to do more complex things.

- jQuery can easily co-exist with Prototype and other JavaScript
libraries. The only global variables used are 'jQuery', and
(optionally) '$'.

- jQuery selectors include most of CSS, along with some extensions.

- jQuery objects (the result of jQuery(selector)) are sets of
elements, wrapped in an object that allows you to call simple
functions that will apply to the entire set.

- The "onDOMReady" functionality is required for any unobtrusive
JavaScript, as it fires after all the DOM elements have been loaded,
but before the page renders, and before any images have been loaded.

- RJS and JavaScript helpers aren't really needed -- it's easier to
just write the jQuery code in a JavaScript file, and pull HTML
fragments or text or JSON from the server for AJAX stuff. You can
actually have RJS generate jQuery code if you want. (Just write the
RJS to output the right JavaScript.)

If anyone has any questions about jQuery, I'd be happy to answer them.
I'd also be willing to do some consulting to get you started, if
anyone's interested.

Craig

[Ed Howland]

On Feb 12, 2008 11:31 AM, Craig Buchek <Craig....@gmail.com> wrote:
>
>
> - RJS and JavaScript helpers aren't really needed -- it's easier to
> just write the jQuery code in a JavaScript file, and pull HTML
> fragments or text or JSON from the server for AJAX stuff. You can
> actually have RJS generate jQuery code if you want. (Just write the
> RJS to output the right JavaScript.)
>

One note to remember. If you pull in any new HTML elements via AJAX,
your new DOM nodes won't be unobtrusively active. Because the onReady
already happened. You have to rerun any methods that attach to these
nodes. I did it via the $.get and used a callback to reassign some
event handlers.

Ed

>
> Craig
> >
>

--
Ed Howland
http://greenprogrammer.blogspot.com
"The information transmitted is intended only for the person or entity
to which it is addressed and may contain proprietary, confidential
and/or legally privileged material. Any review, retransmission,
dissemination or other use of, or taking of any action in reliance
upon, this information by persons or entities other than the intended
recipient is prohibited. If you received this in error, please contact
the sender and delete the material from all computers."

[Craig Buchek]

There are 2 simple solutions to this. First, you can attach event
handlers to the new DOM elements in the AJAX callback routine, as Ed
noted. Or you can use the liveQuery plugin, which will do that for you
automatically.

Craig