p:commandButton doesn't work inside tabview - jsf-2

I'm trying to show a dialog using a p:commandButton, the p:commandButton is inside a tabView. I tried this way but without sucess, am I missing something? Thx
<p:tab title="Observations">
<div class="field select-field clearfix">
<label>Bloc</label>
<h:panelGroup layout="block" styleClass="actions">
<h:form>
<p:commandButton value="Add" styleClass="add"
action="#{blocCtrl.initBlocSetting}"
update=":dialog2" oncomplete="add_bloc.show()">
</p:commandButton>
</h:form>
</h:panelGroup>
<p:dialog id="dialog2" header="Bloc" modal="true"
widgetVar="add_bloc" minHeight="40" width="895">
<div class="popup-body">
<h:form>
<h:panelGroup layout="block"
styleClass="popup-field clearfix last">
<label class="the-label">Type bloc*</label>
<div class="the-field">
<h:inputText
value="#{blocCtrl.blocSettings.type}"
required="true"
requiredMessage="Error" />
</div>
</h:panelGroup>
<div class="popup-actions">
<button
onclick="$('.ui-dialog-titlebar-close').trigger('click');return false;"
class="red-btn">Annuler</button>
<h:commandButton value="OK" type="submit"
action="#{blocCtrl.addBlocSetting}"
update="add_messagePanel"
oncomplete="if(args && args.success){add_bloc.hide();}"
styleClass="green-btn" />
</div>
</h:form>
</div>
</p:dialog>
</div>

I had the same situation and after removing form tag before p:tabView it started to work
<h:form>
<p:tabView>
<p:tab title="title">
<h:form>
<p:commandButton actionListener="... />
</h:form>
</p:tab>
</p:tabView>
</h:form>

Related

JSF 2.2 content not rendered until page refreshed

I am loading stuff via AJAX into my JSF page from the server. However, not all of the content is displayed immediately, two divs arent displayed until the page is refreshed.
Here's the form for loading the content:
<h:form>
<h:dataTable value="#{consoleController.list}" var="item">
<h:column>
<h:commandLink class="list-group-item"
action="#{consoleController.defineLink()}">#{item}
<f:setPropertyActionListener target="#{consoleController.content}"
value="#{item}" />
<f:ajax event="action" render="menuDiv contenDiv facetDiv"></f:ajax>
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
These are the elements I want to load the code into.
<div class="col-sm-12">
<div class="col-sm-4">
<h:panelGroup id="menuDiv">
<ui:include src="#{consoleController.loadMenu()}" />
</h:panelGroup>
</div>
<div class="col-sm-8">
<h:panelGroup id="contentDiv">
<ui:include src="#{consoleController.loadPage()}" />
</h:panelGroup>
</div>
</div>
<div class="col-sm-12">
<h:form>
<h:panelGroup id="facetDiv">
<ui:include src="#{consoleController.loadFacet()}" />
</h:panelGroup>
</h:form>
</div>
menuDiv is displayed fine, the other two aren't displayed until I refresh the page.
What's the problem here?
I read that you cannot upload elements that don't exist in the JSF tree, but that's not the case here.
Well, turns out it was as easy as removing the h:form tag around the last panel tag:
<div class="col-sm-12">
<h:form>
<h:panelGroup id="facetDiv">
<ui:include src="#{consoleController.loadFacet()}" />
</h:panelGroup>
</h:form>
</div>
becomes:
<div class="col-sm-12">
<h:panelGroup id="facetDiv">
<ui:include src="#{consoleController.loadFacet()}" />
</h:panelGroup>
</div>
and now it works.

Primefaces reset messages in p:dialog

I am opening a popup on click of command link, and popup has a textbox and commandLink
whenever I press submit with textbox left blank, it shows validation msg, till now this is fine. Now if I close the popup using cross icon on top right. then again click to showPopup, it show the error messages . I want to clear that messages and open fresh popup.
below is my code
<p:commandLink id="showDialogButton" styleClass="add_icon"
value="ADD" onstart="#{dashboardBean.resetFoodPromoDTO()}" oncomplete="PF('dlg').show()" />
bean
public void resetFoodPromoDTO(){
foodPromoDTO=null;
}
popup dialog
<p:dialog id="dialog" visible="#{not empty facesContext.messageList}" styleClass="customized" widgetVar="dlg" draggable="true" closable="true" resizable="false" width="730">
<div class="popup_subheader">
<div class="float_left">Add - Food Promotion Activity</div>
<div class="float_right"></div>
<div class="clear"></div>
</div>
<div class="popuptext">
<div class="form-label"><label title="Project">Project: </label></div>
<div class="form-field"><p:inputText id="projectName" value="#{dashboardBean.foodPromoDTO.project}" required="true" requiredMessage="#{msg['validation.project.name']}"/>
<p:message id="projeMsgId" for="projectName" autoUpdate="true"/>
</div>
<div class="clear"> </div>
<div class="form-label"><label title="Promo Date">Promo Date:</label></div>
<div class="btn_area_popup">
<span>
<p:commandLink id="submitButton" validateClient="true" value="Save" action="#{dashboardBean.addFoodPromotion()}" update="#form" onuccess="PF('dlg').hide();" ajax="true"/>
</span>
</div>
<div class="clear"></div>
You have to update the dialog
<p:dialog id="dialog" visible="#{not empty facesContext.messageList}" styleClass="customized" widgetVar="dlg" draggable="true" closable="true" resizable="false" width="730">
<h:form id="dialog">
<p:panel id="dialogBody">
....
</p:panel>
</h:form>
</p:dialog>
You can update dialog with this code:
<p:commandLink id="showDialogButton" styleClass="add_icon"
value="ADD" actionListener="#{dashboardBean.resetFoodPromoDTO()}" oncomplete="PF('dlg').show()" update=":dialog:dialogBody" />
You have to use actionListener.

