Question

如果包含它的表单使用f：ajax重新呈现，则工具提示不会在鼠标悬停时显示。

<h:form id="childForm">
    <div class="form-body form-body-margin-top">
        <div class="row form-group col-md-12">
                <h:selectOneMenu styleClass="form-control" value="#{bean.someCondition}">
                    <f:selectItem itemLabel="Yes" itemValue="true" />
                    <f:selectItem itemLabel="No" itemValue="false" />
                    <f:ajax execute="@this" render="childForm" />
                </h:selectOneMenu>
        </div>
    </div>
    <t:div styleClass="row form-group col-md-12" rendered="#{!bean.someCondition}">
        <label>Choose Catalog
            <sup><h:outputText id="tip1" class="fa fa-info-circle blue"/></sup> <p:tooltip for="tip1" value="Choose a category" position="top right" />
        </label>
    </t:div>

    <t:div rendered="#{bean.someCondition}">
        <label>Hello 
            <sup><h:outputText id="tip2" class="fa fa-info-circle blue"/></sup> <p:tooltip for="tip2" value="Choose a name" position="top right" />
        </label>
    </t:div>
</h:form>

问题很简单：首次加载页面时在下拉列表中选择“是”，可以看到“选择名称”的工具提示正常工作。当我在下拉列表中选择“否”重新渲染时，“选择一个类别”的工具提示是可见的，但不会显示。再次，如果我将其更改回“是”，“选择名称”的工具提示是可见的，并且无法正常工作。

摘要：工具提示仅在页面加载后才起作用，然后停止工作以便随后重新呈现表单。看起来像DOM问题给我。好像在工具提示的“for”属性中的任何内容在重新渲染时无法在DOM中使用。任何解决方案？

Answer 1

我找不到纯JSF方法，所以用JS来实现这个，根据我的问题是当PF尝试搜索它们时，组件tip1，tip2不存在于DOM中（可能是jsf生命周期事物）因为渲染属性删除从DOM应用的组件。我所做的是使用一个css类.hide，它将隐藏的可见性设置为。它将组件保留在DOM中而不是删除它：

.hide {
 visibility: hidden;
}

现在对于上面的“呈现”属性我刚刚用一个条件表达式替换，该表达式以我们想要渲染的方式应用hide类。

<t:div styleClass="row form-group col-md-12 #{!bean.someCondition?'':'hide'}>
    <label>Choose Catalog
        <sup><h:outputText id="tip1" class="fa fa-info-circle blue"/></sup> <p:tooltip for="tip1" value="Choose a category" position="top right" />
    </label>
</t:div>

这有助于在页面加载时呈现我们想要的东西。现在，对于动态行为，当选择下拉值时，我使用js来从t：div切换hide类。我在h：selectonemenu的onchange上调用了一个函数。

function changepage(select) {
        if(select.value == 'false') {
          $("#onno").removeClass('hide');
          $("#onyes").addClass('hide');
        }
        else if(select.value == 'true') {
          $("#onyes").removeClass('hide');
          $("#onno").addClass('hide');
        }
    }

所以整个页面现在看起来像这样：

<script>
    function changepage(select) {
        if(select.value == 'false') {
        $("#onno").removeClass('hide');
        $("#onyes").addClass('hide');
        }
        else if(select.value == 'true') {
        $("#onyes").removeClass('hide');
        $("#onno").addClass('hide');
        }
    }
</script>

<style>
.hide {
visibility: hidden;
}
</style>


<h:form id="childForm">
<div class="form-body form-body-margin-top">
    <div class="row form-group col-md-12">
            <h:selectOneMenu styleClass="form-control" value="#
            {bean.someCondition}" onchange="changepage(this)">
                <f:selectItem itemLabel="Yes" itemValue="true" />
                <f:selectItem itemLabel="No" itemValue="false" />
                <f:ajax execute="@this" render="childForm" />
            </h:selectOneMenu>
    </div>
</div>

<t:div id="onno" styleClass="row form-group col-md-12 #{!bean.someCondition?'':'hide'}">
    <label>Choose Catalog
    <sup><h:outputText id="tip1" class="fa fa-info-circle blue"/></sup> 
    <p:tooltip for="tip1" value="Choose a category" position="top right" />
    </label>
</t:div>

<t:div id="onyes" styleClass="#{bean.someCondition?'':'hide'}">
    <label>Hello 
    <sup><h:outputText id="tip2" class="fa fa-info-circle blue"/></sup> 
    <p:tooltip for="tip2" value="Choose a name" position="top right" />
    </label>
</t:div>
</h:form>

通过这种方式，没有任何组件从dom中移除，它们只是不可见。因此，当p：tooltip的“for”属性引用它们时，它们可用。

Answer 2

这可能是id =＆＃34; tip2＆＃34;的问题。请尝试在工具提示中编写完整路径。

之类的东西

<p:tooltip for=":childForm:....:tip2" ... />

（我不确定t：div是否获取了id，但如果是，请自行设置id并尝试使用完整id路径的工具提示）

p：当包含它的表单被渲染 - 重新渲染时，工具提示不起作用

2 个答案: