web-dev-qa-db-ja.com

JavaScriptからp：remoteCommandにパラメーターを渡す

JavascriptからremoteCommandに値を渡したいです。これが可能な場合、どうすればそれを行うことができ、バッキングBeanでどのように受け取ることができますか？

javascriptjsfprimefacesparametersremotecommand
45
Rajat Gupta
remoteCommandFunctionName({name1:'value1', name2:'value2'});
23
Cagatay Civici

はい、可能です。その方法は、PrimeFacesのバージョンによって異なります。 PrimeFacesユーザーガイド で確認できます。 BeforePrimeFacesバージョン3.3の構文は次のとおりです（3.2ユーザーガイドからコピーペースト）：

3.80 RemoteCommand

...

パラメータを渡す

リモートコマンドは、次の方法で動的パラメーターを送信できます。

increment({param1:'val1', param2:'val2'});

通常の方法でバッキングBeanで使用できます。例えば。要求スコープBean内：

_@ManagedProperty("#{param.param1}")
private String param1;

@ManagedProperty("#{param.param2}")
private String param2;
_

またはより広いスコープのBeanの方法で：

_Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
String param1 = params.get("param1");
String param2 = params.get("param2");
_

ただし、このアプローチには、通常のHTMLフォームやHTTP要求パラメーター（実際には複数選択ドロップダウンリストや複数選択チェックボックスグループなどで使用される）のように、複数の値を持つ単一のパラメーターを指定できないという欠点がありました。

PrimeFacesバージョン3.3の構文は次のとおりです（3.3ユーザーガイドからコピーペースト）：

3.81 RemoteCommand

...

パラメータを渡す

リモートコマンドは、次の方法で動的パラメーターを送信できます。

increment([{name:'x', value:10}, {name:'y', value:20}]);

この方法により、単一のパラメーター名に複数の値を指定できます。上記のような単一の値を持つパラメーターは、以前の方法と同じ方法で使用できます。

_@ManagedProperty("#{param.x}")
private int x;

@ManagedProperty("#{param.y}")
private int y;
_

（注：MojarraではIntegerを使用できますが、MyFacesでは使用できません。これは_<p:remoteCommand>_とはまったく関係ありません）

またはより広いスコープのBeanの方法で：

_Map<String, String> params = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap();
int x = Integer.valueOf(params.get("x"));
int y = Integer.valueOf(params.get("y"));
_

複数の値を持つパラメーターを指定する必要がある場合は、次のように指定できます。

_functionName([{name:'foo', value:'one'}, {name:'foo', value:'two'}, {name:'foo', value:'three'}]);`
_

リクエストスコープのBeanで：

_@ManagedProperty("#{paramValues.foo}")
private String[] foos;
_

またはより広いスコープのBeanの方法で：

_Map<String, String[]> paramValues = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterValuesMap();
String[] foos = paramValues.get("foo");
_

更新

最新のCDI JSFのパラメーターへのアクセスは、別の方法で行うことができます。概要は this Stackoverflow Q/A

79
BalusC

ページ：

<p:remoteCommand name="command" action="#{bean.method}" />

JavaScript：

command({param: 'value'});

豆：

public void method() {
    String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");
}
57
Joel Richard

@BalusC @Joelの投稿を機能的な例と組み合わせてください

<h:form>
    <p:remoteCommand name="rcName" update="msgs" actionListener="#{remoteCommandView.beanMethod}" />
    <p:growl id="msgs" showDetail="true" />

    <p:commandButton type="button" onclick="rcName([{name:'model', value:'Buick Encore'}, {name:'year', value:2015}]);" value="Pass Parameters 1" /><br/>
    <p:commandButton type="button" onclick="clicked();" value="Pass Parameters 2" />
</h:form>

<script type="text/javascript">
    //<![CDATA[
    function clicked(){
        rcName([{name:'model', value: 'Chevy Volt'}, {name:'year', value:2016}]);
    }
    //]]>
</script>

@ManagedBean
public class RemoteCommandView {
    public void beanMethod() {
        // OR - retrieve values inside beanMethod
        String model1 = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("model");
        String year1 = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("year");
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Executed", 
            "Using RemoteCommand with parameters model := " + model + ", year := " + year));
    }

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

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

    public void setModel(String model) {
        this.model = model; // value set by JSF
    }

    public void setYear(int year) {
        this.year = year;
    }
}
8
Jonathan L

JavaScriptから複数のパラメーターを渡す必要がある場合、構文は次のとおりです。

_
var param1 = ...;
var param2 = ...;
var param3 = ...;_

remoteCommandFunction([{name:'param1', value:param1}, {name:'param2',value:param2}, {name:'param3',value:param3}]);

4
David F. Suárez Chacón

独自の関数を呼び出したい場合、例えば確認ダイアログでは、カスタム関数はパラメータの受け渡しスタイルに準拠している必要があります。例えば：

   <p:commandLink id="myId" onclick="confirmDelete([{name:'Id', value: '#{my.id}'}]);" immediate="true">

Javaスクリプト関数

            function confirmDelete(id) {
            if (confirm('Do you really want to delete?')) {
                remoteDeleteDemand(id);
                return true;
            }

RemoteCommandタグ

<p:remoteCommand name="remoteDeleteDemand" actionListener="#{myController.doDelete}" />
3
jorelia

PrimeFace 5.0、動的配列（すべてのテーブル列幅はこのメソッドによって送信されます）

ビーム

public void updateTableColumnsWidth() {
    FacesContext context = FacesContext.getCurrentInstance();
    Map<String, String> map = context.getExternalContext().getRequestParameterMap();
}

p：remoteCommand

<h:form>
     <p:remoteCommand name="remoteCommand" action="#{controller.updateTableColumnsWidth}" />
</h:form>

JS

<script type="text/javascript">
        function updateTableColumnsWidth () {
                var columnsCount = document.getElementById('table').rows[0].cells.length;

                var json = [];

                for (var i = 0; i &lt; columnsCount; i++) {
                    json[i] = { name: i, value: document.getElementById('table').rows[0].cells[i].offsetWidth};

                }

                console.log(json);
                remoteCommand(json);
            };
    </script>
1
Vasil Valchev