I have been getting this error. I added id's to all the components and also changed the session scope after reading a few other suggestions on stackOverflow.
I am trying to create a collapsible panel which contains tabs.
tabbb.xhtml
<cc:implementation>
<h:panelGroup layout="block" styleClass="collapsiblePanel-header">
<h:commandButton id="toggleButton"
action="#{cc.attrs.bean1.togglePanel}"
styleClass="collapsiblePanel-img"
image="#{cc.attrs.bean1.collapsed ? '/resources/images/plus.png' : '/resources/images/minus.png'}" />
</h:panelGroup>
<h:panelGroup layout="block" rendered="#{cc.attrs.bean1.collapsed}"
styleClass="collapsiblePanel-img2">
<cc:renderFacet name="tabs">
<js:forEach items="#{cc.attrs.bean2.tabBean}">
<h:outputText>"${cc.attrs.bean2.tabBean}"</h:outputText>
<li><h:commandLink
value="#{cc.attrs.bean2.tabBean.description}">
<f:param name="tabIndex" value="#{cc.attrs.bean2.randomNum}" />
<f:ajax event="click" render=":contentForm"
listener="#{bean2.handleTabChange}" />
</h:commandLink>
</li>
</js:forEach>
</cc:renderFacet>
</h:panelGroup>
<cc:insertChildren />
<h:outputStylesheet library="css" name="components.css" />
</cc:implementation>
using page: tabbedcollapsible.xhtml
<h:body>
<h:form id="testform">
<h:outputText value="Tabbed collapsible panel test page" />
<jl:tabbb bean1="${collPanel}" bean2="${tabbBean}">
<f:facet name="tabs">
<h:outputText value="This Is Cool" />
</f:facet>
</jl:tabbb>
</h:form>
</h:body>
Both the beans collPanel and tabbBean are request scoped.
Also the form does not render the tabs. I am new to JSF and I have been stuck with this for a long time. Thanks.
Related
I have a primefaces dialog and what I want to do is process inputtext before commandbutton action starts. Inside myController.sendToPostBox method, myController.rejectionReason string returns null. Here is my view code.When I remove process attribute, commandbutton doesn't works.
<h:form>
....
<p:dialog id="myPanel"
widgetVar="myPanelId"
resizable="true"
appendToBody="true"
draggable="true"
height="200"
width="300">
<p:panelGrid id="myPanelGridId" style="width: 250px;" styleClass="panelGridWithoutBorder">
<p:row>
<p:column colspan="2">
<p:inputTextarea style="width: 250px;" value="#{myController.rejectionReason}"/>
</p:column>
</p:row>
<p:row>
<p:column>
<p:commandButton value="Save"
oncomplete="if (!args.validationFailed) myPanel.hide();"
process="myPanelId"
action="#{myController.sendToPostBox()}"/>
</p:column>
<p:column>
<p:commandButton value="Close" />
</p:column>
</p:row>
</p:panelGrid>
</p:dialog>
</h:form>
Just place the <h:form> inside the dialog (instead dialog inside the <h:form>)
Explanation:
When you use appendToBody="true" you dialog is being transferred outside of the form that wraps it to the body of the generated html , and since there is no form inside the dialog you can't really submit it.
Also take a look at this thread: Proper Construct for Primefaces Dialog
You need something like this:
<h:form id="formDialog">
<p:commandButton id="basic" value="Basic Dialog" onclick="PF('dlg1').show();" type="button" />
</h:form>
<p:dialog id="basicDialog" header="Basic Dialog" widgetVar="dlg1">
<h:form id="formUser">
<h:panelGrid id="grid" columns="2">
<h:outputLabel value="Username:" />
<p:inputText id="user" value="#{user.name}" />
<h:outputLabel value="Password:" />
<p:inputText id="password" value="#{user.password}" />
<h:commandButton value="Login" id="btn" process="#formUser" actionListener="#{user.login}" />
</h:panelGrid>
</h:form>
</p:dialog>
"login" in the actionListener tag is a method in the User(bean) class, that needs the #ManagedBean annotations.
I am using the JSF 2.0 and primefaces 3.5. the problem i am facing is i have created a datatable on a page .. every things works fine along with pagination and filtering, but when i include the same page into the template ... the pagination and filtering stop working.. any idea regarding this
the code is
<h:form id="form">
<p:dataTable var="row" rowKey="row.attackID"
value="#{attackBean.list}" id="tableAttack" paginator="true"
rows="10" selection="#{attackBean.selectedAttack}"
filteredValue="#{attackBean.filteredAttack}"
rowsPerPageTemplate="5,10,15" selectionMode="single">
<p:ajax event="rowSelect" update=":centerForm:form:display"
oncomplete="dlg.show()" />
<p:column headerText="Attack-ID" filterBy="#{row.attackID}">
<h:outputText value="#{row.attackID}" />
</p:column>
<p:column headerText="Action Name" filterBy="#{row.attackName}">
<h:outputText value="#{row.attackName}" />
</p:column>
<p:column headerText="Defended User" filterBy="#{row.userID}">
<h:outputText value="#{row.userID}" />
</p:column>
<p:column headerText="Action Taken">
<h:outputText value="#{row.actionTaken}" />
</p:column>
<p:column headerText="Attack Time">
<h:outputText value="#{row.attackTime}" />
</p:column>
</p:dataTable>
<p:dialog id="tDialog" header="Threat info" widgetVar="dlg"
modal="true" height="250" width="300" showEffect="explode"
hideEffect="bounce">
<h:panelGrid id="display" columns="1" cellpadding="4">
<h:outputText value="Attack ID: #{attackBean.selectedAttack.attackID} " />
<h:outputText value="Description: #{attackBean.selectedAttack.userID}" />
<h:outputText
value="Action Taken: #{attackBean.selectedAttack.actionTaken}" />
</h:panelGrid>
</p:dialog>
</h:form>
here is the main templete code
<h:body style="">
<div id="page" >
<h:panelGroup id="mainPanel">
<div id="left" class="bar">
<ui:insert name="left">
<ui:include src="commonLeft.xhtml" />
</ui:insert>
</div>
<div id="center">
<div id="hDiv">
<ui:insert name="left">
<ui:include src="commonHeader.xhtml" />
</ui:insert>
</div>
<div id="cDiv">
<h:form id="centerForm">
<h:panelGroup id="centerPanel" render="mainPanel">
<ui:include src="#{browse.url}" />
</h:panelGroup>
</h:form>
</div>
</div>
<div id="right" >
<ui:insert name="right">
<ui:include src="commonFooter.xhtml" />
</ui:insert>
</div>
</h:panelGroup>
</div>
</h:body>
I assume you are including your template in this section:
<h:form id="centerForm">
<h:panelGroup id="centerPanel" render="mainPanel">
<ui:include src="#{browse.url}" />
</h:panelGroup>
</h:form>
If that's the case, then you have a problem of nested forms. That is not allowed and the inner form is getting removed from the HTML code (you can see that in the source code in the browser). You should not impose the form in the parent template, and let the children create the forms they are going to use.
I have a jsf page having a popup button that opens a following dialog popup:
</h:form>
<p:dialog id="dialog" header="Select different user"
widgetVar="dlg" appendToBody="true">
<h:form id="form23">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{loginBean.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login" />
</f:facet>
</h:panelGrid>
</h:form>
</h:form>
But instead of opening as popup it is getting displayed outside the page itself. the dialog is outside the main form. Help!!
I tried that but still the same problem persists..below is my modified code..
<h:form id="create-ticket">
<p:dialog id="dialog" header="Select different user" widgetVar="dlg" appendToBody="true">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{loginBean.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<h:inputSecret value="#{loginBean.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login"
/>
</f:facet>
</h:panelGrid>
</p:dialog>
<h:panelGroup>
<h:outputLabel value="#{I18N['Create_Ticket_for_other_users']}" styleClass="atf-header"></h:outputLabel>
</h:panelGroup>
<h:panelGroup id="search_section" layout="block"
styleClass="atf-content-area atf-separarot-botton"> <!-- This is the section where we get the grey background -->
<h:panelGroup id="input_search_section" styleClass="">
<h:outputText id="name" value="Siddharth Mishra"
labelStyleClass="atf-label">
</h:outputText>
</h:panelGroup>
<h:panelGroup styleClass="atf-right atf-inline-block">
<p:commandButton id="btn_search" value="select different user"
styleClass="atf-button-search" onclick="dlg.show();" type="button"
>
</p:commandButton>
</h:panelGroup>
</h:panelGroup>
Now i only have one form you can see the popup dialog section + the button which is calling the popup under h:panelgroup.Atached is the image how the form currently looks Thanks in advance
You need to restructure your code.
*Don't nest forms inside other forms.
*You dont have the end-tag of your p:dialog.
<h:form>
<p:dialog id="dialog" header="Select different user"
widgetVar="dlg" appendToBody="true">
//Content ex inputtext
</p:dialog>
<p:commandButton value="Show Dialog" onclick="dlg.show();" type="button" />
</h:form>
I want to show a different page in a dialog/lightBox(Primefaces) and after that page submitted return back to the first page.
<h:link onclick="createUserDialog.show();" value="Create New User">
<p:dialog widgetVar="createUserDialog" modal="true">
<h:outputLink value="createUser.jsf" >
<ui:include src="createUser.xhtml"></ui:include>
</h:outputLink>
</p:dialog>
</h:link>
Something like this?
<p:commandLink onclick="createUserDialog.show();" value="Create New User" />
<p:dialog widgetVar="createUserDialog" modal="true">
<ui:include src="createUser.xhtml" />
</p:dialog>
And in createUser.xhtml:
<h:body>
<h:form>
...
<p:commandButton value="button" oncomplete="createUserDialog.hide();" />
</h:form>
</h:body>
I need to show and hide component in my JSF 2-PrimeFaces application, please find my code below for the same:
<p:outputLabel for="online_offer" value="Online offer#{msg._question_mark}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:selectBooleanButton id="online_offer" value="#{QckPstBen.offer.isExpired}" onLabel="Yes" offLabel="No" onIcon="ui-icon-check" offIcon="ui-icon-close" >
<f:ajax event="click" render="#form" />
</p:selectBooleanButton>
</h:panelGrid>
</p:panel>
<h:outputLabel value=" " />
<h:panelGroup rendered="#{QckPstBen.offer.isExpired}">
<p:outputLabel for="website" value="Website/link to the offer#{msg._colon}" styleClass="font-size-1em font-weight-bold input-panel-main" />
<p:panel>
<h:panelGrid columns="1">
<p:inputText id="website" required="true" size="38" />
<p:watermark for="website" value="www.discountbox.in" />
</h:panelGrid>
</p:panel>
</h:panelGroup>
But it doesnt work, any clue
PrimeFaces components doesn't support <f:ajax>. Use <p:ajax> instead.
<p:selectBooleanButton ...>
<p:ajax update="#form" />
</p:selectBooleanButton>
Note that I omitted the event attribute, it defaults here to click already.
Place rendered on children of <h:panelGroup> instead or place a container of some sort around it, for example p:panel.
This may be OBE by now but...
When referencing the page bean, don't I recall in the #{} context, the convention of using lowercase for class names and method/attributes of the page bean (i.e. not #{QckPstBen.offer.isExpired} but #{qckPstBen.offer.isExpired}?