PrimeFaces RadioButton стили не обновляя при нажатии с помощью Javascript

Question

У меня есть р: установка selectOneRadio следующим образом:

<p:selectOneRadio id="positionRadio" value="#{employeeBean.empPosition}" converter="#{empPositionConverter}" layout="custom" 
        required="true" requiredMessage="Please select a position"> 
    <f:selectItems value="#{employeeBean.positionList}" var="pos" 
           itemLabel="#{pos.name}" itemValue="#{pos}" /> 
    <p:ajax process="@this" update="@this"/> 
</p:selectOneRadio> 

<ui:repeat id="iterator" value="#{employeeBean.positionList}" var="template" varStatus="iterStat"> 
    <div class="form-group" onclick="document.getElementById('employeeForm:positionRadio:#{iterStat.index}').click();"> 
     <h:outputText styleClass="form-control" value="#{pos.name}"/> 
     <p:radioButton for=":employeeForm:positionRadio" itemIndex="#{iterStat.index}" /> 
     <div style="display: inline"> 
      <p style="display: inline"> 
       <h:outputText value="#{pos.description}"/> 
      </p> 
     </div> 
    </div> 
</ui:repeat> 

мне нужно проверить соответствующую кнопку, если что-либо в DIV, содержащего его щелкают. Я пытаюсь сделать это, используя

onclick="document.getElementById('employeeForm:positionRadio:#{iterStat.index}').click();" 

Это только половина работы. Когда я нажимаю на div, я вижу огонь POST-запроса, однако стили не обновляются, поэтому ни один из моих переключателей не проверяется на стороне клиента.

Это, конечно, потому что p: radioButton отображается как div со скрытым входным радиоэлементом и видимым диапазоном, соответствующим стилю. Почему стиль span не обновляется при нажатии на javascript и есть ли способ его исправить?

Использование JSF 2.1.7, PrimeFaces 5,0 и Java 1.7

Answer 1

Я работаю над этой проблемой дальнейшего и есть решение. Я бы предпочел другое, но мое текущее решение - обновить стили вручную с помощью javascript.

Во-первых, я добавил скрытое поле ввода за пределами Ui: повторить для отслеживания ранее нажал индексировать кнопку Радио

<input type="hidden" name="prevClicked" id="prevClicked" value="-1"/> 

Я также дал р: RadioButton внутри Ui: повторить идентификатор raBtn и переехал OnClick Javascript для выполнения следующих функций

function radioBtnDivClicked(event, radioIndex){ 
    // check prevClicked field to revert styles if necessary 
    if(document.getElementById('prevClicked').value != -1){ 
     var prevIndex = document.getElementById('prevClicked').value; 
     document.getElementById('employeeForm:iterator:' + prevIndex + ':raBtn').children[1].className = 'ui-radiobutton-box ui-widget ui-corner-all ui-state-default'; 
     document.getElementById('employeeForm:iterator:' + prevIndex + ':raBtn').children[1].children[0].className = 'ui-radiobutton-icon ui-icon ui-icon-blank'; 
    } 

    // set styles for clicked div 
    document.getElementById('employeeForm:positionRadio:' + radioIndex).click(); 
    document.getElementById('employeeForm:iterator:' + radioIndex + ':raBtn').children[1].className = 'ui-radiobutton-box ui-widget ui-corner-all ui-state-default ui-state-active'; 
    document.getElementById('employeeForm:iterator:' + radioIndex + ':raBtn').children[1].children[0].className = 'ui-radiobutton-icon ui-icon ui-icon-bullet'; 
    document.getElementById('prevClicked').value = radioIndex; 

    // stop bubbling 
    event.stopPropagation(); 
} 

Это должно быть достаточно просто преобразовать в JQuery.

Кроме того, я только изменил к OnClick на

onclick="radioBtnDivClicked(event,#{iterStat.index});" 

Это работает, но я предпочитаю решение, в котором кнопка радио ведет себя, как это происходит при щелчке непосредственно (т.е. Primefaces обрабатывает изменения стиля).

Answer 2

Вы, кажется, щелкаете по элементу 'wrong' html. Если вы посмотрите на этот идентификатор сгенерированного <p:radioButton..., например. первая кнопка в custom layout example in the PrimeFaces showcase:

<div id="j_idt88:opt1" class="ui-radiobutton ui-widget"> 
    <div class="ui-helper-hidden-accessible"> 
     <input value="Red" id="j_idt88:customRadio:0_clone" name="j_idt88:customRadio" class="ui-radio-clone" data-itemindex="0" type="radio"> 
    </div> 
    <div class="ui-radiobutton-box ui-widget ui-corner-all ui-state-default"> 
     <span class="ui-radiobutton-icon ui-icon ui-icon-blank ui-c"></span> 
    </div> 
</div> 

И создать нажмите на DIV с классом 'UI-виджета' под ним

Так

$('#j_idt88\\:opt1 .ui-widget').click(); # The \\ is for escaping the colon in the jQuery selector) 

Затем он работает. Я попробовал это и протестировал в витрине PrimeFaces 6.0

Возможно, вам придется использовать свой собственный идентификатор или посмотреть, есть ли какая-то логика в сгенерированных, если вы явно не назначаете идентификаторы.