How to Pass JavaScript Variables as Parameters to Jsf Action Method

How to pass JavaScript variables as parameters to JSF action method?

Let JS set them as hidden input values in the same form.

<h:form id="formId">
    <h:inputHidden id="x" value="#{bean.x}" />
    <h:inputHidden id="y" value="#{bean.y}" />
    <h:commandButton value="submit" onclick="getVars()" action="#{bean.submit}" />
</h:form>

function getVars() {
    // ...
    var x = locationInfo.lng; 
    var y = locationInfo.lat;

    document.getElementById("formId:x").value = x;
    document.getElementById("formId:y").value = y;
}

The command button action method could just access them as bean properties the usual way.

private int x;
private int y;

public void submit() {
    System.out.println("x: " + x);
    System.out.println("y: " + y);
    // ...
}

// Getters+setters.

An alternative is to use OmniFaces <o:commandScript> or PrimeFaces <p:remoteCommand> instead of <h:commandButton>. See also a.o. How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

Trigger a commandButton action with variable passed by javascript in JSF

All I had to do is add the execute parameter in the tag (following this tutorial).
Now the setters are called and the backing beans take the values I want

.xhtml code

<h:form id = "jsfform">
                <h:inputHidden id="childCells" value="#{cellBean.childCellsStr}" />
                <h:inputHidden id="parentCells" value="#{cellBean.parentCellsStr}" />
                <h:commandButton id="button"  style="display: none" action="#{cellBean.children()}">
                    <f:actionListener binding="#{cellBean.checkBtnDisable()}" /> <!--first call the children function, then call the checkBtnDisable -->
                    <f:ajax execute="childCells parentCells" render=":ajaxform"/>
                </h:commandButton>
            </h:form>

Javascript code

    document.getElementById('jsfform:childCells').value = json1;
document.getElementById('jsfform:parentCells').value = json2;
//trigger the button of the form with javascript
document.getElementById('jsfform:button').onclick();

Java Bean

private String childCellsStr;
private String parentCellsStr;
//getters && setters

JSF action method with variable parameter

If you are using EL 2.2+, it's possible.

If you are using older version ot EL, you can use do the following:

<h:commandButton value="Send" action="#{myBean.checkPIN}" />
   <f:param name="parameter" value="123" />
</h:commandButton>

In the managed bean you can retrieve it like:

public void checkPIN() {
   ...
   Map<String, String> parameterMap = (Map<String, String>) externalContext.getRequestParameterMap();
   String param = parameterMap.get("parameter");
   ...
}

Passing javascript variable to java bean

You don't need a form and all this stuff.

<p:remoteCommand name="myRemote" partialSubmit="true" process="@this"  action="#{mapbean.displayLatLong()}"/>

function onClick(e) {
  myRemote([
    { name: 'latt',  value: e.latlng.lat },
    { name: 'longt', value: e.latlng.lng }
  ]);
};

and at server side

Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();

String latt  = params.get("latt");
String longt = params.get("longt");

Passing parameter to JSF action

The <f:param> sets a HTTP request parameter, not an action method parameter. To get it, you would need to use <f:viewParam> or @ManagedProperty. In this particular case, the latter is more suitable. You only have to replace CDI annotations by JSF annotations in order to get @ManagedProperty to work:

@ManagedBean(name="bean")
@RequestScoped
public class ActionParam {

    @ManagedProperty("#{param.param}")
    private Integer param;

    public String submit() {
        System.out.println("Submit using value " + param);
        return null;
    }

}

When you're targeting a Servlet 3.0 container (Tomcat 7, Glassfish 3, JBoss AS 6, etc) with a web.xml whose <web-app> root declaration definies Servlet 3.0, then you should be able to just pass the parameter straight into the action method by EL as that's supported by EL 2.2 (which is part of Servlet 3.0):

<h:commandButton id="actionButton" value="Submit"
    action="#{bean.submit(123)}">
</h:commandButton>

with

public String submit(Integer param) {
    System.out.println("Submit using value " + param);
    return null;
}

If you target an old Servlet 2.5 container, then you should still be able to do this using JBoss EL. See also this answer for installation and configuration details: Invoke direct methods or methods with arguments / variables / parameters in EL

How to pass a parameter to a javascript function on a JSF 2.0 page

You have to call your login method from the actionListener attribute of p:commandButton and not inside the oncomplete attribute. The javascript function from the example can be used without changes. It is only for displaying the effect.

Change your p:commandButton this way:

<p:commandButton value="Login" update="growl"                       
       oncomplete="handleLoginRequest(xhr, status, args)"
       actionListener="#{securityController.logIn}"
/>

And use the js function exactly as in the primefaces showcase:

<script type="text/javascript">  
    function handleLoginRequest(xhr, status, args) {  
        if(args.validationFailed || !args.loggedIn) {  
            jQuery('#dialog').parent().effect("shake", { times:3 }, 100);  
        } else {  
            dlg.hide();  
            jQuery('#loginLink').fadeOut();  
        }  
    }  
</script>  

---

Related Topics