How to add a Wiki page

[Yee CN]

Hi,   I spent a good 40 minutes searching but could not figure out how to add a page to myfaces wiki. I am new to wiki – but I think perhaps the wiki help need rewriting.   Below is what I intend to add. Please feel free to improve.   Regards, Yee -------------   _javascript_WithJavaServceFaces   Is there a place for _javascript_ with JSF? I would say definitely yes. One very common scenario is to introduce a confirmation dialog associated with an action (for example deleting a record, canceling an edit). Another common scenario is to perform client side validation thus saving a round trip to the server. An example is to check that the ‘Password’ and ‘Confirm password’ are equal before posting back to the server.   The article describe how to triggers client side _javascript_ functions with the <h:commandLink> and the <h:commandButton> components.   <h:commandLink>   Associating a _javascript_ with a commandLink is not difficult, however in order to do it successfully you need to understand how the <h:commandLink> component is rendered by JSF.   The example below illustrates how the <h:commandLink> is rendered in html:   <h:form id=”userForm”> <h:commandLink id=”lnkDeelteUser” value=”delete” action=""> </h:form> --------------------------------------------------------- <a href="" > "clear_userForm(); document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser'; if (document.forms['userForm'].onsubmit){       if (document.forms['userForm'].onsubmit()) document.forms['userForm'].submit(); } else {       document.forms['userForm'].submit(); } return false; " id="userForm:lnkDeleteUser">delete</a>   -------------------------------------------------------------------------------------   There are a few points to note: The <h:commandLink> is rendered as a hyperlink, <a href /> The hyperlink itself is “#”, it is basically a dummy value. JSF generates a block of _javascript_ and it is tied to the ‘onclick’ event. Disregarding the details, it basically calls submit() which post the form to the server. Line 3 is of particular interest – the id of this particular component (“userForm:lnkDeleteUser”) is saved in a hidden field. This is how the JSF engine knows which particular component does the postback and to invoke at the server side actions appropriately.   Most JSF component allows us to inject _javascript_ associated with various client side DHTML events like onclick, ondoubleclick, onfocus etc. With <h:commandLink>, since JSF is already generating _javascript_ associated with the onclick event, this is where we need to inject our own _javascript_ functions as well.   Below illustrates how to inject a line of code to open confirm dialog window, and the rendered HTML: ------------------------------------------------------------------------------------ <h:form id=”userForm”> <h:commandLink id=”lnkDeelteUser” value=”delete” (!confirm('Are you sure you want to delete this record?')) return false; ” action=""> </h:form> --------------------------------------------------------- <a href="" > "if (!confirm('Are you sure you want to delete this record?')) return false; clear_userForm(); document.forms['userForm'].elements['userForm:_link_hidden_'].value='userForm:lnkDeleteUser'; if (document.forms['userForm'].onsubmit){       if (document.forms['userForm'].onsubmit()) document.forms['userForm'].submit(); } else {       document.forms['userForm'].submit(); } return false; " id="userForm:lnkDeleteUser">delete</a> ------------------------------------------------------------------------------------- Another point to note is that the _javascript_ block should not return true under any circumstance. It is does so, the browser will proceed to perform <a href="" – which is redirecting the browser to the dummy “#” page.   <h:commandButton>   The command button is a little simpler. Below illustrates how to inject a confirmation dialog with <h:commandButton> and how it is rendered in HTML.   <h:commandButton id=”btnCancel” value=”Cancel”       (!confirm('You will lose all changes made. Are you sure?') return false; /> ------------------------------------------------------- <input id="userForm:btnCancel" name="userForm:btnCancel"       type="submit" value="Cancel"       > if (!confirm('You will lose all changes made. Are you sure?') return false; clear_userForm(); "/> ---------------------------------------------------------------------------------------- Here the commandButton is rendered as a HTML submit button. If the _javascript_ block returns true then the form is submitted as usual. If it returns false then the form submission is aborted.   The key to successful _javascript_ing with JSF is to understand what is being rendered. Some basic understanding of javascipt goes a long way as well.