How to use jquery.hotkeys.js in ADF application

Question

Hello all,
I am developing an ADF application where i am trying to use jquery.hotkeys.js file. I have created a folder js inside ViewController\Web Content\js and i have added jquery.hotkeys.js file inside that folder.
Now i have created a jspx page and inside that i have 3 input text and 1 submit button now I am trying to use keyboard shortcuts say ALT+F8 to clear the form fields. Here is my full jspx form
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:inputText label="First Name" id="it1" value="#{MyBean2.firstName}">
<af:clientListener method="clearAll" type="keyDown"/>
</af:inputText>
<af:inputText label="Last Name" id="it2" value="#{MyBean2.lastName}">
<af:clientListener method="clearAll" type="keyDown"/>
</af:inputText>
<af:inputText label="EmailID" id="it3" value="#{MyBean2.emailId}">
<af:clientListener method="clearAll" type="keyDown"/>
</af:inputText>
<af:commandButton text="Submit" id="cb1"
action="#{MyBean2.callSubmit}"
binding="#{MyBean2.cb1}">
<af:clientListener method="clearAll" type="keyDown"/>
</af:commandButton>
</af:form>
<f:facet name="metaContainer">
<af:resource type="javascript" source="/js/jquery.hotkeys.js"/>
<af:resource type="javascript">
function clearAll() {
$("*").bind('keydown', 'Alt+F8', function (evt) {
clearForm();
evt.stopPropagation();
return false;
function clearForm() {
alert('3');
curElm = document.activeElement;
var frm = $(curElm).closest('form');
var frmname = ($(frm).attr('name'));
document.forms[frmname].reset();
document.getElementById('frmname::content').reset();
document.getElementById('f1::content').reset();
$("input:visible:enabled:first").focus();
</af:resource>
</f:facet>
</af:document>
</f:view>
</jsp:root>
But that is not working. Can anyone help?
Thanks

Answer 1

My requirement is the form should get cleared on pressing ALT + F8.
Here is my updated jspx page:-
<?xml version='1.0' encoding='windows-1252'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
<jsp:directive.page contentType="text/html;charset=windows-1252"/>
<f:view>
<af:document id="d1">
<af:form id="f1">
<af:inputText label="First Name" id="it1" value="#{MyBean2.firstName}">
</af:inputText>
<af:inputText label="Last Name" id="it2" value="#{MyBean2.lastName}">
</af:inputText>
<af:inputText label="EmailID" id="it3" value="#{MyBean2.emailId}">
<af:clientListener method="clearAll" type="keyDown"/>
</af:inputText>
<af:commandButton text="Submit" id="cb1"
action="#{MyBean2.callSubmit}"
binding="#{MyBean2.cb1}">
<af:clientListener method="clearAll" type="keyDown"/>
</af:commandButton>
</af:form>
<f:facet name="metaContainer">
<af:resource type="javascript" source="/js/jquery.hotkeys.js"/>
<af:resource type="javascript" source="/js/jquery-1.4.4.min.js"/>
<af:resource type="javascript">
function clearAll() {
jQuery('*').bind('keydown', 'Alt+F8', function (evt) {
clearForm();
evt.stopPropagation();
return false;
function clearForm() {
curElm = document.activeElement;
var frm = $(curElm).closest('form');
var frmname = ($(frm).attr('name'));
alert(frmname);
document.forms[frmname].reset();
$("input:visible:enabled:first").focus();
</af:resource>
</f:facet>
</af:document>
</f:view>
</jsp:root>
But still I am not able to get the desired functionality. Am i missing something here?
Thanks