primefaces BlockUI not blocking panel - jsf

I have a Primefaces 11 page where I want to make a mass change on the database. Reading the data works fine and the updateprocess works also. But because it takes some time I wanted to block the page and show an statusbar so the user knows that something is happening and he sees how long it will approximatly take to finish. But the BlockUI doesn't show up. I have a page that is almost the same and there it is working. But I can't see where the difference is to this page.
The xhtml looks like this:
<h:form id="abbauForm">
<div class="card">
<p:growl id="messages" sticky="false" showDetail="true" />
<p:panel id="quelldaten" header="Quelldaten">
<h:panelGrid columns="2" columnClasses="label, value">
<h:outputText value="Auswahl" />
<p:fileUpload label="Datei auswahl" mode="simple" multiple="false" auto="true" allowTypes="/(\.|\/)(xlsx?m?|csv)$/"
invalidFileMessage="nur xls | xlsx | csv | erlaubt" update="messages quelldaten"
listener="#{massenabbauhandler.handleFileUpload}" skinSimple="true" />
<h:outputText value="Ticketnummer" />
<p:inputText value="#{massenabbauhandler.massenabbau.ticket}" required="true" label="Ticketnummer" />
<h:outputText value="Abbaudatum" />
<p:datePicker id="date" value="#{massenabbauhandler.massenabbau.abbaudatum}" required="true" />
<h:outputText value="Abbau Objekt" />
<p:selectOneMenu id="selObject" value="#{massenabbauhandler.massenabbau.abbauObject}" required="true">
<f:selectItems value="#{massenabbauhandler.abbauObjects}" />
</p:selectOneMenu>
<h:outputText value="Spalte mit Hostnamen" />
<p:selectOneMenu id="hostCol" value="#{massenabbauhandler.massenabbau.hostCol}" required="true">
<f:selectItems value="#{massenabbauhandler.posCols}" />
</p:selectOneMenu>
<p:commandButton id="abbauBtn" value="Abbau" icon="pi pi-caret-right" actionListener="#{massenabbauhandler.startAbbau}"
disabled="#{massenabbauhandler.notUploaded}" />
</h:panelGrid>
</p:panel>
<p:panel header="Importdaten" id="dataPanel">
<p:staticMessage severity="info" summary="INFO" detail="#{massenabbauhandler.abbauStep}" style="width: 100%" />
</p:panel>
<p:blockUI block="abbauForm:quelldaten" trigger="abbauForm:abbauBtn" />
</div>
</h:form>
I have minimalized the BlockUI to a minimum because it didn't work. The startAbbau() function looks like this:
public void startAbbau() throws InterruptedException {
FacesMessage msg = new FacesMessage("Abbau läuft");
FacesContext.getCurrentInstance().addMessage(null, msg);
setStartBlocked(true);
PrimeFaces.current().ajax().update("abbauForm:quelldaten");
setInProgress(0);
MassenabbauDbHandler madh = new MassenabbauDbHandler(massenabbau);
Thread t = new Thread(madh);
t.start();
do {
Thread.sleep(3000);
setInProgress(madh.getStatus());
} while (t.isAlive());
setInProgress(100);
abbauStep = madh.getReturnMsg();
msg = new FacesMessage("Erfolgreich abgebaut.");
FacesContext.getCurrentInstance().addMessage(null, msg);
PrimeFaces.current().ajax().update("abbauForm:dataPanel");
}
I've noticed that the first and the last message of the function are shown at the end of the function.
I can't see why the blockUI isn't shown.

Related

p:chart does not update

