You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@myfaces.apache.org by Apache Wiki <wi...@apache.org> on 2006/05/05 17:35:10 UTC

[Myfaces Wiki] Update of "JavascriptWithJavaServerFaces" by AndrewRobinson

Dear Wiki user,

You have subscribed to a wiki page or wiki category on "Myfaces Wiki" for change notification.

The following page has been changed by AndrewRobinson:
http://wiki.apache.org/myfaces/JavascriptWithJavaServerFaces

The comment on the change is:
Added code to execute a commandLink from JavaScript

------------------------------------------------------------------------------
  
  The key to successful javascripting with JSF is to understand what is being rendered. Some basic understanding of javascipt goes a long way as well. Also be extra careful with the syntax, as most IDE do not have any support for Javascript. If you made a syntax error - for example missing out a closing bracket, your codes will simply fail silently.
  
+ 
+ --------------------------------------------------------
+ 
+ === Using javascript and command link's to submit a form from a control event ===
+ 
+ It is quite often that you may want to submit immediately from a control (combo box changes, radio button is selected, etc.). There is no easy way to get a specific action to execute when this happes. One way is via JavaScript and hidden command links.
+ 
+ JavaScript (tested on IE and FireFox):
+ {{{
+ function clickLink(linkId)
+ {
+   var fireOnThis = document.getElementById(linkId)
+   if (document.createEvent)
+   {
+     var evObj = document.createEvent('MouseEvents')
+     evObj.initEvent( 'click', true, false )
+     fireOnThis.dispatchEvent(evObj)
+   }
+   else if (document.createEventObject)
+   {
+     fireOnThis.fireEvent('onclick')
+   }
+ }
+ }}}
+ 
+ Then add a hidden link to your page (use CSS to ensure it is not visible to the user):
+ {{{
+ <t:commandLink id="hiddenLink" forceId="true" style="display:none; visibility: hidden;" action="#{put your action here}" actionListener="#{put action listener here}">
+ <!-- parameters, more action listeners, etc. -->
+ </t:commandLink>
+ }}}
+ 
+ You can see the use of "forceId". The reason for this is that we will be referencing this link using JavaScript and we need the ID and the client ID of a component is not easy to get from a JSF view.
+ 
+ Here is a check box control that will submit on change:
+ {{{
+ <t:selectBooleanCheckbox value="#{bean value goes here}" onclick="clickLink('hiddenLink');" /> 
+ }}}
+ 
+ Andrew Robinson
+ 
+ --------------------------------------------------------
+