Java Reference
In-Depth Information
</h:inputText>
<h:commandButton id="submit" value="Submit" >
<!--<f:ajax execute="userNo" render="result errors1"
/>-->
<f:ajax execute="userNo" render="result errors1"
onevent="msg"/>
</h:commandButton>
</p>
<p><h:outputText id="result" style="color:blue"
value="#{userNumberBean.response}"/>
</p>
<h:message id="errors1" showSummary="true" showDe-
tail="false"
style="color: #d20005;
font-family: 'New Century Schoolbook', serif;
font-style: oblique;
text-decoration: overline"
for="userNo"/>
</h:form>
</h:body>
The most important change is in the
h:commandButton
tag. The
action
attribute is
removed from the tag, and
f:ajax
tag is added.
The
f:ajax
tag specifies that when the button is clicked, the
h:inputText
compon-
ent with the
id
value
userNo
is executed. The components with the
id
values
result
and
errors1
are then rendered. If that was all you did (as in the commented-out version
of the tag), you would see the output from both the
result
and
errors1
components,
although only one output is valid; if a validation error occurs, the managed bean is not
executed, so the
result
output is stale.
To solve this problem, the tag also calls the JavaScript function named
msg
, in the file
ui.js
, as described in the next section. The
h:outputScript
tag at the top of the
form calls in this script.
The
ui.js
JavaScript File
The
ui.js
file specified in the
h:outputScript
tag of the
ajaxgreet-
ing.xhtml
file is located in the
web/resources
directory of the application. The
file contains just one function,
msg
:
