p:tooltip 在包含它的表单被渲染-重新渲染时不起作用

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 来实现这一点，根据我的问题是组件tip1，tip2 在PF 尝试搜索它们时不存在于DOM 中（可能是jsf 生命周期的东西），因为渲染属性从 DOM 中移除它所应用的组件。我所做的是使用一个 CSS 类 .hide 将可见性设置为隐藏。它将组件保留在 DOM 中而不是删除它：

.hide {
 visibility: hidden;
}

现在对于上面的“渲染”属性，我只是用一个条件表达式替换了它，它以我们希望它呈现的相同方式应用隐藏类。

<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 切换隐藏类。我在 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="tip2" 可能有问题。请尝试在工具提示中写入完整路径。像

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

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