更新PrimeFaces数据表标题中的输入（仅JavaScript）

Question

我们有一个PrimeFaces <p:dataTable> ，在表头中带有一个自定义过滤器/搜索框：

<h:form id="content-form">

    ...

    <p:dataTable id="fixed-data"
                 widgetVar="resultTable"
                 value="#{resultManager.dataModel}"
                 filteredValue="#{resultManager.filteredEntities}"
                 var="result"
                 rowKey="#{result.id}"
                 selectionMode="multiple"
                 selection="#{resultManager.selectedEntities}"
                 paginator="true"
                 paginatorPosition="bottom"
                 paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                 rows="#{resultManager.selectedRowsPerPage}"
                 scrollable="true"
                 scrollHeight="200"
                 rowsPerPageTemplate="25,50,100,200"
                 resizableColumns="true"
                 emptyMessage="#{msg['common.action.search.noResultsMessage']}">

        <p:ajax event="rowSelect" ... />
        <p:ajax event="rowUnselect" ... />
        <p:ajax event="sort" ... />

        <f:facet name="header">
            <h:panelGroup id="header-facet-panel"
                          layout="block">

                <p:inputText id="filterInput"
                             widgetVar="resultTableFilterInput"
                             onkeypress="if (event.keyCode == 13) { filter(); return false; }" />
                <p:commandButton id="search-btn"
                                 icon="ui-icon bx-icon-search"
                                 ... />

            </h:panelGroup>
        </f:facet>

        <p:column ... />
        <p:column ... />
        .
        .
        .

它呈现为：

如您所见，我筛选了James。 因此，仅显示带有该行的行。

如果您查看左下方，则还有一个树状结构，用户可以单击该结构，以便仅看到那些位于节点过滤条件后面的结构（然后更新右侧的数据表）。

现在，我们有两种可能性：

1. 调用dataTable.filter(); 在树节点选择上
2. 删除<p:inputText>值

调用dataTable.filter(); 不幸的是，管理部门决定重新设置/删除输入字段

        <p:inputText id="filterInput"
                     widgetVar="resultTableFilterInput"
                     onkeypress="if (event.keyCode == 13) { filter(); return false; }" />

没有JSF value="..."属性。

这是树节点的<p:ajax>用于删除输入的值（使用jQuery和纯JavaScript）：

    <p:tree id="tree"
            widgetVar="explorerTree"
            value="#{resultManagerExplorer.rootNode}"
            var="criterion"
            selectionMode="single"
            selection="#{resultManagerExplorer.selectedNode}">

        <p:ajax event="select"
                update=":content-form:fixed-data :content-form:result-sub-panel :content-form:growl"
                onstart="$( 'content-form:fixed-data:filterInput' ).attr( 'value', '' ); resultTableFilterInput.value = '';"
                oncomplete="resultTable.getPaginator().setPage(0); $( 'content-form:fixed-data:filterInput' ).attr( 'value', '' ); resultTableFilterInput.value = '';" />

但是，这对<input> 毫无作用：

<input aria-readonly="false"
       aria-disabled="false"
       role="textbox"
       id="content-form:fixed-data:filterInput"
       name="content-form:fixed-data:filterInput"
       value="James"
       size="70"
       onkeypress="if (event.keyCode == 13) { filter(); return false; }"
       class="ui-inputfield ui-inputtext ui-widget ui-state-default ui-corner-all"
       type="text">

（以上是单击树节点后 FireFox调试工具输出的HTML）

问题 ：

有什么问题以及如何使它起作用（无需为输入添加JSF值，例如<p:inputText value="#{resultManager.filterSearchTerm}"> ）？

请注意，使用DOM ID :content-form:fixed-data对（正确） :content-form:fixed-data组件进行了更新。

Answer 1

您忘记了使用#启动jQuery选择器字符串：

$('#content-form:fixed-data:filterInput')

另外，您可能需要避开冒号：

$('#content-form\\:fixed-data\\:filterInput')

检查您是否真正找到输入：

console.log($('#content-form\\:fixed-data\\:filterInput'));