popup disappear even when validation failed

I am working with primefaces 3.5 and jsf2.I have a command Button that shows up a dialog as a popup to register a new customer. All fields are required. when i submit the form with missing some fields the popup disappears as if nothing happened. And when i click again on the button new it shows up the last filled form with error messages.
I need this to be shown first time i submit when validation is failed.
Here is a short version of my html code
<h:form id="mainForm">
<p:panel id="datatablePanel">
.........
<p:commandButton style="width: 8%;height: 100%" id="newButton" value="New" oncomplete="customerDialogNew.show()" icon="ui-icon-star"/>
</p:panel>
</:form>
<h:form id="newCustomerForm">
<p:panel id="customerPannel">
<p:dialog draggable="true" header="New Customer" widgetVar="customerDialogNew" id="dialog2">
<p:panelGrid id="newCustomer" columns="6" >
<p:outputLabel value="Name:" for="name" />
<p:inputText id="name" value="#{customerMB.name}" title="Name" required="true" requiredMessage="The Name field is required."/>
<p:message for="name" />
......
<p:commandButton style="height: 100%;width: 15%" value="Cancel" update="customerPannel" icon="ui-icon-arrowrefresh-1-n" process="#this" oncomplete="customerDialogNew.show()" />
<p:commandButton ajax="false" style="height: 100%;width: 15%" value="Save" icon="ui-icon-circle-check" styleClass="ui-priority-primary" actionListener="{customerMB.addCustomer()}"/>
</p:dialog>
</p:panel>
</h:form>
Cancel Button:
Change oncomplete="customerDialogNew.show()" to
oncomplete="customerDialogNew.hide()".
Save Button:
Remove ajax=false.
Add update="newCustomer".
So your Buttons looks like:
<p:commandButton style="height: 100%;width: 15%" value="Cancel" update="customerPannel" icon="ui-icon-arrowrefresh-1-n" process="#this" oncomplete="customerDialogNew.hide()" />
<p:commandButton style="height: 100%;width: 15%" value="Save" icon="ui-icon-circle-check" styleClass="ui-priority-primary" actionListener="#{customerMB.addCustomer()}" update="newCustomer"/>
Backing Bean:
public void addCustomer(){
//do something
System.out.println(name+"");
//set name to null to prevent seeing old value when adding the second(or more) customer
name=null;
//Hide customerDialogNew if everything done.
RequestContext.getCurrentInstance().execute("customerDialogNew.hide()");
}

h:commandLink refreshes the page before calling the action

I have a page with a logout button which is h:commandLink
<h:form>
<div id="top-nav">
<div id="logout" style="float: right; margin-left: 10px;">
<h:commandLink styleClass="top-nav-btn"
action="#{adminLogoutBean.logout}"
rendered="#{facesContext.externalContext.sessionMap['ccUserVO'] ne null}" value="Logout" immediate="true">
<f:ajax execute="#form" render="#none" />
</h:commandLink>
</div>
<div style="margin-left: -80px; margin-top: 70px;">
<p style="float: left;margin-left: 10px;">Please
enter client VIN or EMAIL</p>
<br />
<h:inputText styleClass="menus txfld_border_no_image required email"
minlength="5" style="width:300px;clear:right;display:inline;"
id="loginEmail" value="#{callCenterAdminBean.searchText}" />
<span class="btn-wrap" id="get_enabled"> <h:commandButton type="submit"
class="common_btn noprint submit" id="userlookup_btn" value="GET"
action="#{callCenterAdminBean.userLookup}">
</h:commandButton> </span>
<span class="btn-wrap" id="get_disabled" style="display:none"> <h:commandButton type="submit"
class="common_btn noprint submit" disabled='true' value="GET"
action="#{callCenterAdminBean.userLookup}">
</h:commandButton> </span>
</div>
</h:panelGroup>
</div>
</h:form>
When I click on Logout, I find the page refreshes first and then the action is called. Why does the page refresh? I want to call the bean method which will redirect to the login page using the navigation rules.
If you want to use the navigation you don't need the ajax , just remove the
<f:ajax execute="#form" render="#none" />
And remove the immediate="true" cause I don't see any reason for you to use it in the following use case...

Primefaces popup dialog not working

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>

Resources