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点击时没有更新跨度样式，有没有办法解决它？

使用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中给了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 to

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

这样可行，但我更喜欢这样一种解决方案，其中单选按钮的行为与直接单击它时的行为相同（即Primefaces处理样式更改）。

Answer 2

您似乎点击了错误的＆＃39; 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>

使用＆＃39; ui-widget＆＃39;创建对div的点击它下面的课程

所以

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

然后它有效。我试过这个并在PrimeFaces 6.0展示中进行了测试

如果您没有明确指定ID，您可能需要使用自己的ID或查看生成的ID中是否存在某些逻辑。

PrimeFaces radiobutton样式在通过Javascript点击时不会更新

2 个答案: