#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 для более удобного использования 🙂