Frank Ralf (talk | contribs) |
Frank Ralf (talk | contribs) (→jQuery) |
||
Line 115: | Line 115: | ||
</script> | </script> | ||
</code> | </code> | ||
Advantages: | |||
* Always working with sets -> inherent looping. | |||
* Chaining of functions. | |||
* Provides shorthand (and cross browser) access to native JavaScript functions. | |||
== What's left to do? == | == What's left to do? == |
Revision as of 06:56, 22 June 2009
Checkboxes: Show only selected
This article was inspired by the General Developer forum discussion on "Interface design input please").
The task at hand is to make a possibly long check list of teachers more handy by showing only the selected items:
Nothing fancy, but a good opportunity to compare different approaches using JavaScript:
- Home made JavaScript
- Using YUI, Moodle's default JavaScript library
- Using jQuery, another very popular JavaScript library
Plain JavaScript
That is the original code. There's a lot of DOM traversal and node counting going on due to browser incompatibilities.
<script type="text/javascript">
var teacherslist=document.getElementById('pe_teachers')
if(teacherslist.childNodes[0].nodeType==3){
//this javascript engine is counting blank text nodes
teacherslist=teacherslist.childNodes[4];
var start=2;
var step=2;
}else{
teacherslist=teacherslist.childNodes[2];
var start=1;
step=1;
}
function parentseve_toggleonlyselected(state){
var tmp=teacherslist.childNodes;
var listlength=teacherslist.childNodes.length;
if(state){
for(var i=listlength-start;i>=0;i=i-step){
if(!tmp[i].childNodes[1].firstChild.firstChild.checked){
tmp[i].style.display='none';
}
}
} else {
for(var i=listlength-start;i>=0;i=i-step){
tmp[i].style.display='block';
}
}
}
parentseve_toggleonlyselected(document.getElementsByName('showonlyselected')[0].checked);
</script>
YUI
Using Moodle's default JavaScript library YUI we can overcome those browser inconsistencies. We also move the inline "onclick" event handler to the JavaScript. (Note that the required YUI libraries are already part of a standard Moodle installation.)
require_js(array(
'yui_yahoo',
'yui_dom-event',
)
);
<script type="text/javascript">
// Add the event listener to the checkbox
var addclick = function(){
YAHOO.util.Event.addListener('id_showselected', 'click', parentseve_toggleonlyselected);
};
// Get a list of all checkboxes
var teachers = YAHOO.util.Dom.getElementsByClassName('pe_teacher', 'input', 'pe_teachers');
var parentseve_toggleonlyselected = function() {
for (var i=0; i < teachers.length; i++){
// Get a list of the form items for each checkbox
var formitem = YAHOO.util.Dom.getAncestorByClassName(teachers[i], 'fitem');
// Hide unchecked teachers if "Show only selected" is checked
if (YAHOO.util.Dom.get('id_showselected').checked){
if (!teachers[i].checked){
formitem.style.display='none';
}
} else {
formitem.style.display='inline';
};
};
};
// Initialise
YAHOO.util.Event.onDOMReady(addclick);
</script>
jQuery
The jQuery code for the same functionality is significantly shorter. And you get some additional cool effects with the show() function. (Note that the required jQuery library is not part of a standard Moodle installation so you have to provide it yourself.)
require_js(array(
'jquery/jquery-1.3.2.min.js',
)
);
<script type="text/javascript">
$(document).ready(function(){
$("input[name='showonlyselected']").click(function(){
if(this.checked){
$('.pe_teacher:not(:checked)').parents('.fitem').hide('normal');
} else {
$('.fitem').show('slow');
};
});
});
</script>
Advantages:
- Always working with sets -> inherent looping.
- Chaining of functions.
- Provides shorthand (and cross browser) access to native JavaScript functions.
What's left to do?
As this feature will be only available to the user when she has JavaScript activated in her browser we should display the "Show only selected" checkbox also only when JavaScript is available.