从 JavaScript 将参数传递给 p:remoteCommand

Posted

技术标签:

【中文标题】从 JavaScript 将参数传递给 p:remoteCommand【英文标题】:Pass parameter to p:remoteCommand from JavaScript 【发布时间】:2011-11-05 11:53:52 【问题描述】:

我想将值从 javascript 传递给 remoteCommand。如果这是可能的,我该怎么做?如何在 backing bean 中接收它们?

【问题讨论】:

这里的第一个答案已经过时了,请看@BalusC ***.com/a/18510102/55070的答案 【参考方案1】:

是的,这是可能的。如何做到这一点取决于 PrimeFaces 版本。你可以在PrimeFaces users guide看到它。

PrimeFaces 3.3 或更新版本

自 PrimeFaces 3.3 版起,语法如下(从 3.3 用户指南复制粘贴)。

3.81 远程命令

...

传递参数

远程命令可以通过以下方式发送动态参数;

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");

PrimeFaces 3.2 或更早版本

之前 PrimeFaces 3.3 版语法如下(从 3.2 用户指南复制粘贴):

3.80 远程命令

...

传递参数

远程命令可以通过以下方式发送动态参数;

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

它可以通过通常的方式在 backing 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 请求参数一样指定具有多个值的单个参数(这在现实世界中用于例如多选下拉列表和多选复选框组)。


另见:

Depedency inject request parameter with CDI and JSF2 How to invoke a JSF managed bean on a HTML DOM event using native JavaScript?

【讨论】:

大声笑,我需要从 js 传递 string[] 数组,唯一的方法是一个一个地设置所有参数?你能展示那个样本吗?无论如何+1这个答案:) 我正在使用 Primefaces 2.1,但建议的解决方案对我不起作用。我在这里写了问题***.com/questions/63819389/…。有人能告诉我我做错了什么吗?【参考方案2】:

页面:

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

JavaScript:

command(param: 'value');

豆子:

public void method() 
    String value = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param");

【讨论】:

感谢您的简单回答!不幸的是,定义action="#bean.method(param)" 似乎是不可能的,这样可以避免在bean 中调用FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("param") @geceo 我有一段时间没有使用 JSF,但我想应该可以实现一个实用程序,让您可以编写类似 action="#bean.method(Utility.getParam("param"))" 的东西。 @GrégoireColbert 和@Joel,有可能,写action="#bean.method(param.param)"。映射paramFacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap()‌ 的EL 表示。 这不再起作用,请参阅 Primefaces 3.3+ 的 BalusC 答案。【参考方案3】:
remoteCommandFunctionName(name1:'value1', name2:'value2');

【讨论】:

您没有收到 remoteCommand 中的值,您只是使用了另一个可以告诉 remoteCommand 更新的组件。您使用 p:remoteCommand 使用所需的新值在支持 bean 中设置字段,然后将 p:remoteCommand 的 update="component2" 属性设置为指向第二个组件,然后设置第二个组件的值只需通过添加 value="#myBean.value" 来调用 bean 中的更新字段。 自 3.3 起参数传递格式为 your_command( [ name:'x', value:10, name:'y', value:20 ] ); 我正在使用 primefaces 3.3 及更高版本,但此修复不起作用。 parameterMap 为空 onclick="rc(([name: 'emailInstance', value:#notification.emailInstanceId]))" 【参考方案4】:

结合@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;
    

【讨论】:

【参考方案5】:

当你需要从javascript传递多个参数时,语法是:

<br>var <b>param1</b> = ...;<br>var <b>param2</b> = ...;<br>var <b>param3</b> = ...;

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

【讨论】:

@BalusC 我尝试了 Cagatay 的示例,但使用多个参数时它不起作用(很奇怪,嗯?)。传递参数为 foo(name1:'value1', name2:'value2');没有将参数正确发送到 RequestParameterMap,所以我尝试为每个参数指定名称和值并将它们包装在数组 foo([name:'name1', value:'value1', name:'name2', value :'value2']);【参考方案6】:

如果你想调用你自己的函数,例如。确认对话框,您的自定义函数必须符合传递参数样式。 例如:

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

【讨论】:

我相信 JS 调用 (remoteDeleteDemand(id)) 和 &lt;p:remoteCommand&gt; (remoteDelete) 的 name 属性应该匹配,不是吗? @geceo 是的,他们当然应该这样做。【参考方案7】:

PrimeFace 5.0,动态数组(所有表格列宽将通过此方法发送)

光束

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

p:远程命令

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

【讨论】:

以上是关于从 JavaScript 将参数传递给 p:remoteCommand的主要内容,如果未能解决你的问题,请参考以下文章

将参数传递给javascript中的弹出窗口[重复]

如何将 JS 函数的引用作为参数传递给 ExternalInterface 调用?

JavaScript:将参数传递给回调函数

将String作为参数传递给Javascript中对象的InnerHtml属性

将参数传递给 JavaScript 文件

将任意数量的参数传递给Javascript函数[重复]