Question

我正在尝试在selectOneMenu选项上呈现h:selectManyBoxList，因此当用户从selectOneMenu中选择项目时，会出现selectManyBox的数据

这是我的代码：

<h:panelGroup rendered="#{exportManager.htmlExportSelected}">
                                    <div class="col-sm-7">
                                        <p:selectOneMenu styleClass="form-control" immediate="true" 
                                            value="#{exportManager.selectedTemplateObjectTypeId}"
                                            required="true">
                                            <f:selectItems value="#{templateManager.templateDetails}"
                                                var="oneDetail"
                                                itemLabel="#{oneDetail.childObjectType.title}"
                                                itemValue="#{oneDetail.childObjectType.objectTypeId}" />
                                            <f:ajax event="change" render="multi-select-property" ></f:ajax>
                                        </p:selectOneMenu>
                                    </div>

                                    <div class="form-group">
                            <label></label>
                        </div>

                                    <div align="right" class="form-group">
                                        <div class="col-sm-12">
                                            <div class="col-sm-6" align="right">
                                                <b><label class="control-label">#{uiLabelManager.nonSelected}</label></b>
                                            </div>
                                            <div class="col-sm-4" align="center">
                                                <b><label class="control-label">#{uiLabelManager.selected}</label></b>
                                            </div>
                                        </div>
                                    </div>
                                    <label class="col-sm-4 control-label"></label>

                                    <div align="right" class="form-group"  >
                                        <h:panelGroup id="many-list-box" rendered="#{not empty exportManager.selectedObjects}">
<div class="col-sm-6" style="float:left"> 
                                            <h:selectManyListbox id="multi-select-property"
                                                value="#{exportManager.selectedObjects}"
                                                styleClass="form-control multi-select" immediate="true"
                                                style="width:250px;height:250px">
                                                <f:selectItems value="#{exportManager.loadObjectNodes()}"
                                                    var="oneDetail" itemLabel="#{oneDetail.title}"
                                                    itemValue="#{oneDetail.objectId}" />
                                                <p:ajax event="change" process="@this" execute="@this" partialSubmit="true"
                                                update=":content-form:multi-select-property"
                                                    render="@form"></p:ajax>
                                            </h:selectManyListbox>

                                            <h:selectOneMenu styleClass="form-control" style="width:250px"
                                                value="#{exportManager.selectedObjects}" required="true">
                                                <f:selectItems value="#{exportManager.selectedObjects}" />
                                            </h:selectOneMenu>
</div>
                                        </h:panelGroup>
                                    </div>
                                </h:panelGroup>

这是我从selectOneMenu

中选择项目之前的屏幕截图

这是我从selectOneMenu

中选择项目后的屏幕截图

正如你可以看到一个新渲染的灰色框是带有新数据的框，正确呈现selectManyBox也在下面，所以当我引用页面时会发生这种情况，你可以在图片中看到：

我找不到解决此方法的方法，只有页面刷新修复了这个，所以我必须添加

onchange="submit()"

在selectOneMenu这会重新加载整个页面，这对用户不友好而且耗时一点。

Answer 1

您似乎正在使用CSS或JS库来设置正在重写DOM中元素的<h:selectManyListbox...。在使用AJAX调用中的重新呈现组件更新DOM之后，您需要执行必要的JS来样式化<h:selectManyListbox...。

您可以利用PrimeFaces oncomplete的{{1}}属性来完成此任务。

Ajax没有正确呈现SelectManyBox，它在页面引用后呈现

1 个答案: