This is the first of a series of tutorials on using Bootstrap radio buttons in the wild to filter real datasets in concert with other commonly-used UI components like DataTables and jQuery UI.
Part 1: Converting a classic input radio to the Bootstrap label
Filtering tables of data is the central task of many a business web-app. DataTables are searchable by default, but records often beg to be batch-filtered into several status modes like: current | archived | all.
Bootstrap Radio Buttons provide a nice, clean look, but many developers shy away from them due to unfamiliarity with their CSS label-based class manipulation and/or compatibility issues with other component libraries like jQuery UI.
Bootstrap checkbox and radio btn-groups work ‘out of the box’, but the simple activation of a default button decouples active button highlighting from the input tag checked state. In this case, the active label class must be handled manually, but the docs don’t explain how, so a stack-overflow of posts for dev-help ensues.
How To: Bootstrap-style radio btn-group-ies
- a label tag must enclose each input tag
- only the label is visible: text & style are defined by Bootstrap CSS – classic radio/checkbox control is not displayed
- a div tag should enclose all markup (this is especially important when iterating loops)
In this JSFiddle Example, you can view the de-coupled (broken) Bootstrap state by uncommenting the first line of the toggleActive method.
var toggleActive = function(activate)
{
//return; // uncomment this line to see the de-coupled (broken) Bootstrap state
// de-activate any existing selection
$('#record-filters').find('.btn-primary').each(function(index, element) {
$(element).removeClass('active');
});
activate.addClass('active');
}
Avoid jQuery UI conflicts:
Anyone who has delved into the wealth of threads asking whether Bootstrap and jQuery UI can be used together will quickly find that there are a range of answers from ‘yes, absolutely’ to ‘no, absolutely not’. As usual, the truth lies between the extremes.
Here are a few simple rules-of-thumb to avoid conflicts between Bootstrap and jQuery UI:
- include jQuery UI before Bootstrap
- update to recent version of Bootstrap > 3.0.x
- download a custom build of each library excluding widgets/modules, e.g.:
- update standard Bootstrap to v3.3.6
- update jQuery UI v1.11.4 with custom build excluding:
- Effects (all components)
- Widgets: Button, Dialog, and Spinner
- if all else fails, consider using a pre-combined library like jquery-ui-bootstrap or ‘.widget.bridge’ plug-in
Parts 2 and 3 of this tutorial series will describe how to handle disabled radio-button state and how to co-ordinate dynamic sets of radio buttons on a single form.
