Enrique Delgado Monroy

Attaching functions to events in JavaScript: The unobstrusive way! - Part 2

Enrique Delgado — Fri, 24 Oct 2008 08:00:00 -0500

Previously, I talked about a good way to attach event listeners to DOM elements. I like the approach described in that post because is pure JavaScript and not dependent on a framework, but if you happen to be using a framework already, or are thinking on using some, here are two methods of achieving this task:

Prototype.js: observe method.
jQuery: bind method and friends.

It is important to remember that, your code should wait for the DOM tree to completely load before attempting to attach events to elements. The typical scenario is that some JavaScript code is attempting to attach an event to an element that does not exist yet, because the document is still loading.

Each framework has ways of wrapping your code, so that it runs only when the DOM is ready:

Prototype

document.observe("dom:loaded", function() {
  // Your code here
});

jQuery

$(document).ready(function(){
   // Your code here
 });

Using Prototype

Prototype offers several event handling methods, but the most common is observe and stopObserving.

Example:

$('foo').observe('click', respondToClick);

function respondToClick(event) {
  // This is how you access the element that triggered the event:
  var element = event.element();
  // Your code here, e.g.:
  alert('Hello');
}

Notice the name of the event, in this case is click. The complete list of events are defined in the W3C recommendations, but here is a summary of the most common event names organized by type:

Mouse Events
- click – Occurs when the pointing device button is clicked over an element.
- mousedown – Occurs when the pointing device button is pressed over an element.
- mouseup – Occurs when the pointing device button is released over an element.
- mouseover – Occurs when the pointing device is moved onto an element.
- mousemove – Occurs when the pointing device is moved while it is over an element.
- mouseout – Occurs when the pointing device is moved away from an element.
Key Events
- W3C does not have them, but the following are supplied by Prototype:
  KEY_BACKSPACE, KEY_TAB, KEY_RETURN, KEY_ESC, KEY_LEFT, KEY_UP, KEY_RIGHT, KEY_DOWN, KEY_DELETE, KEY_HOME, KEY_END, KEY_PAGEUP, KEY_PAGEDOWN
HTML Events
- load – Occurs when the DOM implementation finishes loading.
- unload – Occurs when the DOM implementation removes a document from a window or frame.
- select – Occurs when a user selects some text in a text field.
- change – Occurs when a control loses the input focus and its value has been modified since gaining focus.
- submit – Occurs when a form is submitted.
- focus – Occurs when an element receives focus either via a pointing device or by tabbing navigation.
- blur – Occurs when an element loses focus either via the pointing device or by tabbing navigation.

Using jQuery

jQuery mostly has “helper methods” to set event listeners that are named after the event name, but the two most basic methods are bind and unbind.

Example:

$("#foo").bind("click", function(e){
  // This is how you access the element that triggered the event:
  var element = event.target;
  // Your code here, e.g.:
  alert('Hello');
});

Again, notice the name of the event, in this case is click. According to the jQuery documentation, these are the allowed event names:

blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

Most helper elements are named after the event names above, so you have things like click(), focus(), submit(), etc.

Example using an anonymous function as the functioned to be executed when the event is triggered:

$("#foo").click(function () { 
  // The element is access by using "$(this)" 
  // Your code here, e.g.:
  alert('Hello');
});

Event Delegation

One often source of confusion is how to attach event listeners to dynamically-generated DOM elements (for example, adding <li> elements to a list via AJAX).

When an element is crated, it is not already bound to an event listener, so you will have to perform a two-step process: create the element in the DOM, and then attach the event listener. This can get tedious easily, so instead of attaching the event listener to the DOM element desired, you attach an event listener to a parent element in the DOM tree.

In turn, this parent element acts as a “catch all” event listener. It will figure out which element triggered the event in the first place and act accordingly. This technique is referred to as event delegation.

Event delegation works because some events “bubble up” from child nodes to parent nodes in the DOM tree; see event bubbling.

Hope thins helps someone out there getting started. Post your questions if you run into trouble. :)

Slider Controls with Prototype and Scriptaculous

Enrique Delgado — Tue, 11 Dec 2007 07:00:00 -0600

Even though web-based applications have the majority of input elements found in traditional desktop-based ones, once in a while you are going to wish you had input elements that for some reason did not make it to the HTML standards.

One of the input elements I wish were supported by default are draggable slider controls. There is something cool about having a slider to quickly change a setting of a search or a calculation, instead of having to type values on a text box or clicking on drop-down boxes.

Out of the myriad of options I found during a quick Google search, I found these two options to be the most attractive:

Since I was already using Scriptaculous on the application in question, I decided to stick to that solution. Yahoo’s version is definitely worth a look though. At first glance, Yahoo’s example looks better than the Scriptaculous one, but as you will see we can get the best of both worlds.

