I have the below datagrid which displays a list of student names as link.
<h:form id="gsform">
<p:dataGrid var="stuvar" rendered="#{gradeSheetController.listStudent != null}"
value="#{gradeSheetController.listStudent}" columns="5" layout="grid">
<p:commandLink actionListener="#{gradeSheetController.readStudentGradeSheet}"
update=":gsform:gscont, :gsform:buttoncont">
<h:outputText id="stname" style="font-size:16px" value="#{stuvar.studentFirstName}" />
<f:param name="selstudent" value="#{stuvar.studentSeq}" />
</p:commandLink>
</p:dataGrid>
I also have the below blockUI to freeze the screen until backend processing is done, currently used for a Save button.
<p:blockUI block=":entirePageBody" trigger="savebutton">
<h:panelGrid id="blockContent" columns="2">
<h:graphicImage library="images" name="loading.gif" style="margin-right:12px; vertical-align:middle;" />
<h:outputText value="Please wait, data is being processed..." style="white-space:nowrap;" />
</h:panelGrid>
</p:blockUI>
Now, I would also like to trigger the blockUI when the Student name link is clicked. Obviously, since the number of students will be dynamic and being within the datagrid, the code generated includes other aspects to the id like id="gsform:j_idt168:1:stname", id="gsform:j_idt168:2:stname" and so on.
Have no clue how to trigger the blockUI on click of the Student name link within the datagrid, please suggest.
Triggering/Hiding the blockUI from within dataGrid using onclick/oncomplete
<p:dataGrid var="stuvar" rendered="#{gsExamController.listStudent != null}"
value="#{gsExamController.listStudent}" columns="5" layout="grid">
<p:commandLink actionListener="#{gsExamController.readStudentGradeSheet}"
onclick="PF('bui').show()"
oncomplete="PF('bui').hide()"
update=":gsform:gscont, :gsform:remarkcont, :gsform:buttoncont">
<h:outputText style="font-size:16px" value="#{stuvar.studentFirstName}" />
<f:param name="selstudent" value="#{stuvar.studentSeq}" />
</p:commandLink>
</p:dataGrid>
<p:blockUI block=":entirePageBody" trigger="savebutton" widgetVar="bui">
<h:panelGrid id="blockContent" columns="2">
<h:graphicImage library="images" name="loading.gif" style="margin-right:12px; vertical-align:middle;" />
<h:outputText value="Please wait, data is being processed..." style="white-space:nowrap;" />
</h:panelGrid>
</p:blockUI>
A simple solution to your problem is to use Primefaces' selectors.
For example:
<p:commandLink value="Click me." styleClass="blockMeWhenClicked" />
<p:blockUI block=":ElementToBeBlocked" trigger="#(.blockMeWhenClicked)" />
Related
I got a datatable with a custom layout selectoneradio. It doesnt submit correct values after the first row.
This is the datatable:
<h:form id="dataTableForm">
<br />
<p:dataTable id="absenceTable" var="absence" widgetVar="absenceTable"
value="#{adminController.absenceList}" rowIndexVar="rowIndex"
emptyMessage="Keine Absenzen mit ausstehender Genehmigung gefunden"
style="width:70%;margin-left:15%;margin-right:15%;margin-bottom:20px;margin-top:10px;"
rowKey="#{absence.id}" rows="30" paginator="true"
paginatorPosition="bottom" paginatorAlwaysVisible="false"
paginatorTemplate="{PageLinks}" sortBy="#{absence.startDate}"
sortOrder="descending"
filteredValue="#{adminController.filteredAbsences}">
<f:facet name="header">Mitarbeiterabsenzen mit ausstehender Genehmigung</f:facet>
<p:column>
<p:selectOneRadio id="action" value="#{absence.status}" required="false"
layout="custom" >
<f:selectItem itemValue="PENDING" noSelectionOption="true" />
<f:selectItem itemValue="APPROVED" />
<f:selectItem itemValue="REJECTED" />
<p:ajax event="valueChange" immediate="true" listener="#{adminController.checkBoxListener}" />
</p:selectOneRadio>
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="0" />
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="1" />
</p:column>
<p:column width="20">
<p:radioButton for="action" itemIndex="2" />
</p:column>
<f:facet name="footer">
<p:commandButton value="Speichern"
action="#{adminController.save()}" update="absenceTable" />
</f:facet>
</p:dataTable>
</h:form>
The row index and absence loop variable is defined on the datatable.
Its all in the same form.
The problem is, somehow, it only works for the first row. The other rows submit "on" instead of the value. I found in the generated html that they are not provided with value-tag like the radiobuttons in the first row are:
I guess its gonna be a stupid syntax issue or something... This is what i get debugging clicking on anything but the first row:
Im running on PF 5.2
This is a bug in PF5.2
The code runs smoothly on PF5.3
I would create a check input information about specified in:
http://www.primefaces.org/showcase/ui/message/messages.xhtml
I create a dataTable with a lot required field (inputText with attribute required="true") and a p:message into datatable section.
Problem is when I click on button to save data: I don't see alert message in my page but starting execution of associated bean.
Why?
My code in .xhtml is this:
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable var="myAtt"
value="#{myBean.attributes}"
rowIndexVar="myAttIndex">
<h:inputHidden value="#{myAtt.value}" rendered="#{myAtt.description == 'XXX'}" />
<p:column rendered="#{myAtt.description == 'XXX'}">
<h:outputText value="*" rendered="#{myAtt.required}" />
</p:column>
<p:column rendered="#{ myAtt.description == 'YYY'">
<p:fragment rendered="#{myAtt.description == 'ZZZ'">
<p:fragment rendered="#{myAtt.value == 'value1'}">
<p:inputText size="#{myAtt.maxLength}"
value="#{myAtt.value}"
rendered="#{myAtt.const == 't1'}"
required="true"
id="idText">
<p:ajax process="#this" event="change" update="#form"/>
</p:inputText>
<p:message for="idText"/>
</p:fragment>
</p:fragment>
</p:column>
</p:dataTable>
<br />
<p:commandButton value="Create" action="#{myBean.commit()}" process="#this" update=":MYPAGE"/>
Thanks.
You forgot to indicate an id for the h:form : <h:form id="myForm">
And in the update of the p:commandButton you have to indicate the id of the form : update=":MYPAGE :myForm"
EDIT
According to the PrimeFaces users guide 3.5, the attribute action will be called when the user clicks on the button.
<p:overlayPanel appendToBody="true"
id="panel_l#{level.name.hashCode()}
f{filterTypeConfiguration.filterType.name.hashCode()}"
for="conrolForm_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}:
button_l#{level.name.hashCode()}f
#{filterTypeConfiguration.filterType.name.hashCode()}"
dynamic="true" >
...
and in overlayPanel I have:
<p:inputText value="#{filterTypeConfiguration.textToSearch}">
<p:ajax id="ajaxFilterSearch" event="keyup" update="overlayForm_l
#{level.name.hashCode()} f#{filterTypeConfiguration.filterType.name.hashCode()}
:select_l#{level.name.hashCode()}
f#{filterTypeConfiguration.filterType.name.hashCode()}"
</p:inputText>
I need clean data in inputText when overlayPanel is opening or closing.
I didn't use p:overlayPanel yet but I am able to trigger p:dialog diaglodReturn event like, I think it should be similar like this
<p:ajax event="dialogReturn" update="#form" listener="#{backing.refreshPage}" />
Or
Example from primefaces showcase, How about add action attribute for button?
<p:commandButton id="imageBtn" value="Basic" type="button" action="#{backing.refresh}" />
<p:overlayPanel id="imagePanel" for="imageBtn" hideEffect="fade">
<p:graphicImage name="/demo/images/nature/nature1.jpg" width="300" />
</p:overlayPanel>
I have a datatable, and at the last column I will have an edit action, it will trigger the dialog box. However, I found the value in the dialog box is not updated. Can anybody to help on this?
My code as below. In fact the bean.currentItem.name and bean.currentItem.age should base on my selection from the table. I check the bean.currentItem is not null and is refer to my selection from preEdit method, but the value never show up in p:dialog.
<p:dataTable ....>
<p:column...
<p:column...
<p:column>
<f:facet name="header">
<h:outputLabel value="Update" />
</f:facet>
<p:remoteCommand name="preEdit" action="#{bean.preEdit}"
process="#this" update="#this #form:dlg">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:remoteCommand>
<p:commandLink styleClass="no-decor"
oncomplete="preEdit();PF('dlg').show();" value="Edit"/>
</p:column>
</p:dataTable>
<p:dialog header="#{lbl.tt_cat_upd}" widgetVar="dlg" id="dlg"
resizable="false" >
<h:outputLabel value="#{bean.currentItem.name}" />
<h:outputLabel value="#{bean.currentItem.age}" />
</p:dialog>
How about removing your p:remoteCommand and let your p:commandLink do all the work for you?
Assuming you have a h:form surrounding both your dataTable and your dialog
<p:commandLink action="#{bean.preEdit}" process="#this" update="dlg" styleClass="no-decor" oncomplete="PF('dlg').show()" value="Edit">
<f:setPropertyActionListener target="#{bean.currentItem}"
value="#{thisItem}" />
</p:commandLink>
If your dataTable is not in the same form with your dialog, you might replace update="dlg" by update=":formIdContainingDialog:dlg"
I have a problem with tabView. The 1st tab should always display the same content (called search template which is identified with #{not curSearch.isClosable()}. All other tabs are search instances (identified with #{curSearch.isClosable()}
Here is the code:
<p:tabView id="searchTabViewId" var="curSearch" value="#{searchBL.searchInstances}"
activeIndex="#{searchBL.activeTabIndex}" styleClass="searchTabView">
<!-- search template tab -->
<ui:include src="/icarchive/sections/search/firstSearchTab.xhtml">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
<!-- search instances tabs -->
<ui:include src="/icarchive/sections/search/searchInstanceTab.xhtml">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
</p:tabView>
Unfortunately there are methods on the 1st tabs curSearch object called which are used on 2nd and following tabs only. If I do not use the ui:insert it does not change anything.
Anybody knows where is my fault?
Regards
Oliver
This works:
<p:tabView id="searchTabViewId" styleClass="searchTabView" activeIndex="#{searchBL.activeTabIndex}">
<!-- do the iteration over the search instances NOT in the tabView because this will not work with ui:include -->
<c:forEach items="#{searchBL.searchInstances}" var="curSearch">
<p:tab closable="#{curSearch.isCloseable()}">
<f:facet name="title">
<p:graphicImage library="images" name="search_tab.png" height="16" styleClass="tabImage"
rendered="#{not curSearch.isCloseable()}" />
<h:outputText value="#{curSearch.title}" />
</f:facet>
<!-- do not use 2 ui:includes here, the dynamic must be in the src attribute to get it work -->
<ui:include
src="#{curSearch.closeable ? '/sections/search/searchInstanceTab.xhtml' : '/sections/search/firstSearchTab.xhtml'}">
<ui:param name="curSearch" value="#{curSearch}" />
</ui:include>
</p:tab>
</c:forEach>
I had the same problem, only solution i found is wrap include in other component and clamp with render which one is displayed. For initial load if you have ids depending on content you will need to set id prefix so that it does not allow empty id fields:
<p:tabView id="tabsView" dynamic="true" cache="true"
value="#{TabViewController.tabView.openedTabs}" var="tabDefinition" activeIndex="#{TabViewController.tabView.activeIndex}">
<p:ajax event="tabClose" listener="#{TabViewController.onCloseTab}" update="tabsView"/>
<p:ajax event="tabChange" update="tabsView"/>
<p:tab id="tab#{tabDefinition.id}" title="#{tabDefinition.title}" closable="true" action="">
<f:facet name="title">
<h:outputText value="#{tabDefinition.title}"/>
</f:facet>
<p:outputPanel style="display:block" rendered="#{'dataTable'.equals(tabDefinition.type)}">
<ui:include src="dataTable.xhtml">
<ui:param name="dataTableName" value="#{tabDefinition.contentName}"/>
</ui:include>
</p:outputPanel>
<p:outputPanel style="display:block" rendered="#{'form'.equals(tabDefinition.type)}">
<ui:include src="form.xhtml">
<ui:param name="formId" value="#{tabDefinition.id}"/>
<ui:param name="formName" value="#{tabDefinition.contentName}"/>
</ui:include>
</p:outputPanel>
</p:tab>
</p:tabView>