Updating an input in the header of a PrimeFaces datatable (JavaScript only)

Question

We have a PrimeFaces <p:dataTable> with a custom filter/search box in the table header:

<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 ... />
        .
        .
        .

It renders like:

As you can see, I filtered for James. So only rows with that are shown.

If you look into the lower left, there's also a tree-like structure where the user can click onto so that you see only these that are behind the node filter criteria (the datatable to the right is then updated).

We now had two possibilities:

1. Call dataTable.filter(); on tree node selection
2. Delete the <p:inputText> value

Calling dataTable.filter(); works, unfortunately, management decided to reset/delete the input field

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

which has no JSF value="..." atrribute.

Here's the <p:ajax> for the tree node to delete the input's value (using jQuery and plain 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 = '';" />

However, this simply does nothing to the <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">

(the above is the HTML as output by FireFox' debugging tools after a tree node click)

QUESTION :

What's wrong and how do I make it work (without the need having to add a JSF value for the input such as <p:inputText value="#{resultManager.filterSearchTerm}"> )?

Note that there's an update to the (correct) datatable component with the DOM ID :content-form:fixed-data .

Answer 1

You forgot to start your jQuery selector string with # :

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

Also you may need to escape the colons:

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

Check that you actually find the input:

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