I am trying to update a <p:chart> upon hitting the submit button but the graph is always staying the same. I googled this and I was told to use an Ajax update command which I was already doing. Here is my Code:
.xhtml
<body>
<ui:define name="content">
<h:form id="chartForm">
<p:growl id="msgs" showDetail="true" />
<p:panel header="Select a Location" style="margin-bottom:10px;">
<h:panelGrid columns="4" cellpadding="5">
<p:outputLabel for="facility" value="Facility: " />
<p:selectOneMenu id="facility" value="#{visualization.facility}" converter="#{facilityConverterBean}" style="width:150px">
<p:ajax event="change" process="#this" partialSubmit="true" listener="#{visualization.onFacilityChange()}" update="component" />
<f:selectItem itemLabel="Select Facility" noSelectionOption="true" />
<f:selectItems value="#{visualization.facilities}" var="facility" itemLabel="#{facility.name}" itemValue="#{facility}" />
</p:selectOneMenu>
<p:outputLabel for="component" value="Components: " />
<p:selectOneMenu id="component" value="#{visualization.component}" converter="#{componentConverterBean}" style="width:150px">
<f:selectItem itemLabel="Select Component" noSelectionOption="true" />
<f:selectItems value="#{visualization.components}" var="comp" itemLabel="#{comp.name}" itemValue="#{comp}" />
</p:selectOneMenu>
<p:outputLabel for="datetimefrom" value="Datetime from" />
<p:calendar id="datetimefrom" value="#{visualization.dateFrom}" pattern="dd/MM/yyyy HH:mm" />
<p:outputLabel for="datetimeto" value="Datetime to" />
<p:calendar id="datetimeto" value="#{visualization.dateTo}" pattern="dd/MM/yyyy HH:mm" />
<h:outputLabel for="recordcount" value="Record count" />
<p:spinner id="recordcount" value="#{visualization.recordCount}" stepFactor="25" />
</h:panelGrid>
<p:separator />
<p:commandButton value="Submit" actionListener="#{visualization.fetchDataRecords()}" update="chartForm:chartTab:lineChartTemperatures" icon="ui-icon-check" />
</p:panel>
<p:tabView id="chartTab">
<p:tab title="Diagramm">
<p:chart id="lineChartTemperatures" type="line" model="#{lineChart.dateModel}" style="margin-bottom: 1px" responsive="true" />
</p:tab>
<p:tab title="DataTable">
<h:panelGrid>
<h:outputText value="....not implemented" />
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
</ui:define>
</body>
fetchDataRecords()
public void fetchDataRecords(){
List<BhkwRecord> data = bhkwService.getRecordsFromTo(component.getId(), dateFrom, dateTo);
//System.out.println("Amount of records fetched: " + data.size());
lineChart.updateBhkwChartRuecklauf(data);
}
Method where another series is added to the graph
public void updateBhkwChartRuecklauf(List<BhkwRecord> data) {
//data not used here, just added simulated data to test
LineChartSeries series3 = new LineChartSeries();
series3.setLabel("Series3");
series3.set("2014-01-01 00:10:50", 54);
series3.set("2014-01-01 01:12:50", 20);
series3.set("2014-01-01 04:14:50", 60);
series3.set("2014-01-01 06:17:50", 30);
dateModel.addSeries(series3);
}
So normally, after button hit, the method should add another series of data to the graph and get updated but nothing is happening. I also tried update="#form" which wouldn't work either. Does anyone have an idea what I am doing wrong?
<p:tab title="Diagramm">
<p:outputPanel id="chartPnl>
<p:chart id="lineChartTemperatures" type="line" model="#{lineChart.dateModel}" style="margin-bottom: 1px" responsive="true" />
</p:outputPanel>
</p:tab>
You can try to put chart in another -like outputPanel- component and update it in commandButton.
<p:commandButton value="Submit" actionListener="#{visualization.fetchDataRecords()}" update="chartForm:chartTab:chartPnl" icon="ui-icon-check" />

p:commandbutton doesn't call method

