table not showing data when uses pagintion - jsf-2

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 :)

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.

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

Updating PrimeFaces datatable row from a dialog

I have a datatable that has a rowexpandor inside which contains two panels one is regular text and one holds a list of comments. I have a button that allows users to add new comments. Now that dialog is in a separate form see code below. My problem is that once the comment has been added the panel that holds all comments is not being refreshed. Here is a code sample.
<h:form id="formName">
<p:dataTable id="prTable" rowIndexVar="index" sortMode="multiple" styleClass="iris_table" var="value" value="#{bean.listValues}"
paginator="true" rows="10" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
rowsPerPageTemplate="5,10,15">
<p:ajax event="rowToggle" onstart="rowMutalExclusive();"/>
<p:column style="width:2%">
<p:rowToggler />
</p:column>
<p:column id="message"
headerText="Description"
filterMatchMode="contains" filterStyle="display: none;">
<h:outputText value="#{value.description}" />
</p:column>
<p:column id="deadline" headerText="Deadline" filterStyle="display: none;">
<h:outputText value="#{value.endDate}">
<f:convertDateTime pattern="dd.MM.yyyy " />
</h:outputText>
</p:column>
<p:rowExpansion >
<div class="iris_peerreview_details">
<div class="comments">
<p:commandButton value="Comment" process="#this" update=":dialogForm:commentDlg" oncomplete="commentDialog.show()">
<f:setPropertyActionListener target="#{bean.review}" rendered="check" value="#{value.review}"></f:setPropertyActionListener>
</p:commandButton>
<div class="clear"></div>
</div>
<p:panel id="pnlHelp" style='border:none'>
<p:dataList id="check" rowIndexVar="index" value="#{bean.commentsFromCase(value.review)}" var="commentReview">
<div class="messages">
<p>
<h:outputText value="#{commentReview.date}">
<f:convertDateTime pattern="MM.dd.yyyy 'at' h:mm a"></f:convertDateTime>
</h:outputText>
</p>
<p class="message">
<h:outputText styleClass="message" value="#{commentReview.comment}"/>
</p>
</div>
</p:dataList>
</p:panel>
</div>
</p:rowExpansion>
</p:dataTable>
</h:form>
<h:form id="dialogForm" >
<p:dialog id="commentDlg" header="Comment" widgetVar="commentDialog" resizable="false"
modal="true">
<h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
<h:outputText value="Comment"" />
<h:inputText value="#{bean.comment}" required="true" requiredMessage="Please enter a comment" style="font-weight:bold"/>
<p:commandButton id="save" actionListener="#{bean.commentCase()}" update=":formName:prTable:pnlHelp" oncomplete="commentDialog.hide();"
value="Comment"/>
<p:commandButton id="cancelButton" onclick="commentDialog.hide()" value="Cancel"/>
</h:panelGrid>
</p:dialog>
</h:form>
You have to excuse me as i had to remove some code and mask some of it but generally this is what it does. Now once the comment button is clicked the dialog appears and the comment is store in the db and everything works well but i cannot get it to update the panel of that row that holds the comment.
The problem i am guessing is the following once this page its rendered the panel id is actually
formName:prTable:0:pnlHelp
and the value changes for each row. Now i understand that my update in the dialog is not able to locate the id but if i enter the index and try to create this specif id on render it throws an exception that it cannot be found.
I have attempted by placing the dialog inside the dataTable and than it works ok with updating but it causes many more problems, so i had to drop that option. Also if i update the full table it ok but the problem is that the rowexpandor closes which is not what its required, plus it not really don't like refreshing the full table as that is not the purpose of this. I am using Primeface 4.0 if this helps. With jsf 2.0.
Yes, the value of id changes for every row. Try to update it with a css selector, changing your button to
<p:commandButton id="save" actionListener="#{bean.commentCase()}" update="#([id$=pnlHelp])" oncomplete="commentDialog.hide();"
value="Comment"/>
The code will update all components ending with "pnlHelp". More info: http://www.w3schools.com/cssref/css_selectors.asp

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

How to use jsf 2.0 f:ajax option for render a popup box

<div class="staff_ActionListTable">
<h:panelGroup id="imccomponent">
<div class="scroll-pane2Container">
<div class="scroll-pane2" id="pane2">
<div class="actionInnerTable">
<ui:repeat var="action" value="#{immediateActionListController.actionList}" varStatus="status">
<h:panelGroup rendered="#{status.even}">
<!--Update button-->
<h:commandButton image="updateBtn.gif" value="Update1">
<f:ajax event="click" execute=":pp1" render=":pp1" listener="#{immediateActionListController.loadEditableActionComponent}" onevent="im_action_popupopener"/>
<f:param value="#{action.taskId}" name="immediateTaskIdForEdit">
</f:param>
</h:commandButton>
</h:panelGroup>
</ui:repeat>
</div>
</div>
</div>
</h:panelGroup>
</div>
<!--Add button-->
<div class="staffMember_ButtonContainer">
<h:commandButton image="addImmediateActionBtn.gif">
<f:ajax event="click" execute="imccomponent" render="imccomponent" listener="#{immediateActionListController.loadAddActionPopUp}" onevent="action_im_add_popupopener"/>
</h:commandButton>
</div>
<h:panelGroup id="pp1">
<!--Popup1 start: Add Action-->
</h:panelGroup>
My code is like above, I want to bind particular values for 'pp1' pop-up box when I press the updateBtn button. That mean I want to render only that pop-up box part, then how I should specify execute, render option for this (I have try with execute=":pp1" render=":pp1" but it is not working). Thanks
Your execute is wrong. You need to execute the button itself, not the render target.
<f:ajax execute="#this" render=":pp1" listener="#{immediateActionListController.loadEditableActionComponent}" onevent="action_im_add_popupopener"/>
Otherwise the listener is never called. Note that I removed the event="click" as it is the default already.
You can add iframe, and add css for show popup mode and uses all navegation cases. this a simple sample.
When the case navegation is ok and the commponent has target attribute, this case navegation toViewId is show in the iframe (into panelFrame), and until iframe page navegation to a parentViewId, this iframe close and return to parent page
source https://github.com/yracnet/hiska-HskFrame/

Resources