Как установить значение p: selectOneRadio с помощью клиентского API?

#javascript #jquery #jsf #primefaces

#javascript #jquery #простые интерфейсы #на стороне клиента #selectoneradio

Вопрос:

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

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

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

Ответ №1:

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

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

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

Однако select функция будет выбирать только, что не является ожидаемым поведением, ожидаемым было бы отменить выбор предыдущего выбранного радио и выбрать новое.

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

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

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

Комментарии:

1. tyvm, теперь у меня это работает! Правильное экранирование в моем конкретном примере должно быть PF('sel').jq.find('input:radio[value=false]').parent().next().trigger('click.selectOneRadio');

2. И с этой помощью, я думаю, теперь я даже могу расширить виджет в клиентском API для более удобного использования 🙂