获取p:selectOneRadio值到JS函数

时间:2015-10-02 19:11:45

标签: primefaces radio-button submitchanges

我有一个PF的selectOneRadio来选择要下载的文件类型。我还有一个commandButton来使用onclick属性调用下载servlet。问题是,当我选择文件类型并单击按钮时,所选的值当然尚未提交。当我点击下载按钮时,我正在寻找获得所选值的方法。

这是我的代码:

<p:selectOneRadio id="sorType" value="#{bean.type}" layout="custom">
    <f:selectItem itemLabel="XML" itemValue="XML" />
    <f:selectItem itemLabel="XLS" itemValue="XLS" />
    <f:selectItem itemLabel="CSV" itemValue="CSV" />
</p:selectOneRadio>

<p:commandButton type="button" ajax="false" onclick="return downloadFile('#{bean.type}');" />

2 个答案:

答案 0 :(得分:2)

如果要在客户端检查所选值,则需要为widgetVar定义p:selectOneRadio属性,例如:

<p:selectOneRadio widgetVar="widgetSorType" id="sorType" value="#{bean.type}"
    layout="custom">

    <f:selectItem itemLabel="XML" itemValue="XML" />
    <f:selectItem itemLabel="XLS" itemValue="XLS" />
    <f:selectItem itemLabel="CSV" itemValue="CSV" />
</p:selectOneRadio>

这将允许轻松找到元素 - 然后您可以进一步使用它来检查实际选择的值。我可以看到两个选项:

function getSelectedTypeVer1() {
    return PF('widgetSorType').getJQ().find(':checked').val() || "";
}

function getSelectedTypeVer2() {
    var inputs = PF('widgetSorType').inputs;

    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            return inputs[i].value;
        }
    }

    return "";
}

选择最适合您的方法 - 如果没有选择任何内容,两者都将返回所选值或空字符串。所以剩下的就是在按钮的onclick中调用它,例如:

<p:commandButton type="button" ajax="false"
    onclick="return downloadFile(getSelectedTypeVer1());" />

在PrimeFaces 5.2上测试

答案 1 :(得分:1)

@ Sva.Mu共享的解决方案对我不起作用。

我有一个类似于PrimeFaces Showcase中最后一个展示的实现,其中涉及定制布局,其中一些<p:radioButton>指向自己的<f:selectItem>

我以PF('widgetName').getJQ().find(':checked').val();而不是PF('widgetName').inputs.filter(':checked').val();的某种方式成功地将两种方法合并在一起。

我的PrimeFaces版本:6.1