The form component needs to have a UIForm in its ancestry.

[bjorntj]

Copied the crud example from the freya project but I get the following error messaging when showing the page:

"The form component needs to have a UIForm in its ancestry. Suggestion: enclose the necessary components within <h:form>"

Tried to include a commandbutton in the empty test page in freya, looking like this:

Code: Select all

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                template="/WEB-INF/template.xhtml">
             
    <ui:define name="title">Empty Page</ui:define>

    <ui:define name="content">
        <div class="grid">
            <div class="col">
                <div class="card">
                    <h4>Empty Page</h4>
                    <p>This is your empty page template to start building beautiful applications.</p>
                    <h:form>
                        <p:growl id="messages" showDetail="true" />
                        <p:commandButton value="Test" action="#{sessionController.test}" ajax="true"/>
                    </h:form>
                </div>
            </div>
        </div>
    </ui:define>

</ui:composition>

And I still get the same error. What am I missing here or is there a bug in the Freya theme or?



BTJ

[bjorntj]

If I remove h:form element, then I get the following error log in my java console:

"org.primefaces.util.AjaxRequestBuilder : Component 'j_idt39' should be inside a form or should reference a form via its form attribute. We will try to find a fallback form on the client side."


But this log is gone when the h:form element is added, so not sure where the messages component get this error from...

[bjorntj]

After some more digging, I found out that it is this inputField in topbar.xhtml file that is the trigger:

<p:inputText placeholder="Search..." />


But why doesn't the demo project complain about the same?

[mert.sincan]

Hi,

Search input is wrapped by h:form in our template page. Please see;

Code: Select all

<ul>
          <h:form onsubmit="return false;">
                <h:panelGroup styleClass="search-input-wrapper">
                      <p:inputText placeholder="Search..." />
                        <i class="pi pi-search"/>
                  </h:panelGroup>
          </h:form>
</ul>

Best Regards,

[bjorntj]

Yes, but there is 2 of them (at least in the files I have downloaded), for some reasons...:

Code: Select all

<div class="layout-topbar-right">
                <ul class="layout-topbar-actions">
                    <li class="topbar-item search-item ">
                        <a href="#">
                            <i class="topbar-icon pi pi-search"/>
                        </a>
                        <h:panelGroup styleClass="search-input-wrapper">
                            <p:inputText placeholder="Search..." />
                            <i class="pi pi-search"/>
                        </h:panelGroup>
                        <ul>
                            <h:form onsubmit="return false;">
                                <h:panelGroup styleClass="search-input-wrapper">
                                    <p:inputText placeholder="Search..." />
                                    <i class="pi pi-search"/>
                                </h:panelGroup>
                            </h:form>
                        </ul>
                    </li>
                    <li class="topbar-item user-profile">

I guess one of those can be removed?

[mert.sincan]

Yes, you're right! One of them is for mobile and the other is for desktop animations. So, you can wrap search inputs with h:form for now. We need to change our implementation for this feature. Thanks a lot for your report. I'll talk about it with my teammate.

Best Regards,