Example 1
Add an onclick listener to all links. Adapted from How jQuery Works:
<ui:define name="extraHeaderContent">
<a4j:loadScript src="resource://jquery.js" />
<script language="javascript">
// use CDATA to prevent greater than in if statements being
// interpreted as the start of a tag
//<![CDATA[
// ask jQuery to do what follows after the page is loaded
jQuery(document).ready(function(){
// find all links (a) and set a click handler
jQuery("a").click(function(event){
alert("Thanks for visiting!");
// do not go to the link
event.preventDefault();
});
});
//]]>
</script>
</ui:define>
Example 2
Allow users to paste from Excel into a series of JSF inputText fields. The example will only work when using Microsoft Internet Explorer browser due to the use of window.clipboardData. It is possible to make the below usable on other browsers but that was not one of my requirements. It pastes a series of up to 12 numbers copied from Excel:
<ui:define name="extraHeaderContent">
<a4j:loadScript src="resource://jquery.js" />
<script language="javascript">
//<![CDATA[
// wait until document is loaded before trying to find DOM elements
jQuery(document).ready(function() {
for (var i=0; i<12; i++) {
bindField(i);
}
});
function bindField(inputFieldNum) {
jQuery("#form\\:adjId"+inputFieldNum).bind('paste', function() {
var el = $(this);
setTimeout(function() {
clip(inputFieldNum);
}, 0);
});
}
function clip(firstInputFieldNum) {
//http://stackoverflow.com/questions/1095131/paste-excel-data-into-html-table
// get the clipboard text
var clipText = window.clipboardData.getData('Text');
// split into cells
//Excel separates columns with tabs (chr(9)), rows with CR (chr(13)), but cater for various splitter chars
var clipCells = clipText.split(/[\r\n\t,]/);
var numCells = clipCells.length;
if (numCells<=(12-firstInputFieldNum)) {
// overwrite each month's adjustment figure with the clipCells
for (var i=0; i<numCells; i++) {
var elementName = 'form:adjId'+(firstInputFieldNum+i);
document.getElementById(elementName).value = clipCells[i];
}
} else {
alert('Too many cells');
}
}
//]]>
</script>
</ui:define>