I got a problem where one of my commandbuttons doesn't call the method I gave it and I have no idea why:
<p:layoutUnit position="center">
<h:form>
<p:dialog position="center" widgetVar="benutzerErstellen" visible="true" closable="false" resizable="false" draggable="false">
<h:panelGrid columns="2" cellpadding="5" styleClass="noBorders">
<h:outputLabel for="nachname" value="Nachname:" />
<p:inputText id="nachname" value="#{benutzerverwaltung.nachname}" required="true"/>
<h:outputLabel for="vorname" value="Vorname:" />
<p:inputText id="vorname" value="#{benutzerverwaltung.vorname}" required="true"/>
<h:outputLabel for="benutzername" value="Benutzername:" />
<p:inputText id="benutzername" value="#{benutzerverwaltung.benutzername}" required="true" validator="#{benutzerverwaltung.benutzerUeberschneidungValidate}"/>
<h:outputLabel for="teams" value="Teams:" />
<p:selectCheckboxMenu id="teams" label="Teams" scrollHeight="200" panelStyle="width:300px">
<f:selectItems/>
</p:selectCheckboxMenu>
<h:outputLabel for="passwort" value="Passwort:" />
<p:password id="passwort" feedback="true" value="#{benutzerverwaltung.passwort}" required="true" match="passwortBestaetigung" promptLabel="Bitte geben Sie ein Passwort ein." weakLabel="Schwach" goodLabel="Gut" strongLabel="Stark"/>
<h:outputLabel for="passwortBestaetigung" value="Passwort bestätigen:" />
<p:password id="passwortBestaetigung" value="#{benutzerverwaltung.passwort}" required="true"/>
<f:facet name="footer">
<p:commandButton id="erstellen" value="Benutzer erstellen" action="#{benutzerverwaltung.erstelleBenutzer()}"/>
</f:facet>
</h:panelGrid>
</p:dialog>
<p:growl/>
</h:form>
</p:layoutUnit>
This is the corresponding code:
erstelleBenutzer:
public void erstelleBenutzer(){
Benutzer benutzer = new Benutzer();
System.out.println(vorname);
benutzer.setVorname(vorname);
benutzer.setNachname(nachname);
benutzer.setBenutzername(benutzername);
benutzer.setPasswort(passwort);
this.benutzer.add(benutzer);
FacesMessage message = new FacesMessage("Benutzer wurde erstellt.");
message.setSeverity(FacesMessage.SEVERITY_INFO);
throw new ValidatorException(message);
}
benutzerUeberschneidungValidate:
public void benutzerUeberschneidungValidate(FacesContext ctx, UIComponent component, Object value) throws ValidatorException {
if (benutzerExistiert((String) value) || adminExistiert((String) value)) {
FacesMessage message = new FacesMessage("Benutzer existiert bereits.");
message.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ValidatorException(message);
}
}
I tried removing the validator, I tried removing the Exception from benutzerErstellen(), I tried giving the dialog it's own h:form and much more, but nothing worked. Anyone got an idea?
Earlier versions of PrimeFaces 3 have a bug wherein a commandButton or commandLink doesn't fire the action listener if it is located in the header or the footer.
See the post I have listed at the bottom.
p:commandButton action and f:setpropertyactionlistener not invoked in p:columngroup
I solved this like that
<p:dataTable>
...
<p:column>
...
<p:commandButton id="selectButton" update=":form:dataTable" icon="ui-icon-circle- close" title="Delete" action="#{myBean.doSomething}">
<p:ajax event="click" listener="#{mainPageBean.doRemoveEmployee(employee)}"/>
</p:commandButton>
...
</p:column>
...
</p:dataTable>

View display wrong behavior when there's a required="true" within the body

I have a view which is working well. However, when I add a required="true" into the body of the view, the view begin to be unable to read backing bean properly. Below is a comparison:
Anyone knows why?
.
Edit: Code fragment supplement
Below is the fragment of my code in which the problem arises. If I add required="true" into any p:inputText (not only the p:inputText that belong to this dialog but any p:inputText inside the html body), it stops displaying information from backing bean, remove it and everything works just fine.
<p:dialog header="Customer Editor" widgetVar="customerEditDialog"
resizable="false" id="customerEditDlg" showEffect="fade"
hideEffect="fade" modal="true">
<h:panelGrid id="editGrid" columns="2" cellpadding="4"
style="margin:0 auto;">
<h:outputLabel for="customerNameEdit" value="Name: " />
<p:inputText id="customerNameEdit" maxlength="30"
value="#{customerController.customerAdd.name}" />
<h:outputLabel for="customerPhoneNumberEdit" value="Phone Number " />
<p:inputText id="customerPhoneNumberEdit" maxlength="15"
onkeypress="if(event.which < 48 || event.which > 57) return false;"
value="#{customerController.customerAdd.phoneNumber}" />
<h:outputLabel for="customerEmailEdit" value="Email: " />
<p:inputText id="customerEmailEdit" maxlength="49"
value="#{customerController.customerAdd.email}" />
<h:outputLabel for="customerAddressEdit" value="Address: " />
<p:inputText id="customerAddressEdit" maxlength="190"
value="#{customerController.customerAdd.address}" />
<f:facet name="footer">
<div style="text-align: right">
<p:commandButton id="editCustomerButton"
update=":form:customerList, :form:messages"
oncomplete="customerEditDialog.hide()" value="Save"
actionListener="#{customerController.editCustomer()}">
</p:commandButton>
<p:commandButton id="cancelEditCustomerButton" update=":form"
onclick="customerEditDialog.hide()" value="Cancel">
</p:commandButton>
</div>
</f:facet>
</h:panelGrid>
</p:dialog>
See if jsf required=true destroys setPropertyActionListener? helps you.
The problem is most likely that the setter in your bean is not to be called because of validation errors somewhere else or you are nesting <h:form> elements.

t:inputFileUpload always return null while submitting form

<h:body>
<div id="main" align="center" style="width:100%;height: 100%">
<f:view>
<h:form id="catform" enctype="multipart/form-data">
<p:panel styleClass="ui-panel-titlebar" id="panel1" header="Add New Category" >
<h:panelGrid columns="3" style="border:0px" styleClass="ui-panel-content">
<h:outputText value="Parent Category:" />
<h:selectOneMenu id="parentcat" value="#{CategoryMB.selectedCatId}">
<f:selectItems value="#{CategoryMB.categories}" var="cat" itemLabel="#{cat.categoryName}" itemValue="#{CategoryMB.categoryId}" />
</h:selectOneMenu>
<p:message for="parentcat" />
<h:outputText value="Category Name:" />
<p:inputText id="catname" value="#{CategoryMB.catName}" required="true" requiredMessage="Category must requried !" />
<p:message for="catname" />
<h:outputText value="Category Logo:" />
<t:inputFileUpload storage="file" id="catImageUpload" value="#{CategoryMB.file}" style="display: inline;vertical-align: baseline;margin-bottom: 10px;"/>
<h:message for="catImageUpload" />
<h:outputText value="Description" />
<p:inputTextarea id="desc" cols="10" autoResize="false" rows="4" value="#{CategoryMB.description}"></p:inputTextarea>
<p:message for="desc" id="descmsg" />
<f:facet name="footer">
<p:commandButton value="Add Category" update="growl" action="#{CategoryMB.addCategory}" icon="ui-icon-check" />
</f:facet>
</h:panelGrid>
</p:panel>
<p:growl id="growl" showDetail="true" life="5000" />
</h:form>
</f:view>
public void UploadImage() {
System.out.println("hi");
UploadedFile myfile = getFile();
byte[] buffer = null;
File tempfile=null;
if(myfile!=null)
{
String prefix = FilenameUtils.getBaseName(myfile.getName());
String suffix = FilenameUtils.getExtension(myfile.getName());
try
{
realPath= FacesContext.getCurrentInstance().getExternalContext().getRealPath("/Resources/CategoryImage");
tempfile = File.createTempFile(prefix + "_", "." + suffix, new File(realPath));
OutputStream out = new FileOutputStream(tempfile);
InputStream in = new BufferedInputStream(myfile.getInputStream());
this.catImage = tempfile.getName();
try {
buffer = new byte[64 * 1024];
int count;
while ((count = in.read(buffer)) > 0)
out.write(buffer, 0, count);
} finally {
in.close();
out.close();
}
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null, new FacesMessage("Successful", "Successfully added category! " + catName));
}
catch(IOException e)
{
e.printStackTrace();
}
}
The <p:commandButton>, which sends by default an ajax request, doesn't support uploading files by ajax. For that you should be using <p:fileUpload mode="advanced"> instead.
Add ajax="false" to the <p:commandButton> to turn it off.
<p:commandButton ... ajax="false" />
Note that <p:fileUpload mode="simple">, which could also be used instead of Tomahawk <t:inputFileUpload>, also requires this.
Unrelated to the concrete problem, writing uploaded files to expanded WAR folder is a really bad idea. Reason #1 is that they all get lost whenever you redeploy the WAR or even when you restart the server, for the simple reason that they are not contained in the original WAR. Store them elsewhere in a more permanent location. See also among others this related answer: Uploaded image only available after refreshing the page.

PrimeFaces dialogue showing the wrong information

I have a page with 2 dropdown lists that fill a data-table (depending on the choice made in the dropdown lists). The data table contains check-boxes for selecting multiple lines and then opening a dialogue that shows information based on the selected lines. the problem is: the first time I click on the button to open the dialogue it's empty, when I change the content of the dropdown lists and open the dialogue it will show the information of the previous selection not the one i just made and it'll stay that way until i change the dropdown list and so on... the dialogue always shows the information of the previous selection before changing the choice made in the dropdown list.
the page:
<h:form id="form">
<f:view>
<p:growl id="msgs" showDetail="true" />
<p:layout style="min-width:300px;min-height:200px;" id="layout">
<p:layoutUnit position="west" resizable="true" size="200" minSize="40" maxSize="300">
<!-- _______________________________________start drop down________________________________________________________ -->
<h:panelGrid columns="1" cellpadding="5">
<p:selectOneMenu id="Item" value="#{ThemeBean.idItem}">
<f:selectItem itemLabel="Select un Item " itemValue="" />
<f:selectItems value="#{ItemBean.listItemsUser}" var="utilisateur" />
<p:ajax listener="#{ThemeBean.handleCityChange}" update="suburbs" />
</p:selectOneMenu>
<p:selectOneMenu id="suburbs" value="#{ReponseBean.idTheme}">
<f:selectItem itemLabel="Select un Theme" itemValue="" />
<f:selectItems value="#{ThemeBean.suburbs}" />
<p:ajax listener="#{ReponseBean.handleCityChange_Ecart}" update=":form:dropArea" />
</p:selectOneMenu>
</h:panelGrid>
<p:separator />
</p:layoutUnit>
<!-- _______________________________________end drop down________________________________________________________ -->
<p:layoutUnit position="center">
<p:outputPanel id="dropArea">
<p:dataTable id="dt1" var="car"
value="#{ReponseBean.listPartheme_ecart}"
rendered="#{not empty ReponseBean.listPartheme_ecart}"
rowKey="#{car.id}" editable="true"
selection="#{EcartBean.selectedCars}">
<p:column selectionMode="multiple" style="width:18px" />
<p:column headerText="Questions">
<h:outputText value="#{car.q1.text}" />
</p:column>
<p:column headerText="Reponse">
<h:outputText value="#{car.rep}" />
</p:column>
<f:facet name="footer">
<p:commandButton id="multiViewButton" value="Ajouter Ecart" icon="ui-icon-search"
update=":form:multiDialog :form:displayMulti" oncomplete="multiCarDialog.show()"/>
</f:facet>
</p:dataTable>
<!-- ________________________________________dialogue________________________________________________ -->
<p:dialog id="multiDialog" header="Ajout Ecart" widgetVar="multiCarDialog" height="300" showEffect="fade">
<p:dataList id="displayMulti" value="#{EcartBean.selectedCars}" var="selectedCare">
#{selectedCare.q1.text} (#{selectedCare.rep})
</p:dataList>
<p:messages />
<h:panelGrid columns="3" cellpadding="5">
<h:outputLabel value="Niveau Ecart" />
<p:selectOneMenu id="idUtilisateur" value="#{EcartBean.idNiveauAudit}">
<f:selectItems value="#{NiveauEcartBean.listNiveauSelect}" var="nivecart" />
</p:selectOneMenu>
<p:message for="idUtilisateur" />
<h:outputLabel value="Constatation" id="Constatation" />
<h:inputText value="#{EcartBean.consta}" />
<p:message for="Constatation" />
<p:commandButton icon="ui-icon-disk" value="Ajouter" id="ViewButton" action="#{EcartBean.save}"
oncomplete="multiCarDialog.hide();">
</p:commandButton>
</h:panelGrid>
</p:dialog>
</p:outputPanel>
</p:layoutUnit>
</p:layout>
</f:view>
</h:form>
the methode ThemeBean.handleCityChange :
public void handleCityChange() {
qu = respQue.lister_Ques(idItem);
if (qu != null) {
List<SelectItem> listuti = new ArrayList<SelectItem>();
List<Theme> list = resp.lister_Par_Thme(qu.getId());
for (Theme p : list) {
listuti.add(new SelectItem(p.getId(), p.getLibelle()));
}
this.setSuburbs(listuti);
} else {
System.out.println("erreur");
}
}
ReponseBean.handleCityChange_Ecart :
public void handleCityChange_Ecart() {
listPartheme_ecart= new ArrayList<Reponse>();
System.out.println("taiile avant "+listPartheme_ecart.size());
List<Reponse> lr = respQ.findByTheme_ecart(idTheme);
System.out.println(idTheme);
for (int i = 0; i < lr.size(); i++) {
if (lr.get(i).getAudit().getId() == aud.getId())
listPartheme_ecart.add(lr.get(i));
}
}
I should mention that in the console i see the write information when i open the dialogue, it just doesn't show write away on the dialogue.
thank you for your time and help.
I am updating this post to say that i finaly solved the probleme of filling the popup
i put the dialogue in a new form like this:
</h:form>
<!-- ________________________________________dialogue________________________________________________ -->
<h:form id="hh" >
<p:dialog id="multiDialog" header="Ajout Ecart" widgetVar="multiCarDialog" height="300" showEffect="fade">
<p:dataList id="displayMulti" value="#{EcartBean.selectedCars}" var="selectedCare">
#{selectedCare.q1.text} (#{selectedCare.rep})
</p:dataList>
<p:messages />
<h:panelGrid columns="3" cellpadding="5">
<h:outputLabel value="Niveau Ecart" />
<p:selectOneMenu id="idUtilisateur" value="#{EcartBean.idNiveauAudit}">
<f:selectItems value="#{NiveauEcartBean.listNiveauSelect}" var="nivecart" />
</p:selectOneMenu>
<p:message for="idUtilisateur" />
<h:outputLabel value="Constatation" id="Constatation" />
<h:inputText value="#{EcartBean.consta}" />
<p:message for="Constatation" />
<p:commandButton icon="ui-icon-disk" value="Ajouter" action="#{EcartBean.save}" id="ViewButton" oncomplete="multiCarDialog.hide();" />
</h:panelGrid>
</p:dialog>
</h:form>
i have now one little probleme: the commandButton in the dialogue does not fire the methode save i have tried
<p:commandButton icon="ui-icon-disk" value="Ajouter" action="#{EcartBean.save}" id="ViewButton" oncomplete="multiCarDialog.hide();" />
and
<p:commandButton icon="ui-icon-disk" value="Ajouter" actionListener="#{EcartBean.save}" id="ViewButton" oncomplete="multiCarDialog.hide();" />
and
<p:commandButton icon="ui-icon-disk" value="Ajouter" id="ViewButton" oncomplete="multiCarDialog.hide();" >
<f:actionListener binding="#{EcartBean.save}"/>
</p:commandButton>
but nothing :( . where have gone wrong?
As per the documentation of <p:ajax>, listener is triggered only on partial request which I don't see happening in the code that you pasted. Use event="valueChange" to trigger a partial request which would result the current update to be shown in dialog.
<p:ajax event="valueChange" listener="#{ThemeBean.handleCityChange}" update="suburbs" />
<p:ajax event="valueChange" listener="#{ReponseBean.handleCityChange_Ecart}" update=":form:dropArea" />

Resources