PrimeFaces Radiobutton Arten nicht, wenn darauf geklickt via Javascript Aktualisierung

Question

Ich habe eine p: selectOneRadio Setup wie folgt:

<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> 

Ich brauche den entsprechenden Radiobutton zu überprüfen, ob alles in der div es enthält geklickt wird. Ich versuche, dies zu tun mit

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

Dies ist nur zur Hälfte funktioniert. Wenn ich auf das div klicke, sehe ich die POST Anfrage Feuer, aber die Stile sind nicht aktualisiert, so dass keiner meiner Radio-Buttons clientseitig überprüft wird.

Dies ist natürlich, weil p: radioButton als div mit einem versteckten Eingang Radio-Element und einem sichtbaren Bereich gerendert wird, die entsprechend gestaltet ist. Warum wird der Span-Stil nicht aktualisiert, wenn er mit Javascript angeklickt wird und gibt es eine Möglichkeit, ihn zu beheben?

JSF Mit 2.1.7, PrimeFaces 5.0 und Java 1.7

Answer 1

Ich habe weiter an diesem Problem gearbeitet und eine Lösung. Ich würde immer noch eine andere bevorzugen, aber meine aktuelle Lösung besteht darin, die Stile manuell über Javascript zu aktualisieren.

Zunächst einmal habe ich ein verstecktes Eingabefeld außerhalb des ui: wiederholen Sie den zuvor angeklickt Optionsfeld Index

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

Ich habe auch die p zu verfolgen: in dem ui radiobutton: repeat eine ID von raBtn und bewegte der onclick Javascript zu einer Funktion wie folgt

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(); 
} 

Dies sollte relativ einfach zu jQuery konvertieren.

Außerdem habe ich nur auf Onclick zu

geändert

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

Dies funktioniert, aber ich ziehe es eine Lösung, bei der das Optionsfeld verhält, wie es tut, wenn er direkt angeklickt wird (dh Primefaces die Stiländerungen behandelt).

Answer 2

Sie scheinen auf das "falsche" HTML-Element zu klicken. Wenn Sie sich diese ID des erzeugten <p:radioButton... z. die erste Taste in den 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> 

Und einen Klick auf dem div mit der 'ui-Widget' Klasse darunter

So

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

Dann funktioniert es schaffen. Ich habe es versucht und getestet in der PrimeFaces 6.0 Showcase

Sie müssen möglicherweise Ihre eigenen IDs verwenden oder sehen, ob es eine gewisse Logik in den generierten, wenn Sie nicht ausdrücklich IDs zuweisen.