I am trying to add a footer to my bootsfaces datatable in my web application.
<f:facet name="footer">
<b:commandButton value="Create Tyre" icon-awesome="plus" look="primary"
actionListener="#{tyreMasterController.prepareCreate()}"
update=":TyreMasterCreateForm" oncomplete="PF('TyreMasterCreateDialog').show()">
</b:commandButton>
</f:facet>
The command button or anything else doesnot show up. Please help in this
Related
I want to show a list of key-value pairs in a datatable, where each pair is one row, inside an overlay panel. When a key-value pair is clicked, i want to update a <p:inputText>-Element, which is OUTSIDE the overlaypanel with the key-value of the selected row and simultaniously close the overlaypanel.
I just migrated from PF 4.0 to PF 6.1 and now im facing the issue, that whenever i use an update-attirbute inside the overlay panel, it appears to be empty and no content is shown.
here is an code example:
<p:inputText
id="inputPvId"
styleClass="form_input"
readonly="true"
value="#{bean.selectedValue.get(0)}" />
<p:commandButton
icon="ui-icon-link"
id="selectValue"
value="#{msg_properties.chooseValue}" />
<p:overlayPanel
for="selectValue"
id="overlayValueSelector"
widgetVar="overlayValueSelector
dynamic="true"
styleClass="form_input_widest">
<p:dataTable
var="car"
value="#{dtBasicView.cars}">
<p:column
headerText="Id">
<h:outputText
value="#{car.id}" />
</p:column>
<p:column
headerText="Year">
<h:outputText
value="#{car.year}" />
</p:column>
<p:ajax
event="rowSelect"
update=":form:inputPvId,:form:myTable"
onsuccess="PF('overlayPV').hide()" />
</p:dataTable>
Previously it worked that way. All I changed is the way the Widget gets called from "overlayPV".hide()" to "PF('overlayPV').hide()" as the official Migration Guide suggested. If out cancel out the update=":form:inputPvId,:form:myTable" line in the ajax call, the content is shown properly.
Am I doing somethign wrong? My research showed, that other people also had trouble with the overlaypanel and the ajax update. However, i found no suitable solution for my problem.
I tried using the "onRowClick"-Attribute of the datable along with the widgetHide call like this:
<p:dataTable
onRowClick="PF('overlayPV').hide()" />
and it worked fine, however i could not figure out how to update the <p:inputText>-Element with the choosen value. I had to refresh the page to show the new value. I would be happy if someone suggested a solution for this. Thanks in advance.
I finally resolved the issue.
My initial problem was, that whenever an element inside the <p:overlayPanel> included the "update" attribute, the overlayPanel did not render any content and appeared empty.
i solved my issue with the <p:remoteCommand>-Tag, which I placed OUTSIDE of the overlayPanel as my example Code below shows:
<p:inputText
id="inputPvId"
styleClass="form_input"
readonly="true"
value="#{bean.selectedValue.get(0)}" />
<p:commandButton
icon="ui-icon-link"
id="selectValue"
value="#{msg_properties.chooseValue}" />
<p:overlayPanel
for="selectValue"
id="overlayValueSelector"
widgetVar="overlayValueSelector
dynamic="true"
styleClass="form_input_widest">
<p:dataTable
var="myTable"
value="#{dtBasicView.cars}"
onRowClick="remoteCommand()">
<p:column
headerText="Id">
<h:outputText
value="#{car.id}" />
</p:column>
<p:column
headerText="Year">
<h:outputText
value="#{car.year}" />
</p:column>
</p:dataTable>
</p:overlayPanel>
<p:remoteCommand
name="remoteCommand"
update="inputPvId, myTable"
onsuccess="PF('overlayPV').hide()"/>
Note the onRowClick-Attribute of my dataTable which call the remoteCommand outside of te overlayPanel. The remoteCommand than updates all my Elements that need to be updated and also closes the overlayPanel.
I need your help in refreshing the dataTable component on closing the Dialog. I tried many ways to refresh the dataTable, but it is not retrieving the updated record, unless I have refreshed the full page by clicking on the "Go" button which is next to the URL in the address bar.
The xhtml code:
<h:form id="Requests">
<h:panelGroup id="table">
<p:fieldset id="Pendings" legend="Pending Requests">
<div id="refresh">
<p:dataTable id="PendingRequests" var="hr" value="#{hrd.pendingRequests}" paginator="true" rows="15" paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" rowsPerPageTemplate="5,10,15" paginatorPosition="bottom" filteredValue="#{hrd.filteredPendingRequests}">
<p:column headerText="Req. Date" sortBy="#{hr.requestDate}" filterMatchMode="contains" filterBy="#{hr.requestDate}" >
<h:outputText value="#{hr.requestDate}"/>
</p:column>
<p:column>
<f:facet name="header">View</f:facet>
<p:commandButton id="submitbutton" update=":Requests:#{hr.dialogueName} "
oncomplete="PF('#{hr.certificateDialogue}').show()" icon="ui-icon-search" title="View">
<f:setPropertyActionListener value="#{hr}" target="#{hrd.selectedRequest}"/>
</p:commandButton>
</p:column>
</p:dataTable>
</div>
</p:fieldset>
</h:panelGroup>
<p:dialog id="CertificateDialog" header="Cert1" widgetVar="CertificateDialog" >
<p:ajax event="close" update=":Requests" listener="#{hrd.UpdateDatatable}"/>
</p:dialog>
</h:form>
I tried to update the dataTable only, but it is not refreshing. Although, I have tried to update the full form using #form and #all and again the dataTable was not refreshed.
The updateDataTable method:
public void UpdateDatatable(CloseEvent event) {
RequestContext.getCurrentInstance().update(":Requests");
}
When you try to update a component from ManagedBean using RequestContext.update() you should not use the relative component id, because you'd have nothing to relate to.
To fix your problem remove : before Requests in your listener.
RequestContext.getCurrentInstance().update("Requests");
If you feel updating a component from managed bean, increases cohesion. You can use a p:remoteCommand can call if from your javascript any time you want.
<p:remoteCommand name="updateTable" process="#this" partialSubmit="true" update=":Results" />
And you can call the above remoteCommand from javascript or in your case from dialog as below:
<p:dialog onhide="updateTable()">
...
</pdialog>
My suggestion is to move p:dialog out of the h:form in which you placed the dataTable. Because In future if you get into situation where if need to update the h:form from p:dialog while its still open, updating the very own h:form in which the p:dialog is placed, would cause the dialog the p:dialog to close abruptly.
If you your p:dialog out for h:form then you might not need the UpdateDatatable() listener itself. update from your p:ajax would do the job for you.
I am trying to get a primefaces checkbox datatable to select multiple rows and pass those values to the bean. I have an ajax event for rowSelect and that works fine, but the ajax for rowSelectCheckbox never fires and it is as if my checkboxes are 'unclickable'. When selecting a row the rowSelect ajax event fires and highlights the entire row and checks the checkbox. However, I am unable to check any other checkboxes off so it is obvious only the rowSelect ajax works and not the rowSelectCheckbox. Here is code:
<p:dataTable id="content-table"
var="obj"
value="#{releaseNotes.contentList}"
rows="5"
paginator="true"
style="width:100%"
selectionMode="multiple"
selection="#{releaseNotes.selectedContent}"
rowKey="#{obj.hashCode()}"
paginatorPosition="bottom"
rendered="#{releaseNotes.showContentTable}">
<p:ajax event="rowSelect" listener="#{releaseNotes.selectListenerCode}" update=":grids :buttons" immediate="true"/>
<p:ajax event="rowSelectCheckbox" listener="#{releaseNotes.checkBoxListener}" update=":grids :buttons" immediate="true" />
<f:facet name="header">Content</f:facet>
<p:column selectionMode="multiple" style="width:16px;text-align:center"/>
<c:forEach items="#{releaseNotes.columnNames}" var="columnName">
<p:column headerText="#{columnName.toLowerCase().replace('_', ' ')}"
filterBy="#{obj.get(columnName)}" filterMatchMode="contains">
<h:outputText value="#{obj.get(columnName)}"/>
</p:column>
</c:forEach>
</p:dataTable>
Thanks in advance, my first post so I apologize if I missed some etiquette for the code formatting or anything like that, just let me know I will not take offense....
I've stumbled upon a strage behavior of richfaces. Some background about my view structure:
It's mainly a <rich:extendedDataTable> where a click on a row displays info about it on a <a4j:outputPanel>
Also, each row has a context menu with items like "Create", "Edit", etc... that pops a <rich:popupPanel>
The component structure is this:
<h:panelGrid columns="2">
<h:column>
<rich:dataScroller for="testTable" maxPages="7"/>
<rich:extendedDataTable id="testTable" value="#{testController.items}" rendered="#{testController.items.rowCount != 0}"
selection="#{testController.selectedRow}" noDataLabel="No results to show" var="test" rows="20"
style="width: 790px" selectionMode="single">
<a4j:ajax execute="#form"
event="selectionchange"
listener="#{testController.selectionListener}"
render=":res"/>
{columns to display}
</rich:extendedDataTable>
</h:column>
<a4j:outputPanel id="res">
<rich:panel header="Selected Rows:" rendered="#{not empty testController.selectedRows}">
<rich:list type="unordered" value="#{testController.selectedRows}" var="t">
<h:outputText value="#{t.name}"/>
<br/>
<h:outputText value="#{t.details}" converter="#{testConverter}"/>
</rich:list>
</rich:panel>
</a4j:outputPanel>
</h:panelGrid>
<rich:contextMenu target="testTable" mode="ajax" id="contextMenu">
<rich:menuItem label="Edit" render="popupEdit" oncomplete="#{rich:component('popupEdit')}.show();" mode="ajax"/>
</rich:contextMenu>
<rich:popupPanel id="popupEdit" modal="true" autosized="true" resizeable="false" moveable="false" domElementAttachment="form">
<rich:hotKey key="esc" onkeyup="#{rich:component('popupEdit')}.hide(); return false;"/>
<f:facet name="header">
<h:outputText value="Edit Test"/>
</f:facet>
<f:facet name="controls">
<h:outputLink value="#" onclick="#{rich:component('popupEditar')}.hide(); return false;">
<h:graphicImage value="/resources/css/images/fechar_janela.png" width="20" height="20"/>
</h:outputLink>
</f:facet>
<h:panelGrid id="popupEditContent" columns="2">
... {display of info}
<a4j:commandButton value="Salvar" actionListener="#{testeController.update()}" render="tabelaTestes, contextMenu"/>
<h:panelGroup id="messagePanel" layout="block">
<rich:messages ajaxRendered="true" />
</h:panelGroup>
</h:panelGrid>
</rich:popupPanel>
And now the strange behaviour (using NetBeans):
Deploy the app from NetBeans;
Open the URL of the deployed project on browser (Firefox) . The <a4j:ajax> inlined in the table doesn't work, I know this because the 'testController.selectionListener' is not called and the details are not displayed (it sets the attribute current in the backing bean). The contextMenu works but the popupPanel shows null or empty properties in all fields (the current attribute is not set);
Go back to the IDE, remove all the <rich:popupPanel> section and save the file;
Back in the browser, hit F5 and click a row. Now the <a4j:ajax> works and calls testController.selectionListener, showing the details in <a4j:outputPanel>. The context menu works but (obviously) the panel does not pop;
In the IDE, put back the <rich:popupPanel> section and save the file;
Now refresh the page again, and everything works, details are shown and the Edit pop up shows the right info of the selected row.
I have tried deploying it without the <rich:popupPanel> section and the selecionListener gets called. I think that the problem is deploying the page with both <a4j:ajax> and <rich:popupPanel> sections, hence the "conflict".
I took the structure from the richfaces showcase and made changes. I noticed that in the showcase, the <rich:popupPanel> is placed outside the <h:form> tag, wich in my project is placed in the template.xhtml (so a topmenu page works). Is it possible that the error is caused by this placement?
Could this be considered a bug to file in the richfaces project or am I missing something there?
Is there a workaround or solution?
Thank you very much!
I think I have solved it. I set the id attribute to "form" in the <h:form> tag, in template.xhtml, so now it looks like this:
<h:body>
<h:form id="form">
<div id="top" class="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</h:form>
</h:body>
It was the only change I made and now all the components work at first post-deploy.
Edit: Found the solution when searching for another problem: JSF action call on secon click
I have a datatable and I want to show a rich tooltip while hovering over a column in table.
<t:column id="nameColumn">
<a4j:outputPanel layout="block">
<rich:toolTip direction="bottom-right" showDelay="300"
layout="block">
<a4j:actionparam name="index" value="#{child.index}"
assignTo="#{tableBean.currentTableRowIndex}" />
<h:outputText value="#{tableBean.currentTableRowIndex}"/>
</rich:toolTip>
<h:outputText value="#{child.name}" id="childName"
styleClass="gridCell" >
</h:outputText>
</a4j:outputPanel>
</t:column>
If I use mode="ajax" nothing is appearing in tooltip. Actually it should display the row number. It would be very nice if you could help me. This issue is in v3.3.3
Pls ensure that your code is inside a form tag