Primefaces + MyFaces DataTable bug: Myfaces is not defined

I was trying to implement a hierarchical view using p:breadcrumb and p:dataTable components for each level of the hierarchy. The idea was to drill down in the hierarchy using a p:commandLink for each row in the table and to be able to go to a specific level using the breadcrumb. It was a straightforward idea until I came across a bug where the same p:commandLink was not working the second time after the user goes back using the breadcrumb.

I saw this JS error in the browser console:

ReferenceError: myfaces is not defined

and the source code throwing that error was this JS line:

return myfaces.oam.submitForm('form','form:categoryTable:0:j_id_13');


Breadcrumb code:

<p:breadCrumb id="breadcrumb">
                    <p:menuitem value="First Level" partialSubmit="true"
                        action="#{levelView.selectRoot}" process="@this"
                        update="tables,breadcrumb" />
                    <p:menuitem partialSubmit="true"
                        value="#{levelView.level_name}" process="@this"
                        update="tables,breadcrumb"
                        rendered="#{not empty levelView.selectedItem}" />
</p:breadCrumb>

First Level Table:

<h:panelGroup id="tables">

                    <p:dataTable id="firstLevelTable"
value="#{levelView.firstLevelItems}"
                        rendered="#{empty levelView.selectedItem}"
                        tableStyle="width:auto" editable="false" var="firstLevel"
                        nodeVar="node" resizableColumns="true">
                        <f:facet name="header">
                            <h:outputText value="First Level" />
                        </f:facet>

                        <p:column sortBy="#{firstLevel.id}">
                            <h:commandLink action="#{levelView.drillDown(firstLevel)}"
                                process="@this" update="tables">
                                <h:outputText value="#{firstLevel.id}" />
                            </h:commandLink>
                        </p:column>

Second Level Table:


                  <p:dataTable id="secondLevelTable"
                        rendered="#{not empty levelView.selectedItem}"
                        value="#{levelView.secondLevelItems}" tableStyle="width:auto"
                        editable="false" var="secondLevel" nodeVar="node"
                        resizableColumns="true" paginator="true"
                        paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                        rows="10" rowsPerPageTemplate="10,25">
                        <f:facet name="header">
                            <h:outputText value="Second Level" />
                        </f:facet>
                        <p:column sortBy="#{secondLevel.id}">
                            <h:outputText value="#{secondLevel.id}" />
                        </p:column>

After investigating the source codes loaded I found out the reason why.

oamSubmit.js is the source file this myfaces.oam.submitForm functions comes from. Apparently it is loaded for the h:commandLink inside the p:dataTable.

The issue is that the first dataTable has a h:commandLink in it which triggers loading of this script but the second dataTable does not have a h:commandLink in it so although it is a partialSubmit, after the first dataTable is hidden and second dataTable is displayed this script file disappears. After going back to the first level using the breadcrumb oamSubmit.js file is still missing thus leading to the error above.

After being sure it is something related to h:commandLink I replaced it with a p:commandLink instead which is the equivalent component from primefaces library the bug is gone.

Also if you are using the commandLink for a dataExporter you better add ajax="false" option to p:commandLink.Otherwise it won't work.