I'm struggling now with redirecting. I want to redirect from one page to another with usage of h:commandButton / p:commandButton. And that works, but i need to pass an argument/ parameter with that request. And then use that parameter instantly after the new page reloads.
First page:
<p:dataTable id="list" var="oneRow"
value="#{test.get_list()}" rowKey="#{oneRow.id}"
rows="15" paginator="true" paginatorAlwaysVisible="false"
paginatorPosition="bottom"
selection="#{test.oneRowObject}"
paginatorTemplate="{PreviousPageLink} {PageLinks} {NextPageLink}"
emptyMessage="----------" >
<p:column selectionMode="single"/>
<p:column headerText="ID" >
#{oneRow.getID()}
</p:column>
</p:dataTable>
And there is a commandButton which should redirect from page1 to page2, and in that page it should open dialogbox.
How can I do that? Do you have any suggestions or examples?
p - primefaces
I think you should use <f:param/>
<h:commandButton value="Send" action="#{bean.method}">
<f:param name="paramName" value="someValue" />
</h:commandButton>
Related
I have a setup in a view, where I display datatables dynamically. That is happening inside a p:accordion-Element, which is generating the tabs dynamically (and therefore the datatables inside).
The user now has the possibility (well, should have..) to add, edit and remove objects to the datatable and therefore to the object that is represented by the tab.
The add- and edit-functions work via dialogs. After successful adding or editing I want to update the datatable containing the data.
If I update the whole accordion-panel I lose the focus on the current tab which is really bad for the user-experience, especially because the other sub-pages of the project always only update the datatable.
After some googling I found out that I can't generate the IDs of JSF-components dynamically, what would make the whole thing a process of minutes.
I also do not have any index I could use to "cheat" and save in my backing-bean when I open the dialog.
I also found out that I could work-around this issue by using JSTL but this is prohibited due to a limited set of allowed languages.
The current setup looks like this:
<p:accordionPanel id="academicYearAccordionPanel"
value="#{academicYearAndClassController.academicYears}"
var="academicYear" multiple="true" dynamic="true" activeIndex="-1"
style="width:100%;">
<p:tab id="academicYear-#{academicYear.academicYear}" title="Jahrgang - #{academicYear.academicYear}">
<p:outputPanel style="float:right">
<p:commandButton value="Löschen" icon="ui-icon-close"
actionListener="#{academicYearAndClassController.setAcademicYear(academicYear)}"
process="#this"
oncomplete="PF('wConfirmAcademicYearDelete').show();">
</p:commandButton>
</p:outputPanel>
<p:spacer style="height:50px;" />
<p:separator />
<!-- Tabcontent -->
<p:outputPanel>
<p:outputPanel style="float:right">
<p:commandButton value="Hinzufügen" icon="ui-icon-plusthick"
actionListener="#{academicYearAndClassController.setAcademicYear(academicYear)}"
process="#this"
oncomplete="PF('wAddSchoolclassDialog').show();">
</p:commandButton>
</p:outputPanel>
<h:panelGrid columns="2">
<h:outputText
value="Klassen des #{academicYear.academicYear}. Jahrgangs" />
<p:spacer style="height:50px;" />
</h:panelGrid>
<p:dataTable emptyMessage="Keine Klassen vorhanden"
id="schoolclassTable"
var="schoolclass"
selection="#{academicYearAndClassController.schoolclass}"
value="#{academicYearAndClassController.getSchoolclasses(academicYear)}"
selectionMode="single" rowKey="#{schoolclass.name}"
scrollable="true" scrollHeight="500">
<p:column headerText="Name">
<h:outputText value="#{schoolclass.identifier}" />
</p:column>
<p:column headerText="Klassenlehrkraft">
<h:outputText
value="#{schoolclass.teacher.name} (#{schoolclass.teacher.symbol})" />
</p:column>
<p:column headerText="Klassenraum">
<h:outputText
value="#{schoolclass.room.name} (#{schoolclass.room.locationName})" />
</p:column>
</p:dataTable>
</p:outputPanel>
</p:tab>
</p:accordionPanel>
I want to update the element with the ID schoolclassTable. How can I achieve this?
I want refresh my lazytable from another from. I have the following xhtml:
<h:form id="tableform">
<p:remoteCommand name="updateTable" update="table" />
<p:dataTable widgetVar="tableWidget" id="table"
selection="#{personBean.selectedPerson}" selectionMode="single"
lazy="true" paginator="true" var="person" rowKey="#{person.id}"
value="#{personBean.personModel}" paginatorPosition="bottom" rows="5"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}">
<p:column filterBy="#{person.name}" headerText="Names:"
sortBy="#{person.name}">
<h:outputText value="#{person.name}" />
</p:column>
</p:dataTable>
<p:commandButton value="buttonInForm2" update=":tableform" />
<p:commandButton value="buttonInForm" update="#form" />
</h:form>
<h:form>
<p:commandButton value="directUpdate" update=":tableform" />
<p:commandButton value="directUpdate" update=":tableform:table" />
<p:commandButton value="remoteCommand" oncomplete="updateTable()" />
</h:form>
The remoteCommand (my current solution) and the buttons in the from refresh the table right. But when i use the "directUpdate"- buttons the filtertext of the table disappear. But i dont understand why? (The filter value stays at the background but the text is empty)
I know that i can use widgetVar.filter() on table but than the paginator will be reseted. My solution is the remoteCommand with it all works fine and the table reloads with current page and filter. (Better solutions are welcome)
The question why reset directUpdate the text and an update in the form not?
Thanks for time.
The <p:dataTable> has its own hidden inputs for among others pagination, selection and filtering so that the server side knows the client side state. This way it can prepare and return the same state as it is in the client side.
If you submit a certain form, only the inputs contained in the particular form will be sent, not from other forms. This is not a JSF specific problem. HTML has always worked that way. The world wide web would otherwise have looked very different.
With invoking the <p:remoteCommand> from outside the form, you're basically submitting the "right" form, namely the one it is contained in which also covers the data table.
Do note that you don't need a <p:commandButton> for it per se, just a simple <p:button ... onclick="updateTable(); return false;"> is already sufficient. Even the whole second form is unnecessary for the job.
I'm trying to open a new window from dataTable using primefaces. I've tried differents options:
h:commandLink
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<h:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</h:commandLink>
</p:column>
</p:dataTable>
</h:form>
2.p:commandLInk
<h:form id="form" target="_blank">
<p:dataTable id="Table" var="var_row" value="#{bean.table}" sortBy="tableId" >
<p:column>
<p:commandLink action="#{bean.goToPage}" value="Open Page"
onblur="this.form.target='_self'"
process="#this" ajax="false" target="_blank">
<f:setPropertyActionListener value="#{var_row}" target="#{bean.rowSelected}" />
</p:commandLink>
</p:column>
</p:dataTable>
</h:form>
It works, but not correctly. I mean, I get the new page open, but the original page becomes useless, all methods in this pages are not invoked when you clicked on them.
Has anyone experimented this before? Any idea to solve this?
I tried and I still couldn't get a 'commandLink' to open in a new window while at the same time using 'setPropertyActionListener'. I think you have to modify the underlying Primefaces javascript to open in a new window (I didn't try that).
You can try passing a parameter argument.
I have a simple example of p:tree.
<p:tree id="tree" styleClass="treeskin" value="#{TreeViewController.root}" var="node" dynamic="true" animate="true"
selectionMode="single" selection="#{TreeViewController.selectedNode}" highlight="true">
<p:ajax event="select" listener="#{TreeViewController.onNodeSelect}" update=":treeform:outputComponent"/>
<p:ajax event="expand" listener="#{TreeViewController.onNodeExpand}" />
<p:ajax event="collapse" listener="#{TreeViewController.onNodeCollapse}" />
<p:treeNode styleClass="treeskin">
<h:outputText value="#{node}"/>
</p:treeNode>
</p:tree>
I'm interested is it possible somehow when I click on a node to open a new page. I found that using onNodeClick I can open a new page using JavaScript. But if it's possible I want to send hidden value which I will use as a key later.
What are the possible solutions?
You could try embedding an <h:link/> in the <p:treeNode/>. Use the following construct
<h:link value="#{node}" outcome="destination?includeViewParams=true">
<f:param name="theParam" value="#{node.property}"/>
</h:link>
The includeViewParams=true bit is going to ensure the parameter you're trying to pass makes it across the request to the next page
I am using JSF 2.0 with Primefaces. I have a page with a data table containing a list of users in the system. Each user can have a collection of roles, so i would like to have a button to select a bunch of roles. I wanted this to be an ajax selector and reusable from other pages, so this is how i have laid it out.
User List page
<h:form prependId="false">
<p:dataTable id="userList" var="user" value="#{userBean.users}">
<p:column id="modelHeader">
<f:facet name="header">
Name
</f:facet>
<h:outputText value="#{user.name}" />
</p:column>
<p:column>
<f:facet name="header">
Select Roles
</f:facet>
<p:commandButton id="selectButton" oncomplete="roleDialog.show()" icon="ui-icon-search" title="Select Roles" />
</p:column>
</p:dataTable>
</h:form>
Dialog defined inside user list page, but the contents will be moved to an include to promote reusability
<p:dialog header="Roles" widgetVar="roleDialog" resizable="true" id="roleDialog" modal="true">
<h:form prependId="false">
<h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
<p:dataTable id="roleList" var="user" value="#{roleBean.roles}">
<p:column id="modelHeader">
<f:facet name="header">
Name
</f:facet>
<h:outputText value="#{role.name}" />
</p:column>
<p:commandButton id="selectButton" actionListener="#{roleBean.selectRoles}" title="Select Roles" />
</h:panelGrid>
</h:form>
</p:dialog>
My question is, I am not sure how to achieve the following.
I would like to pass arguments to the role selector as criteria before rendering the content in the dialog.I can do this via f:setPropertyActionListener.. correct?
After the role is selected, i would like to pass the selected id back to the user list page. I can do this via addCallbackParam, correct?
Then i would like to pass that value back into the userList bean to an action listener to associate this role(s) to the user
What is the best pattern to achieve this workflow in JSF. I do not want to duplicate my role selector in each page as i would like to re-use that.
Thank you for your patience in reading through this long post. I appreciate your response and
suggestions.
The best pattern for this would be to implement a composite component.