There and Back Again

HTML_AJAX Feature of the Week: Javascript Behaviors

I’m trying out something new here, every week i’m going to write a short post describing an HTML_AJAX feature. Hopefully this will get some people started using the new features and maybe even get some more developers helping out with the project. It will also give me a place to try out some material for my upcoming AJAX book.

JavaScript Behaviors

JavaScript Behaviors are pieces of JavaScript code applied to DOM elements through the use of CSS selectors.

HTML_AJAX ships with a slightly modified version of the Behaviour javascript library. The slight modification is the replacement of the css parsing/selecting code with Dean Edwards cssQuery() library. This was done for a couple reasons, first the css code in behavior is under an unknown license and Dean’s code supports more of the css selector including most of css3.

I also used the American spelling of Behavior instead of the British (darn extra u’s)

Turning Behaviors on

Assuming you already have HTML_AJAX installed all you need to use behaviors is add “behavior” to your list of libraries.

If you just wanted the behavior library you could do:


Or including it with some of the other HTML_AJAX pieces


Adding Behavior Rules

In most cases you’ll want to put your behaviors in their own JavaScript file, that way they can be reused and they don’t clutter up the html, thats the point of them after all. But you can just toss them in a script block in any file.

An example rule is shown below:

Behavior.register(
        "h1",
        function(element) {
                element.style.color = 'blue';
        }
);

Now this rule is rather worthless since its just setting a style rule, something that css is much better suited for but it does show a couple important things. You have immediate access to the matching elements, this allows you to create new child elements, update properties including innerHTML, and set event handlers.

You can set event handlers using onEvent methods but i prefer to use a couple util methods in HTML_AJAX that map to setEvent etc.

A more useful example which submits all the forms on a page using AJAX is shown below:

Behavior.register(
        "form",
        function(element) {
                var handler = function(e) {
                        var target = HTML_AJAX_Util.eventTarget(e);
                        HTML_AJAX.formSubmit(target,target);

                        // cancel submission in IE
                        e.returnValue = false;
                        // cancel submission in FF
                        if (e.cancelable) {
                                e.preventDefault();
                        }
                }
                HTML_AJAX_Util.registerEvent(element,'submit',handler);
        }
);

There isn’t a lot too see here, we build a function to handle the submit event. It submits the form using HTML_AJAX.formSubmit, the first param is the form to submit, the second is the element to update (The second element is optional but do a bug in 0.3.3 it not being set isn’t detected correctly so you’ll have to upgrade to 0.3.4 to skip it). Then we cancel the normal form submission.

Wrapping it up

These examples show some of the power of behaviors, but there really is a lot more that you can do with it. If you have any tips feel free to leave them on the wiki or as comments to this post.

Run the example.

View the full example Source.

Download the example code.

7 thoughts on “HTML_AJAX Feature of the Week: Javascript Behaviors

  1. Pingback: PHPAvan├žado

  2. xavier

    Hi,

    Haven’t you noticed the sentence next to the link you clicked on to download behaviour ? ” BSD Licensed.”

    I’d say that’s a pretty good hint about the licence, including the one covering the css bit, isn’t it ?

    X+

  3. Joshua Eichorn Post author

    Xavier: read the code, the css part is by a different author, so the author of behavior can’t put it under the bsd license.

  4. AlexeyGfi

    Hi. Please help: is it possible – to register Behavior function to on-line (after page loaded) created object (for example, with function .appendChild() ) ?

    Thank U. Regards, Alexey