Javascript and Jsf Tutorials

Read The Full Tutorial.

When we use javascript with Html we can quite easily access elements on the page,but when we want to use JavaScript with JSF we need to look at the what the code looks like on the client-side.

First of all, have a look at this code by luxalexis:
[HTML]<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://geportal.ge.com/faces" prefix="g" %>

<f:view>
<script type="text/javascript">
function valid(form)
{

var Value = form["FormName:name"].value;
if (Value == "")
{
alert("Please enter Subject");
form["FormName:name"].focus();
return false;
}
form.submit();
return true;
}
</script>
<h:form id="FormName">

<h:outputText styleClass="jsf-output-text" value="Enter your name"/>
<h:panelGroup>
<h:inputText styleClass="jsf-output-text" id="name" value="#

{BeanName.attribute}" required="true"/>
<h:commandButton value="Submit" type="submit" styleClass="jsf-command-button"

action="#{BeanName.function}" onclick="return valid(this.form);"/>
</h:panelGroup>

</h:form>
</f:view>[/HTML]The code validates the input field (checks that it has a value entered) before the form is submitted.

How do we access the text field to check. For that, we need to see how the JSF component renders on the client-side, in particular the name/id. The input field:

<h:inputText styleClass="jsf-output-text" id="name" value="#{BeanName.attribute}" required="true"/>

<input type="text" ... id="FormName:name" name="FormName:name" ...>

The code above makes use of the passed form variable: form["FormName:name"]. This could also have been:

   1. var Value = document.getElementById("FormName:name").value;
   2. // or alternatively:
   3. form.elements["FormName:name"].value;

Of course, the form validation could be performed via an onsubmit, i.e.

   1. <h:form id="FormName" onsubmit="return valid(this)">

Conclusion:

In this tutorial we know how we use JavaScript to access JSF components. The trick is to understand how JSF renders the components into HTML. Once we access the elements with JavaScript, we can validate, show/hide, and otherwise modify the elements as we can with normal HTML. This is true of any server-side generated code.