HTML and CSS Reference
In-Depth Information
■
While tinkering with Ajax requests in JSF application you will eventually get an httpError stating “The Http
Transport returned a 0 status code. This is usually the result of mixing ajax and full requests. This is usually undesired,
for both performance and data integrity reasons” (see Figure
11-2
). This warning message may seem cryptic but all it is
saying is that you try trying to execute an Ajax request while you also perform a full HTTP request. This could occur if you
forget to include return false in the end of onclick events that invoke Ajax requests, e.g.
Tip
WronG:
<h:outputLink onclick="do-some-ajax();" />
rIGHT:
<h:outputLink onclick="do-some-ajax(); return false;" />
You can also execute the request lifecycle on selected components by using the execute option as shown in
Listing 11-7.
Figure 11-2.
Error shown when executing Ajax and full HTTP requests at the same time
Listing 11-7.
Using the Execute Option to Execute the JSF Request Lifecycle on Selected Components
<h:form id="my-name-form">
<h:outputLink onclick="saveName(this, event); return false;">Save name</h:outputLink>
<h:inputText id="my-name" value="#{javaScriptApiDemo.myName}" />
<h:panelGroup id="my-name-display">Your name is: #{javaScriptApiDemo.myName}</h:panelGroup>
</h:form>
<script type="text/javascript">
function saveName(source, event) {
jsf.ajax.request(source, event, {
execute: '@form',
render: 'my-name-form:my-name-display'
});
}
</script>
The example in Listing 11-7 shows an input field where the user can enter her name. The name is mapped to
a property called
myName
on the
javaScriptApiDemo
managed bean. The name currently stored in the
myName
property is displayed below the input field inside a panel group. When the “Save name” link is clicked the
saveName
function is invoked. The Ajax request in the
saveName
function has the option execute set to
@form
, indicating that
the form from which the request originates should execute the JSF request lifecycle. Upon returning from the
request the
my-name-display
panel is updated inside the
my-name-form
form. It is worthwhile noting that Listing 11-7
is completely equivalent to Listing 11-8. The choice between using the
<f:ajax>
tag and the JavaScript API is up to
