type=page
status=published
title=Loading JavaScript as a Resource
next=jsf-ajax011.html
prev=jsf-ajax009.html
~~~~~~
= Loading JavaScript as a Resource


[[GKAAM]]

[[loading-javascript-as-a-resource]]
Loading JavaScript as a Resource
--------------------------------

The JavaScript resource file bundled with JavaServer Faces technology is
named `jsf.js` and is available in the `javax.faces` library. This
resource library supports Ajax functionality in JavaServer Faces
applications.

If you use the `f:ajax` tag on a page, the `jsf.js` resource is
automatically delivered to the client. It is not necessary to use the
`h:outputScript` tag to specify this resource. You may want to use the
`h:outputScript` tag to specify other JavaScript libraries.

To use a JavaScript resource directly with a `UIComponent`, you must
explicitly load the resource as described in either of the following
topics:

* link:#GKAFI[Using JavaScript API in a Facelets Application] – Uses the
`h:outputScript` tag directly in a Facelets page
* link:#GKIPX[Using the @ResourceDependency Annotation in a Bean Class]
– Uses the `javax.faces.application.ResourceDependency` annotation on a
`UIComponent` Java class

[[GKAFI]]

[[using-javascript-api-in-a-facelets-application]]
Using JavaScript API in a Facelets Application
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

To use the JavaScript resource API directly in a web application, such
as a Facelets page:

1.  Identify the default JavaScript resource for the page with the help
of the `h:outputScript` tag.
+
For example, consider the following section of a Facelets page:
+
[source,oac_no_warn]
----
<h:form>
    <h:outputScript name="jsf.js" library="javax.faces" target="head"/>
</h:form>
----
+
Specifying the target as `head` causes the script resource to be
rendered within the `head` element on the HTML page.
2.  Identify the component to which you would like to attach the Ajax
functionality.
3.  Add the Ajax functionality to the component by using the JavaScript
API. For example, consider the following:
+
[source,oac_no_warn]
----
<h:form>
    <h:outputScript name="jsf.js" library="javax.faces" target="head">
    <h:inputText id="inputname" value="#{userBean.name}"/>
    <h:outputText id="outputname" value="#{userBean.name}"/>
    <h:commandButton id="submit" value="Submit"
                     onclick="jsf.ajax.request(this, event,
                              {execute:'inputname',render:'outputname'});
                              return false;" />
</h:form>
----
+
The `jsf.ajax.request` method takes up to three parameters that specify
source, event, and options. The source parameter identifies the DOM
element that triggered the Ajax request, typically `this`. The optional
event parameter identifies the DOM event that triggered this request.
The optional options parameter contains a set of name/value pairs from
link:#GKAIW[Table 13-5].
+
[[sthref73]][[GKAIW]]

*Table 13-5 Possible Values for the Options Parameter*

[width="70%",cols="15%,55%"]
|=======================================================================
|*Name* |*Value*
|`execute` |A space-delimited list of client identifiers or one of the
keywords listed in link:jsf-ajax003.html#GKNLK[Table 13-2]. The
identifiers reference the components that will be processed during the
Execute phase of the lifecycle.

|`render` |A space-delimited list of client identifiers or one of the
keywords listed in link:jsf-ajax003.html#GKNLK[Table 13-2]. The
identifiers reference the components that will be processed during the
render phase of the lifecycle.

|`onevent` |A `String` that is the name of the JavaScript function to
call when an event occurs.

|`onerror` |A `String` that is the name of the JavaScript function to
call when an error occurs.

|`params` |An object that may include additional parameters to include
in the request.
|=======================================================================

+
If no identifier is specified, the default assumed keyword for the
`execute` attribute is `@this`, and for the `render` attribute it is
`@none`.
+
You can also place the JavaScript method in a file and include it as a
resource.

[[GKIPX]]

[[using-the-resourcedependency-annotation-in-a-bean-class]]
Using the @ResourceDependency Annotation in a Bean Class
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Use the `javax.faces.application.ResourceDependency` annotation to cause
the bean class to load the default `jsf.js` library.

To load the Ajax resource from the server side:

1.  Use the `jsf.ajax.request` method within the bean class.
+

[width="100%",cols="100%",]
|=======================================================================
a|
*Note*:

This method is usually used when creating a custom component or a custom
renderer for a component.

|=======================================================================

+
The following example shows how the resource is loaded in a bean class:
+
[source,oac_no_warn]
----
@ResourceDependency(name="jsf.js" library="javax.faces" target="head")
----
