Как передать переменные JavaScript в качестве параметров для метода действия JSF?

Я готовлю некоторые переменные в JavaScript (в моем конкретном случае я хотел бы получить местоположение GPS):

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

Я хочу отправить их в управляемый bean с помощью следующей командной кнопки:

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

public void submit(int x, int y) {
    // ...
}

Как я могу отправить переменные x и y из JavaScript в метод действия bean, поддерживаемый JSF?

Ответ 1

Пусть JS задает их как скрытые входные значения в том же виде.

<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;
}

Метод действия кнопки команды может просто обращаться к ним как к свойствам bean обычным способом.

private int x;
private int y;

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

// Getters+setters.

Альтернативой является использование OmniFaces <o:commandScript> или PrimeFaces <p:remoteCommand> вместо <h:commandButton>. См. Также a.o. Как вызвать управляемый JSF bean в событии HTML DOM с использованием собственного JavaScript?

Ответ 2

Если вы используете PrimeFaces, вы можете использовать скрытое поле ввода, связанное с управляемым компонентом, и можете инициализировать его значение с помощью javascript, для PrimeFaces можно использовать функцию PF для доступа переменная виджета, связанная со скрытым вводом, таким образом:

<script type="text/javascript">
function getVars() {
    // ...
    var x = locationInfo.lng; 
    var y = locationInfo.lat;
    PF('wvx').jq.val( lat1 );
    PF('wvy').jq.val( lng1 );
}
</script>

<p:inputText type="hidden" widgetVar="wvx" value="#{bean.x}" />
<p:inputText type="hidden" widgetVar="wvy" value="#{bean.y}" />

Ответ 3

<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}" />

 <script>
        function getVars() {

            var x; 
            var yt;

            x=#{bean.x};
            y=#{bean.y};
        }
    </script>