How to set the value of p:selectOneRadio with Client Side API?

Question

In my JSF view I am using a p:selectOneRadio. Now I have to change the value of this component on client side as side effect. In the Client Side API of this component 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: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'));"/>  

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: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});"/>

Anybody knows what to do here?

Answer 1

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.