First, get it here ...
Please leave commments/questions on jquery google group at : http://groups.google.com/group/jquery-en.
UPDATE: Fixed bug in ajax extension whereby it was holding a reference to previous data params. Also updated to work with jquery 1.2.6 in demo pack.
UPDATE 06-09-2008 : Breaking change: I inverted dependency from child==>parent to allow unique data sources for each target of a cascade. See distribution for details.
A common task is quickly fetching data to respond to changes on web forms. The canonical example is cascading select forms that provide options based on previous selections. However, there are numerous variants of this simple scenario that could be simplified using jquery's plugin pattern. Really, the goal is simple...when something happens on my page, get some data from somewhere and put in something else, with each item looking like I specify.
Being inspired by the awesome autocomplete plugin here, I adapted their compact code and event delegation pattern to create a simple but powerful plugin for cascading form results into their targets.
While the initial goal was simply cascading select lists and being able to chain them together, the event delegation made so simple in jquery quickly expanded the potential.
You can cascade from any kind of element into any other kind of element (for the most part). You can also provide extensions to the plugin easily enough to handle just about anything and it just weighs in at around 100 lines of code. Packed, it's 1.3 kB.
Events
There are only two events, loading.cascade and loaded.cascade triggered. You may specify what event will fire the cascade on the parent element. To bind to the cascade events, use the chained binding syntax common in jquery...this lets the control scale without munging up the options. For a great discussion of this technique see here and here .
Usage
Here are some examples on how to use it:
With all data being json, using the following structure:
{'when':'selectedValue','value':'itemValue','text':'itemText'}
with static list on page:
$('#myChildSelect').cascade('#myParentSelect', {
list: [{'when':'A','value':'A1','text':'A1'},{'when':'B','value':'B1','text':'B1'}],
template: function(item) { return "<option value='" + item.value + "'>" + item.text + "</option>"; },
match: function(selectedValue) { return this.when == selectedValue; }
});
with ajax call (using .ext ):
$('#myChildSelect').cascade('#myParentSelect', {
ajax: '/my/url/action',
template: function(item) { return "<option value='" + item.value + "'>" + item.text + "</option>"; },
match: function(selectedValue) { return this.when == selectedValue; }
});
with chained cascading:
$('#myFirstChildSelect').cascade('#myParentSelect', {
ajax: {url: '/my/url/action' },
template: function(item) { return "<option value='" + item.value + "'>" + item.text + "</option>"; },
match: function(selectedValue) { return this.when == selectedValue; }
});
$('#mySecondChildSelect').cascade('#myFirstChildSelect', {
ajax: {url: '/my/url/action' },
template: function(item) { return "<option value='" + item.value + "'>" + item.text + "</option>"; },
match: function(selectedValue) { return this.when == selectedValue; }
});
add a firstOption for optional lists using the loaded.cascade event:
jQuery("#myChildSelect").cascade("#myParentSelect",{
timeout: 100,
list: myDataSource,
template: function(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; },
match: function(selectedValue) { return this.When == selectedValue; }
})
.bind("loaded.cascade",function(e,parent) { jQuery(this).prepend("<option value='empty' selected='true'>--Select--</option>");});
The download has a sample page with lots of different setups and usages. Please let me know if you find any bugs or questions. This is my first plugin for jquery so I may be missing some hidden jquery goodness to make the code more elegant.
I will try to get a working demo up soon.
Posted
05-25-2008 2:46 AM
by
Michael Nichols