jQuery hijack plugin - nice addition to jQuery UI 1.7

I have just published a jQuery plugin that I've used with great success on many of my last projects - jQuery hijack. What hijacking is and why is it of any importance?

The amazing world of widgets

When loading a widget on a page, say tab or dialog, we are often loading its content from another URL via AJAX. This is a common technique and nothing new - we may e.g. use jQuery.load() or jQuery.tabs() from Jquery UI to achieve this. Let's say we are loading a table containing a product list to a tab. In this table we have some columns so we can sort it by clicking on a column header and page the results by using the pager links we developed.

What happens when we click on any link used to e.g. sort or go to next page in our loaded content? It replaces the whole page. The same thing happens when we have e.g. a search form within our tab content and we submit it. Although completely understandable (and there are many ways to avoid it), it's not exactly the best behavior. What can help you - is hijacking. jQuery hijack plugin was designed exactly to come to your rescue.

Hijacking to the rescue

Hijacking or hijaxing is a term used by Chris Thatcher a long time ago in a jQuery UI thread, where he proposed a way of capturing all the links within a widget content and making them reload only that widget. And this is exactly the core functionality of jQuery hijack plugin.

By using the plugin, we can call a simple one function jQuery.hijack() and voila - from now on, all links and forms are hijacked - so paging links in the tab will simply display another page of results in this tab, search form will also display results inline - everything requires only one line of code (usually).

More info

The plugin works flawlessly with jQuery UI widgets, like tabs or dialogs, I also heavily used it with jqModal plugin. This 1KB plugin also allows you to:

• skip hijacking some forms/links
• use click() handlers for links to skip following them at all
• skip submitting forms (validation)
• always run a particular function after reloading content (e.g. to init some objects)

I've created a demonstration page for plugin features where you can see it in action with jQuery UI. You may download the plugin at its Google code page. The plugin is dual licensed under MIT/GPL licenses.

Javascript: The Good Parts presentation

A few days ago Douglas Crockford gave a presentation at Google Tech Talks and it has just been published at Google Tech Talks Youtube channel.

Youtube link

Douglas Crockford is one of my personal gurus when it comes to Javascript. Currently at Yahoo, he's the author of JSON data-interchange format, Javascript verifier JSLint and many books on Javascript. He seems to know more about Javascript internal workings than any other person I am aware of.

In this presentation Douglas speaks about some good parts of Javascript:

• lambda
• dynamic objects
• loose typing
• object literals

and mentions its bad parts, like e.g.:

• global variables
• with statement
• semicolon insertion by JS parser
• null, undefined, false and NaN

The talk is full of examples of tricky JS code, he also describes his famous Module pattern for easy creation of objects with private and public properties and methods. You could also learn what semicolon insertion exactly is and why

return
{
 ok: false
};

does something you'd rather not expect. Douglas describes his personal experience with Javascript in his career and talks about works on next version of ECMAScript standard (ES3.1).

Watching the talk he gave is definately a well-spent time for a Javascript developer. If you've never heard of Douglas, check out his webpage for more information and be sure to check out JSLint - it's a tool that verifies pasted Javascript code and warns about poor programming practices used. Like Douglas said - it WILL hurt your feelings badly ;)

jQuery optionTree demo

This is the demo for my jQuery optionTree plugin.

Update: Version 1.2 of the plugin is now capable of loading trees via AJAX - this is not possible to demonstrate on this blog, so I moved the demonstration to a separate site - see the new demo page.

This jquery plugin converts passed JSON option tree into dynamically created SELECT elements allowing you to choose one nested option from the tree.
It should be attached to a (most likely hidden) INPUT element. It requires an option tree object. Object property names become labels of created select elements, each non-leaf node in the tree contains other nodes. Leaf nodes contain one value - it will be inserted into attached INPUT element when chosen.


The plugin also supports loading additional levels via AJAX calls and preselecting given items at load.

Example 1

<input type="text" name="demo1" />

    var option_tree = {
       "Option 1": {"Suboption":200},
       "Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
             "Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
            }
    };

    $('input[name=demo1]').optionTree(option_tree);

Example 2 - change event and configuration

<input type="hidden" name="demo2" />

    var option_tree = {
       "Option 1": {"Suboption":200},
       "Option 2": {"Suboption 2": {"Subsub 1":201, "Subsub 2":202},
             "Suboption 3": {"Subsub 3":203, "Subsub 4":204, "Subsub 5":205}
            }
    };

    var options = {empty_value: -1, choose: '...'};

    $('input[name=demo2]').optionTree(option_tree, options)
                          .change(function() { alert('Field ' + this.name  + ' = ' + this.value )});

Example 3 - preselected options

<input type="hidden" name="demo3" />

    var option_tree = {
       "Red": {"Default":100},
       "Blue": {"Variant 1": {"Default":100, "Another":101},
        "Variant 2": {"Default":100, "Another":102, "and another":103}
       }
    };

    var options = {preselect: {'demo3': 100}}; // value for default option (include field name)

    $('input[name=demo3]').optionTree(option_tree, options)
                          .change(function() { alert('Field ' + this.name  + ' = ' + this.value )});

More info

Plugin is dual licensed undel MIT / GPL licenses.
Additional information about this plugin is available on its google code pages. You may download the plugin from there or from its jQuery plugin site. It has been tested with jQuery 1.3 and 1.4. Feel free to comment on the plugin and suggest additional features on google code project site.