One word of warning; even though sliders are a useful control, you should exercise discretion as to not over use them. The truth of the matter is that not everyone is familiar using sliders on the web, and it can quickly become a usability problem if not careful. Good uses for sliders are things like mortgage calculators, search result filter controls, and things of that sort. Do not replace menus or tabs with a slider ;)

Onto the interesting part. In order to use Scriptculous’ sliders, you will need to make sure you are including the library with the slider component. By default, everything is included when you include scriptaculous in the traditional way:

<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>

This will load about six components, but it is a good practice to load only those components that you are actually using. In my case, I’ll be using effects and slider so I’m calling Scriptaculous in this fashion:

 <script src="prototype.js" type="text/javascript"></script>
 <script src="scriptaculous.js?load=effects,slider" type="text/javascript"></script>

A Scriptaculous slider consist of two things:

A “parent” element (typically a DIV) deemed to be the “track” on which a knob will slide.
A “child” nested element (typically a DIV) that will act as the element to be slided across the length (or height) of the track.

You can create a slider track and controls purely based on CSS code like in the Scriptaculous sample, but I chose to use images within DIV elements to obtain the look of the Yahoo UI slider control. A possible HTML mark-up would be:

 <div id="track1" style="background-image:url(bg-fader.gif); background-repeat:no-repeat; width:209px; height:28px;">
  <div id="handle1" style="background-image:url(thumb-n.gif); background-repeat:no-repeat; width:17px; height:21px; cursor:move;"> </div>
 </div>

In the example above, we have a parent DIV element (the track) with an ID of track1 and a child (the handle) element with an ID of handle1. In this case the width and height of the DIV elements match the track and handle image dimensions.

Here is where the magic comes. Lets make a Slider object to give life to our HTML slider:

 <script type="text/javascript" language="javascript">
  // <![CDATA[
  window.onload = function() {
    new Control.Slider('handle1',
                       'track1',                                  
                       {axis:'horizontal',
                        range: $R(1,5)
                       });
  }
  // ]]>
 </script>

In the example above, we are creating a horizontal slider with a handle element ID of handle1 and a track element ID of track1. The slider possible values range from 1 to 5.

You may have noticed that the code is within the document’s onLoad event. This is because the slider object needs to be created after the track and slider elements have completely loaded. Alternatively, you could place the JavaScript code somewhere after the HTML elements in your document, but it is typically not a good idea to place JavaScript anywhere other than in its own .js file and then calling that file on your document. See my other post about unobstrusive JavaScript.

There are several options you can play with to create many variations of Scriptaculous sliders. For a good reference, check out the slider documentation page.

Download a complete working demo here. Just unzip the file and open the index.html file with your browser. You should see some sliders with different attributes and further examples as to how to get useful data from the sliders :)

Enhance your JavaScript-fu with LowPro

Enrique Delgado — Thu, 31 May 2007 09:34:00 -0500

During RailsConf 2007 I had the pleasure to have a beer with Dan Webb at the Rails Machine hangout. It was cool to talk all about JavaScript (one of my interests) as it relates to Rails.

It was interesting to find out that Rails is not quite adopting the “unobtrusive way” completely. Just look at how the link_to_remote JavaScript code is generated; it mixes content with JS code.

I’m hoping that as Rails gets betetr and better, it will also support better graceful degradation for JavaScript. For now, Dan’s awesome library a.k.a Low Pro should help us all become true JavaScript-fu disciples.

Talk about navigating through the DOM with ninja-like swiftness! :)

RailsConf 2007 Keynote: A peek at Rails 2.0

Enrique Delgado — Fri, 18 May 2007 17:03:00 -0500

RailsConf 2007 is well underway now. After a day of tutorials, we were welcomed by Chad Fowler, writer and fellow Pragmtic Studio Alumni. Chad had some cool things to say to the community, namely that we have an opportunity to have a good impact and he encouraged us and everyone to raise money for charity as a Rails community. Go to http://pragmaticstudio.com/donate to make your donation.

David Heinemeier Hansson kicked-off the conference with his keynote speech “A peek at Rails 2.0”. David spoke about some of the upcoming features in 2.0, but specifically said that 2.0 is not going to be a “magic unicorn”. I.e. not a re-write, but more like a progression of sorts; real and humble. I’m sure the screencast will g up soon at the rails site site.

Some of the features are:

namespaces in routes.
Default scaffold, will have a complete xml backend.
scaffold_resource will be just scaffold and it will be RESTful
Easy to connect to a REST interface, even with an isolated simple ruby file. “This stuff works now”. Active Web Service no longer bundled with 2.0, just Active Resource. “The answer is not SOAP, it’s active resource”
Breakpoints are back. Rails-debugger.
Debugger
HTTP performance though JS and CSS cache to make the browser make fewer connections also, asset hosts. Query cache.
Sexy migrations
The MIT license assumption.
Spring cleaning (all those deprecation warnings will become a reality)

