timothypowell.net

This article describes how to set event handlers for row elements using Prototype. This is especially handy when dynamically creating new elements on a page.

In this example, we have a data grid displayed as a table element. The id of the table is ‘myTableId’. We are going to set up two event handlers for each table row. On a single mouse click event, we’ll call a function that highlights the selected row. On a double click, we’ll call a function that opens the row data for editing. Both of these functions are omitted for brevity.

function setEventHandlers() {
    //get all row elements under element with id ‘myTableId’
    var rows = $$('#myTableId tr');
    rows.each(function(rowElement) {
        rowElement.observe('click', highlightRow);
        rowElement.observe('dblclick', editRow);
    });
}

Once again, Prototype does the dirty work of handling the differences in event handling between browsers. All we have to do is attach an event handler function to an element using the observe() method, and Prototype handles the rest.

Check out the details on the options available on the Event object in Prototype.

This article describes how to use JavaScript and the Prototype library to validate form fields that can be dynamically added at runtime. For example, let’s say that we have a table and the user can insert one or many new rows. Each row might contain multiple input text fields, which must be validated upon form submission.
(more…)

When using utility functions in Prototype library (e.g., F$), the element name must be surrounded by quotes. Firefox requires it to not include quotes, but IE does not.

This example does not work:

$F(sample);  //DOES NOT WORK!!

This example does work:

$F(‘sample’);  //DOES WORK!

This was tested with Firefox 3 and IE7 using Prototype 1.5.1.