I have a problem, I'm using p:blockUi to block the full body of my page. The problem is that the AJAX events stopped to work, actually they only work once and then never again.
¿Does anybody now how I can fix it?
Here is my code:
<h:form id="formMenu">
<ul class="menu">
<li><p:commandLink action="alta" value="Alta" id="btn_alta"/></li>
<li><p:commandLink value="Tramitación" id="btn_tramitacion"/></li>
<li><p:commandLink value="Bajas" id="btn_baja"/></li>
<li><p:commandLink action="salir" value="Salir" id="btn_salir"/></li>
</ul>
<p:blockUI block=":full_page" trigger="btn_alta,btn_salir,btn_tramitacion,btn_baja">
<h:panelGrid columns="1">
<h:graphicImage value="/resources/img/ajaxloadingbar.gif"
style="horizontal-align:middle; vertical-align: middle;"/>
<h:outputText value="Cargando..." style="white-space: nowrap;"/>
</h:panelGrid>
</p:blockUI>
</h:form>
Related
I'm using primefaces 3.5 JBoss 7.1.1. I'm migrating my app to Wildfly 9.0.2.
The following code used to work with JBoss but no longer with WildFly.
<p:tabView id="tabView" dynamic="true" cache="false" style="width:1120px">
<f:event listener="#{ucoController.loadUcoConfiguration}" type="preRenderView" />
<p:tab id="Activation" title="SOMF Activation">
<h:panelGrid id="ActivationPG" columns="1" cellpadding="10" border="0">
<h:form id="user" class="sgdsForm clear">
<script type="text/javascript">
function startAjaxStatus(){
document.getElementById("tabView:user:image").style.display='block';
document.getElementById("tabView:user:shutDown").style.display='block';
}
</script>
<ol>
<li>
<label for="activate" class="label">SOMF Activation</label>
<p:selectBooleanCheckbox value="#{configurationBean.SOMFActivated}" />
</li>
<li>
<br/>
<h:outputText value="#{configurationBean.SOMFActivationMessage}" style="float:left; text-align:left;margin-leftt:7px;color:#0F5795;font-weight:bold;font-size:0.9em;line-height:23px;"/>
</li>
<li>
<br/>
<p:commandButton ajax="false" global="#{configurationBean.SOMFActivated}" onclick="startAjaxStatus()" value="Update" actionListener="#{ucoController.updateUco}" id="updateActivation" icon="ui-icon-disk" update=":tabView:user,:tabView:ScreeningForm>
</p:commandButton>
</li>
</ol>
<h:panelGrid columns="2" border="0" >
<h:outputText value="Update in progress..." id="shutDown" style="color:#0F5795;font-weight:bold;font-size:0.9em;line-height:23px;display:none;"/>
<p:graphicImage value="resources/img/load.gif" id="image" style="display:none;"/>
</h:panelGrid>
</h:form>
</h:panelGrid>
</p:tab>
<p:tab id="Screening" title="Screening" rendered="#{ucoController.disableConfiguration}">
<h:panelGrid id="ScreeningPG" columns="1" cellpadding="10" border="0">
<h:form id="ScreeningForm" class="sgdsForm clear" >
<ol>
<li>
<label for="analysis" class="label required">Think Time (ms)</label>
<h:inputText id="thinkTime" value="#{configurationBean.screeningThinktime}" maxlength="5" readonly="#{configurationBean.SOMFActivated}">
<f:validator validatorId="screeningTimeValidator" />
<f:attribute name="autoScreening" value="#{configurationBean.automaticScreening}" />
</h:inputText>
</li>
<li>
<label for="activate" class="label">Automatic Screening</label>
<p:selectBooleanCheckbox value="#{configurationBean.automaticScreening}" readonly="#{configurationBean.SOMFActivated}" disabled="#{configurationBean.SOMFActivated}"/>
</li>
<li>
<br/>
<p:commandButton disabled="#{configurationBean.SOMFActivated}" oncomplete="handleComplete(xhr, status, args)" value="Update" actionListener="#{ucoController.updateUco}" id="updateScreening" icon="ui-icon-disk" process="#this,ScreeningForm" update=":tabView:ScreeningPG"/>
</li>
</ol>
</h:form>
</h:panelGrid>
</p:tab>
</p:tabView>
And my backing bean :
#ManagedBean(name = "ucoController", eager = true)
#SessionScoped
public class UcoController implements Serializable {
public final ConfigurationBean loadConfiguration() {
// load configuration
}
public final void updateUco(ActionEvent event) {
// update configuration
}
}
I wonder why the updateUco method is not fired when submiting the form. In consequence my form seems to not be submitted! The model doesn't change.
Is there anything wrong with mojarra version or primefaces?
I went through this exhaustive answer for what to appear the same problem. But none of the point described fit for my case !
Please upgrade primefaces to version 4.0 in order to support JSF version 2.2 which is supported in Wildfly 9.0.2.
<ui:repeat value="#{prodCtr.paginator.model}" var="o">
<h:form>
<h:commandLink id="#{o.id}" action="ModelInfo.xhtml" actionListener="#{prodCtr.listener}">
<h:panelGrid columns="1" style="border: #ffffff">
<img src="resources/images/#{o.id}.jpg" style="width: 100px;height: 100px"/>
<h:outputLabel value="#{o.price} YTL" style="font-size: 12px;font-family: Georgia, Serif;color: #ff3300" />
<h:commandButton value="Sifaris et" class="button"/>
</h:panelGrid>
</h:commandLink>
</h:form>
</ui:repeat>
java.lang.IllegalArgumentException caught during processing of RENDER_RESPONSE 6 : UIComponent-ClientId=, Message=Empty id attribute is not allowed here
How can i CommandLink id dinamically?Is there an other way?
You don't need to specify the id attribute for the child components when using the <ui:repeat/> tag. It automatically does this.
If you do want to be in control of the id attribute, <ui:repeat/> is the wrong one to use for that. The reason is that at point in time that the components are being placed in the UIViewroot (essentially when the page is being constructed for the first time), the <ui:repeat/> component is not active, i.e. it's not being processed. So the var="o" is not available to the runtime and so nothing is available to be used as id.
To be in control of the id, you should be using the <c:forEach/> tag instead. Your code should look like this:
<c:forEach items="#{prodCtr.paginator.model}" var="o">
<h:form>
<h:commandLink id="#{o.id}" action="ModelInfo.xhtml" actionListener="#{prodCtr.listener}">
<h:panelGrid columns="1" style="border: #ffffff">
<img src="resources/images/#{o.id}.jpg" style="width: 100px;height: 100px"/>
<h:outputLabel value="#{o.price} YTL" style="font-size: 12px;font-family: Georgia, Serif;color: #ff3300" />
<h:commandButton value="Sifaris et" class="button"/>
</h:panelGrid>
</h:commandLink>
</h:form>
</c:forEach>
I am trying to add records to datatable by submitting a form built using JSF and primefaces which gets popped up from the page containing datatable.On submit of the form the data gets updated to database but i need to refresh/update the datatable with the submitted data.Is there any way using which i can refer the main page on submit from the form so that i can refresh/update the datatable.
JSF code snippet containing datatable
<h:form id="lpcForm">
<!-- <p:growl id="messages" showDetail="true" /> -->
<div id="content">
<h:commandLink ajax="true" id="cmdLinkAdd" value="Add" action="#{lpcBean.addRecord}"
target="_blank" update="#form" process="#this" />
<p:dataTable var="lpcData" id="lpcDataTable" widgetVar="lpcTable"
value="#{lpcBean.lpcIdList}" selection="#{lpcBean.selectedRows}"
editable="true" scrollable="true" scrollWidth="1110"
scrollHeight="330" styleClass="datatable">
<!--Contents of the table-->
</p:dataTable>
</div>
On clicking the command link i get the web page popup through which i can submit the data,the snippet of which is as below
<h:form id="addLpc">
<p:focus context="addLpc" />
<div align="center">
<h:panelGrid id="addLpcForm" columns="3" >
contents of the form
</h:panelGrid>
</div>
<div align="center">
<p:commandButton id="submitButton" value="Submit" ajax="true"
action="#{lpcRecordAddition.formSubmit}" />
<h:outputText />
</div>
</h:form>
on submit of this form i need the datatable in other page to get updated.
Use the following for the commandButton:
<p:commandButton id="submitButton" value="Submit" ajax="true"
action="#{lpcRecordAddition.formSubmit}" update=":lpcForm:lpcDataTable" />
I followed the intructions given by BalusC in [this answer][1]
[1]: JSF and f:ajax for hiding/showing div and it worked. But I want to hide the element when the command button is pressed and the element with the id="incorrectQuestion" is shown. I did it almost like in the example. I have tried a lot of combinations but I couldn't hide the command button.
<h:panelGroup rendered="#{not answerResultBean.showIncorrectQuestions}">
<div id="loginDiv" style="width: 400px; text-align: left;">
<center>
<f:ajax render="incorrectQuestions">
<br />
<h:commandButton value="#{strings.failedQuestions}"
action="#{answerResultBean.setShowIncorrectQuestions(true)}" />
<br />
<br />
</f:ajax>
</center>
</div>
</h:panelGroup>
<h:panelGroup id="incorrectQuestions">
<h:panelGroup rendered="#{answerResultBean.showIncorrectQuestions}">
<div id="loginDiv" style="width: 400px; text-align: left;">
...
Just put the <h:panelGroup> containing the button inside <h:panelGroup id="incorrectQuestions"> as well. This way it will also be updated on ajax request and the rendered condition would cause it to be hidden.
By the way, try to keep your code DRY. You've there quite some code duplication.
<h:panelGroup layout="block" id="loginDiv" style="width: 400px; text-align: left;">
<h:commandButton value="#{strings.failedQuestions}"
action="#{answerResultBean.setShowIncorrectQuestions(true)}"
style="text-align: center; margin: 10px;"
rendered="#{not answerResultBean.showIncorrectQuestions}">
<f:ajax render="loginDiv">
</h:commandButton>
<h:panelGroup rendered="#{answerResultBean.showIncorrectQuestions}">
...
</h:panelGroup>
</h:panelGroup>
Note that a <h:panelGroup layout="block"> generates a <div>. This way there's no need for a <h:panelGroup><div>.
I want to render 6 blocks on a page asynchronously using richfaces a4j support.
To accomplish this I have defined 6 a4j:region components and an a4j:commandLink for manual refreshing of the components.
Here is the relevant code:
<ui:define name="body">
<h:form id="dashboardform">
<div class="table_container" style="width:99%">
<h:panelGrid id="dashboadPanel" columns="3">
<a4j:region id="resourceGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box">
<ui:include src="dashboard_resourceGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="profileGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box" >
<ui:include src="dashboad_profileGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="reportGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box" >
<ui:include src="dashboard_reportGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="installedBaseGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box" >
<ui:include src="dashboard_installedBaseGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="simcardGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box">
<ui:include src="dashboard_simcardGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
<a4j:region id="orderOverviewGraphRegion">
<h:panelGroup>
<div class="rounded_box dashboard_box" id="order">
<ui:include src="dashboard_orderOverviewGraph.xhtml"/>
</div>
</h:panelGroup>
</a4j:region>
</h:panelGrid>
<h:panelGrid id="dashboadRefreshPanel" columns="1" width="100%">
<a4j:commandButton value="#{I18n.messages['dashboard.btn.refresh']}"
action="#{dashboardBean.doRefresh}" reRender="resourceGraphRegion, profileGraphRegion, reportGraphRegion, installedBaseGraphRegion, simcardGraphRegion, orderOverviewGraphRegion"
image="/static/images/refresh.png" style="border:0px; margin-right: 20px; padding: 0px; float: right;" />
</h:panelGrid>
</div>
However, when manually triggering the a4j:commandLink the whole page becomes inactive (grays out) and a loading icon appears.
What I would like is the the page opens up very smoothly and that all 6 regions are rendered async so the user gets a smooth experience and doesn't have to wait for all regions to complete
.
To control the loading notification you can use
<a4j:status id="commonstatus" startText="In progress..." stopText="Complete"/>
This allows you to ste the status field of almoust any "link" to use that status control.
tutorial