More soon!

Gearing up for RailsConf 2007 in Portland!

Enrique Delgado — Sun, 13 May 2007 12:30:00 -0500

With only three days to go, I’ve been busy getting everything in place for my trip to Portland.

I spent some time reading through all the descriptions and presenter bios for each of the sessions in the conference. I’m excited to hear from some big names like Dan Webb, Geoffrey Grosenbach, Amy Hoy amongst others.

A buddy of mine pointed me to this conference-planning site. It’s pretty cool; this is my preliminary plan.

Keep an eye on my Flickr photostream for pictures of the conference :)

Attaching functions to events in JavaScript: The unobstrusive way!

Enrique Delgado — Thu, 03 May 2007 10:33:00 -0500

I needed to set a simple focus when a page loads in a legacy site I was working on so I decided to exercise a “better way” to attach functions to events in JavaScript.

In the past, I used to attach onLoad events through an anonymous function like so:

window.onload = function() {
  init();
}

function init() {
  //do something interesting
}

This method has its drawbacks tho; it assumes that this script is the only script that may act upon a document. We “assume instead that it is part of a whole group of scripts all of which fulfilling different tasks.” As described in this awesome webzine by Chris Heilmann . Instead, Chris points out a better solution; something unobstrusive (because you don’t have to mix JavaScript with HTML) and that plays well with others (because more than one script can act upon a document):

  // Attach the function init() to the window.onload event:
  addEvent(window,'load',init,false);

  // Initialization; I'm setting the focus on the first field:
  function init() {
    //do something interesting
  }

  // Function to attach events to objects.
  // (http://icant.co.uk/articles/from-dhtml-to-dom/from-dhtml-to-dom-scripting.html#domasset3)
  function addEvent(elm, evType, fn, useCapture){
    if (elm.addEventListener)
    {
      elm.addEventListener(evType, fn, useCapture);
      return true;
    } else if (elm.attachEvent) {
      var r = elm.attachEvent('on' + evType, fn);
      return r;
    } else {
      elm['on' + evType] = fn;
    }
  }

The key here is the way addEvent adds event listeners to the document.

SliceHost + Deprec Plug-in

Enrique Delgado — Tue, 01 May 2007 10:00:00 -0500

I’ve recently purchased a slice at SliceHost and started to use the Deprec plug-in for Rails for my apps.

Thanks to the awesome Top Funky free peepcode screencast I was able to start deploying applications (including the entire Rails stack) quickly and in a predictable manner.

Check out the screencast for details, but this is my basic recipe to setup a new application. These steps will create a sample rails application, setup apache, mongrel, and deploy (with migrations!):

rails mykillerapp
deprec --apply-to .
Edit your config/deploy.rb file.
cap deprec_setup
cap setup_scm
cap deploy_with migrations
cap restart_apache

And you are done! Subsequent releases are even easier:

cap deploy_with_migrations

Pretty good eh?

Interactive Ruby Console Tip: Remember the last X commands

Enrique Delgado — Wed, 25 Apr 2007 10:47:00 -0500

This is an excellent tip by Mike Clark to make IRB remember the last X number of commands even after you exit and restart IRB.

This is great when developing and after modifying a model, you don’t have to re-type everyting once again :)

“Simply add the code below to your ~/.irbrc file. Then you can use up-arrow to cycle through the history, even after restarting IRB. It relies on the built-in history of readline, so you’ll need readline installed. The code below also enables completion using the TAB key”

IRB.conf[:PROMPT_MODE] = :SIMPLE

require 'irb/completion'

IRB.conf[:AUTO_INDENT] = true

# Session History

HISTFILE = "~/.irb.hist" unless defined? HISTFILE
MAXHISTSIZE = 100 unless defined? MAXHISTSIZE

begin
if defined? Readline::HISTORY
histfile = File::expand_path(HISTFILE)
if File::exists?(histfile)
lines = IO::readlines(histfile).collect { |line| line.chomp }
Readline::HISTORY.push(*lines)
end

Kernel::at_exit {
lines = Readline::HISTORY.to_a.reverse.uniq.reverse
lines = lines[-MAXHISTSIZE, MAXHISTSIZE] if lines.nitems >
MAXHISTSIZE
File::open(histfile, File::WRONLY|File::CREAT|File::TRUNC) {|f|
lines.each {|line| f.puts line }
}
}
end
end

New home!

Enrique Delgado — Mon, 23 Apr 2007 15:46:00 -0500

Hi All,

Welcome to the brand-spanking new home for all my blogging needs. It’s better, it’s faster, we rebuilt it, we had the technology :p