javascript - 通过 Javascript 单击时 PrimeFaces 单选按钮样式不更新

Question

我有一个 p: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，带有一个隐藏的输入单选元素和一个相应样式的可见范围。为什么在通过 javascript 单击时 span 样式没有更新，有没有办法修复它？

使用 JSF 2.1.7、PrimeFaces 5.0 和 Java 1.7

Answer 1

我一直在进一步研究这个问题并找到了解决方案。我仍然更喜欢不同的，但我目前的解决方案是通过 javascript 手动更新样式。

首先我在 ui:repeat 之外添加了一个隐藏的输入字段来跟踪之前点击的单选按钮索引

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

我还为 ui:repeat 中的 p:radioButton 赋予了 raBtn 的 id，并将 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 处理样式更改)。