2015-01-22 3 views
1

В моем представлении JSF я использую p:selectOneRadio. Теперь мне нужно изменить значение этого компонента на стороне клиента как побочный эффект. В стороне клиента API этого компонента я нашел следующее, который я думаю, что я мог бы использовать для этого, если я найду правильный способ, как использовать его:Как установить значение 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), что похоже, что мне нужно передать что-то похожее на экземпляр переключателя, который я хочу выбрать. Я попытался это несколькими способами, но ни один из них не работает:

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

Однако, я также попытался передать значение и/или этикетку непосредственно (это работает, например, для 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});"/> 

Кто-нибудь знает, что делать здесь?

ответ

3

Элемент, который должен быть передан является <span>, который имитирует внешний вид радио и чувствовать, этот диапазон имеет .ui-radiobutton-box как класс CSS, простой вызов будет:

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

Это выбрать в первое радио.

Однако функция select бы выбрать только, который неexpected behaviour, ожидаемый один будет отменив предыдущую выбранную радиостанцию ​​и выберите новый.

Будучи тем, что, если вы хотите выбрать на основе значения (что имеет смысл) следующий подход будет работать:

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

В там она выборе входа радио, которое имеет значение 1 затем навигационное к соответствующему .ui-radiobutton-box, где он вызывает event, определенный виджетами. Таким образом вы убедитесь, что соответствующие события, связанные с ajax, вызываются соответственно.

+0

tyvm, теперь я получил его работу! Правильный escape-код в моем конкретном примере должен быть 'PF ('sel'). Jq.find ('input: radio [value = false]'). Parent(). Next(). Trigger ('click.selectOneRadio'); ' – stg

+0

И с этой помощью я думаю, что теперь я даже могу расширить Виджет в интерфейсе Client Side для более удобного использования :) – stg

+1

Рад это услышать, пожалуйста! –