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

您似乎点击了“错误”的 html 元素。如果您查看生成的<p:radioButton... 的 id，例如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-widget”类的点击

所以

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

然后就可以了。我试过这个并在 PrimeFaces 6.0 展示中进行了测试

如果您没有明确分配 id，您可能需要使用自己的 id 或查看生成的 id 中是否存在一些逻辑。

Answer 2

我一直在进一步解决这个问题并找到了解决方案。 我仍然更喜欢不同的，但我目前的解决方案是通过 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 处理样式更改）的解决方案。