a4j:jsFunction

Component identification parameters

Name | Value
--- | ---
component-type | org.ajax4jsf.Function
component-family | org.ajax4jsf.components.ajaxFunction
component-class | org.ajax4jsf.component.html.HtmlajaxFunction
renderer-type | org.ajax4jsf.components.ajaxFunctionRenderer

## Creating on a page

Simple component definition example:

Example:

    ...
    <head>
    	<script>
    		<!--There is some script named "myScript" that uses parameters which will be taken from server-->
    	</script>
    </head>
    <body>
         ...
         <a4j:jsFunction data="#{bean.someProperty}" name="callScript" oncomplete="myScript(data.subProperty1, data.subProperty2)"/>
         ...
    </body>
    ...

The script `"myScript"` is called after `bean.someProperty` data is returned from server(e.g. It'll be object with two subproperties).

## Creating the Component Dynamically Using Java

Example:

    import org.ajax4jsf.component.html.HtmlajaxFunction;
    ...
    HtmlajaxFunction myFunction = new HtmlajaxFunction();
    ...

## Key attributes and ways of usage

As the component uses Ajax request to get data from server - it has all common Ajax Action attributes. Hence, "action" and "actionListener" can be invoked, and reRendering some parts of the page fired after calling function.

When using the <a4j:jsFunction> it's possible to initiate the Ajax request from the JavaScript and perform partial update of a page and/or invoke the JavaScript function with data returned by Ajax response.

    ...
    <body onload="callScript()">
        ...
        <h:form>
          ...
            <a4j:jsFunction name="callScript" data="#{bean.someProperty1}"
                reRender="someComponent" oncomplete="myScript(data.subProperty1, data.subProperty2)">
                 <a4j:actionparam name="param_name" assignTo="#{bean.someProperty2}"/>
            </a4j:jsFunction>
            ...
        </h:form>
        ...
    </body>
    ...

The <a4j:jsFunction> allows to use <a4j:actionparam> or pure <f:param> for passing any number of parameters of the JavaScript function into Ajax request. <a4j:jsFunction> is similar to <a4j:commandButton> , but it could be activated from the JavaScript code. It allows to invoke some server side functionality and use the returned data in the JavaScript function invoked from "oncomplete" attribute. Hence it's possible to use <a4j:jsFunction> instead of <a4j:commandButton> . You can put it anywhere, just don't forget to use <h:form>... </h:form> around it.

Information about the "process" attribute usage you can find " Decide what to process " guide section.

## Relevant resources links

Here you can find additional information and example on how to use <a4j:jsFunction> with JSON.

On the component Live Demo page you can see the example of <a4j:jsFunction> usage and sources for the given example.

On RichFaces LiveDemo page you can found some additional information about <f:param> component.