如何用客户端API设置p:selectOneRadio的值?
How to set the value of p:selectOneRadio with Client Side API?
在我的 JSF 视图中,我使用的是 p:selectOneRadio。现在我必须在客户端更改此组件的值作为副作用。在此组件的客户端 API 中,我发现了以下内容,如果我找到正确的使用方法,我认为可以用于此:
PrimeFaces.widget.SelectOneRadio=PrimeFaces.widget.BaseWidget.extend(
{
// ...
select:function(a){
this.checkedRadio=a;
a.addClass("ui-state-active")
.children(".ui-radiobutton-icon")
.addClass("ui-icon-bullet").removeClass("ui-icon-blank");
a.prev().children(":radio").prop("checked",true)}
});
对我来说(没有太多关于 JS 的知识)看起来我必须传递类似于我想要 select 的单选按钮实例的东西。我已经尝试了几种方法,但是 none 有效:
<p:selectOneRadio widgetVar="sel" id="id-sel" >
<f:selectItem itemValue="#{false}" itemLabel="n/a" />
<f:selectItem itemValue="#{true}" itemLabel="date" />
</p:selectOneRadio>
<p:commandButton onclick="PF('sel').select(sel.inputs[1]);"/>
<p:commandButton onclick="PF('sel').select(PF('sel').inputs[1]);"/>
<p:commandButton onclick="PF('sel').select( $('input:radio[id*=id-sel\:1]') );"/>
<p:commandButton
onclick="PF('sel').select(document.getElementById('menuform:id-sel:1'));"/>
但是,我也尝试直接传递值 and/or 标签(这适用于 selectOneMenu)。再次没有成功(但在这种情况下并不奇怪)
<p:commandButton onclick="PF('sel').select('date');"/>
<p:commandButton onclick="PF('sel').select('true');"/>
<p:commandButton onclick="PF('sel').select(1);"/>
<p:commandButton onclick="PF('sel').select(true);"/>
<p:commandButton onclick="PF('sel').select(#{true});"/>
有人知道在这里做什么吗?
应该传递的元素是模拟收音机外观和感觉的 <span>
,这个跨度有 .ui-radiobutton-box
和 CSS class,简单的调用会是:
PF('selectOneRadioWV').select($('.ui-radiobutton-box').first())
这将是 select 第一台收音机。
然而,select
function would select only, which is not the expected behaviour,预期的将不是 select 以前的 selected 收音机和 select 新的。
话虽如此,如果您想 select 基于价值(这更有意义),以下方法可行:
PF('selectOneRadioWV').jq.find('input:radio[value="1"]').parent().next().trigger('click.selectOneRadio');
在那里它selecting 具有值 1
的无线电输入,然后导航到相应的 .ui-radiobutton-box
,它触发小部件定义的 event。通过这种方式,您可以确保相应地调用任何 ajax 相关事件。
在我的 JSF 视图中,我使用的是 p:selectOneRadio。现在我必须在客户端更改此组件的值作为副作用。在此组件的客户端 API 中,我发现了以下内容,如果我找到正确的使用方法,我认为可以用于此:
PrimeFaces.widget.SelectOneRadio=PrimeFaces.widget.BaseWidget.extend(
{
// ...
select:function(a){
this.checkedRadio=a;
a.addClass("ui-state-active")
.children(".ui-radiobutton-icon")
.addClass("ui-icon-bullet").removeClass("ui-icon-blank");
a.prev().children(":radio").prop("checked",true)}
});
对我来说(没有太多关于 JS 的知识)看起来我必须传递类似于我想要 select 的单选按钮实例的东西。我已经尝试了几种方法,但是 none 有效:
<p:selectOneRadio widgetVar="sel" id="id-sel" >
<f:selectItem itemValue="#{false}" itemLabel="n/a" />
<f:selectItem itemValue="#{true}" itemLabel="date" />
</p:selectOneRadio>
<p:commandButton onclick="PF('sel').select(sel.inputs[1]);"/>
<p:commandButton onclick="PF('sel').select(PF('sel').inputs[1]);"/>
<p:commandButton onclick="PF('sel').select( $('input:radio[id*=id-sel\:1]') );"/>
<p:commandButton
onclick="PF('sel').select(document.getElementById('menuform:id-sel:1'));"/>
但是,我也尝试直接传递值 and/or 标签(这适用于 selectOneMenu)。再次没有成功(但在这种情况下并不奇怪)
<p:commandButton onclick="PF('sel').select('date');"/>
<p:commandButton onclick="PF('sel').select('true');"/>
<p:commandButton onclick="PF('sel').select(1);"/>
<p:commandButton onclick="PF('sel').select(true);"/>
<p:commandButton onclick="PF('sel').select(#{true});"/>
有人知道在这里做什么吗?
应该传递的元素是模拟收音机外观和感觉的 <span>
,这个跨度有 .ui-radiobutton-box
和 CSS class,简单的调用会是:
PF('selectOneRadioWV').select($('.ui-radiobutton-box').first())
这将是 select 第一台收音机。
然而,select
function would select only, which is not the expected behaviour,预期的将不是 select 以前的 selected 收音机和 select 新的。
话虽如此,如果您想 select 基于价值(这更有意义),以下方法可行:
PF('selectOneRadioWV').jq.find('input:radio[value="1"]').parent().next().trigger('click.selectOneRadio');
在那里它selecting 具有值 1
的无线电输入,然后导航到相应的 .ui-radiobutton-box
,它触发小部件定义的 event。通过这种方式,您可以确保相应地调用任何 ajax 相关事件。