javascript - How to set the value of p:selectOneRadio with Client Side API? - Stack Overflow

admin管理员组

文章数量:1316523

In my JSF view I am using a p:selectOneRadio. Now I have to change the value of this ponent on client side as side effect. In the Client Side API of this ponent I have found the following which I think I could use for this if I find the proper way how to use it:

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

To me (without having much knowledge about JS) it looks like I have to pass something similar to an instance of the radio-button I want to select. I have tried this in several ways, but none of them works:

<p:selectOneRadio widgetVar="sel" id="id-sel" >                
        <f:selectItem itemValue="#{false}" itemLabel="n/a" />
        <f:selectItem itemValue="#{true}" itemLabel="date" />
</p:selectOneRadio>               

<p:mandButton onclick="PF('sel').select(sel.inputs[1]);"/>
<p:mandButton onclick="PF('sel').select(PF('sel').inputs[1]);"/>
<p:mandButton onclick="PF('sel').select( $('input:radio[id*=id-sel\\:1]') );"/>       
<p:mandButton 
      onclick="PF('sel').select(document.getElementById('menuform:id-sel:1'));"/>  

However, I also tried to pass the value and/or label directly (this works e.g. for selectOneMenu). Again without success (but not surprising in this case)

<p:mandButton onclick="PF('sel').select('date');"/>
<p:mandButton onclick="PF('sel').select('true');"/>
<p:mandButton onclick="PF('sel').select(1);"/>
<p:mandButton onclick="PF('sel').select(true);"/>
<p:mandButton onclick="PF('sel').select(#{true});"/>

Anybody knows what to do here?

In my JSF view I am using a p:selectOneRadio. Now I have to change the value of this ponent on client side as side effect. In the Client Side API of this ponent I have found the following which I think I could use for this if I find the proper way how to use it:

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

To me (without having much knowledge about JS) it looks like I have to pass something similar to an instance of the radio-button I want to select. I have tried this in several ways, but none of them works:

<p:selectOneRadio widgetVar="sel" id="id-sel" >                
        <f:selectItem itemValue="#{false}" itemLabel="n/a" />
        <f:selectItem itemValue="#{true}" itemLabel="date" />
</p:selectOneRadio>               

<p:mandButton onclick="PF('sel').select(sel.inputs[1]);"/>
<p:mandButton onclick="PF('sel').select(PF('sel').inputs[1]);"/>
<p:mandButton onclick="PF('sel').select( $('input:radio[id*=id-sel\\:1]') );"/>       
<p:mandButton 
      onclick="PF('sel').select(document.getElementById('menuform:id-sel:1'));"/>  

However, I also tried to pass the value and/or label directly (this works e.g. for selectOneMenu). Again without success (but not surprising in this case)

<p:mandButton onclick="PF('sel').select('date');"/>
<p:mandButton onclick="PF('sel').select('true');"/>
<p:mandButton onclick="PF('sel').select(1);"/>
<p:mandButton onclick="PF('sel').select(true);"/>
<p:mandButton onclick="PF('sel').select(#{true});"/>

Anybody knows what to do here?

• javascript
• jquery
• primefaces
• client-side
• selectoneradio

Share Improve this question Follow asked Jan 22, 2015 at 14:35 stgstg 2,79722 gold badges3030 silver badges5555 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

The element that should be passed is the <span> which simulates the radio look and feel, this span has .ui-radiobutton-box as CSS class, the simple call would be:

PF('selectOneRadioWV').select($('.ui-radiobutton-box').first())

This would select the first radio.

However the select function would select only, which is not the expected behaviour, the expected one would be unselect the previous selected radio and select the new one.

Being that said, if you would like to select based on value (which makes more sense) the following approach would work:

PF('selectOneRadioWV').jq.find('input:radio[value="1"]').parent().next().trigger('click.selectOneRadio');

In there it's selecting the radio input which has the value 1 then navigating to the corresponding .ui-radiobutton-box where it triggers the event defined by the widget. In that way you make sure any ajax related events are called accordingly.

本文标签： javascriptHow to set the value of pselectOneRadio with Client Side APIStack Overflow