JSF 2.2 content not rendered until page refreshed - jsf-2

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.

Related

p:commandButton doesn't work inside tabview

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>

<h:commandButton> not working inside <ui:define>

I created a facelet template called loginRegisterTemplate.xhtml. When I use it in a template client and I place a in it, the method in the managed bean is not invoked. Without the template the button is working fine. Why is this happening?
<ui:composition template="resources/css/faceletsTemplates/loginRegisterTemplate.xhtml">
<ui:define name="top">
Login Page
</ui:define>
<ui:define name="content">
<div align="center">
<h:panelGrid columns="3" columnClasses="rightalign,leftalign,leftalign">
<h:outputLabel value="Username:" for="userName"/>
<h:inputText id="userName" label="Username" required="true" value="#{loginBean.userName}" />
<h:message for="userName" />
<h:outputLabel value="Password:" for="password"/>
<h:inputText id="password" label="Password" required="true" value="#{loginBean.password}" />
<h:message for="password" />
</h:panelGrid><br/>
<h:button value="Back to Home" outcome="home"/>
<h:commandButton id="login" value="Login" action="#{loginBean.doLogin}"/>
</div>
</ui:define>
</ui:composition>
</h:body>
The simple <h:button> next to it, on the other side, is working fine.
Here is the body of my template file:
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:body>
I have looked here: h:commandLink / h:commandButton is not being invoked but I couldn't find which problem causes that.
Thanks!
Why is the h:commandButton not working?
Your problem is number 1 in the answer you have checked.
UICommand and UIInput components must be placed inside an UIForm
component, e.g. <h:form>.
Why is the h:button working then ?
from the h:button docs:
Render an HTML "input" element of type "button". The value of the
component is rendered as the button text and the outcome of the
component is used to determine the target URL which is activated by
onclick.
So ...
JSF will put your h:button outcome value in a javascript function that will be executed at an onclick event. But it will execute the action of the h:commandButton on the form submit with the POST method, so there should be a form to submit.

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.

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

table not showing data when uses pagintion

I have a from like this
<h:form id="logForm" prependId="false">
<div class="leftcol">
....
<h:commandButton value="Apply Filters"
action="#{exporterReview.applyFilterAction}">
</h:commandButton><br></br><br></br>
....
</div>
<div class="rightcol1" >
<p:dataTable var="exporter"
value="#{exporterReview.exporters}"
paginator="true" rows="5"
height="400" paginatorPosition="top"
emptyMessage="#{exporterReview.noExporterFound}">
<p:column>
<div style="....">
<h:graphicImage value="#{exporter.imgPath}" />
</div>
<div style="...">
<h:commandButton value="Update"
action="#{exporterReview.updateExporter}"
rendered="#{login.updateState}"
style="... ">
<f:param name="exporterid"
value="#{exporter.exporterId}" />
</h:commandButton>
</div>
<div class="arrowbuttons">
<span class="arrow"></span>
</div>
<p:spacer height="10" width="20"/>
<h:commandButton value="#{exporter.organizationName}"
action="#{exporterReview.viewExporter}"
style="...">
<f:param name="exporterid" value="#{exporter.exporterId}" />
<f:param name="disableLink" value="#{exporter.disableLink}" />
</h:commandButton>
<div style='padding-top:10px'>
<h:outputLabel value="City: " style="color: #1c6ace;"/>
<h:panelGroup rendered="#{not exporter.disableLink}">
<h:commandLink value="#{exporter.cityName}"
style="text-decoration: underline"
disabled="#{exporter.disableLink}"
onclick="openCityPopup(#{exporter.cityId});" >
</h:commandLink>
</h:panelGroup>
<h:panelGroup rendered="#{exporter.disableLink}">
<h:outputText value="#{exporter.cityName}"></h:outputText>
</h:panelGroup>
</div>
<div style='padding-top:3px'>
<h:outputLabel value="Email Address: " style="color: #1c6ace;"/>
<a href="mailto:#{exporter.emailAddress}">
<h:outputText value="#{exporter.emailAddress}"
style="..">
</h:outputText>
</a>
</div>
<div style='padding-top:3px'>
<h:outputText value="#{exporter.categoryDesc}"
escape="false" />
</div>
<div class="horizontalline"></div>
</p:column>
</p:dataTable>
</div>
</h:form>
Here is the filter method
public void applyFilterAction() {
....
//Setting whereParam so that whenever user navigate from page And return back
// the grid is populated with the previous search criteria
session.setAttribute("settingWhereParam", whereParam);
getExporterGrid();
} //end of applyFilterAction
private void getExporterGrid() {
....
exporters.add(new Exporter(Datatable values));
} //end of getExporterGrid
The problem is when i am on first page and do the search then every thing works fine. Here is the first picture.
Then if i apply search then it becomes
But if i do pagination , say go to page 4 and then apply the search then no result shows
But then nothing show
Why it is happening? What i am doing wrong ? I am using Prime faces 2.2. Its an old program.
Thank you
I'm not sure if this will work in primefaces 2.2, but in version 3+, you can specify an update attribute.
Your commandButton would look like this:
<h:commandButton value="Apply Filters" action="#{exporterReview.applyFilterAction}" update="#form">
I did it :). Actually i did a workaround. What i did, i used onClick event on my filter Button. Like
<h:commandButton id="filterButton"
value="Apply Filters"
style=""
action="#{exporterReview.applyFilterAction}"
onclick="filterButtonClick(event)" />
Now when button is clicked, then first my client side code will run. So i get all the values and then using ajax call the servlet, and save the result in session object. After that my server side code will run, and my action method invoked, in which i simple return the url of the same page.
public String applyFilterAction() {
return "Exporter_Review?faces-redirect=true";
} //end of applyFilterAction()
Now when page invoke i simply check for the result in the session. And if session object present then simply get the values from that object and shows the result. And when i leave the page i simply put null in the session against object, now default is used. Now everything is working fine :)

Resources