Primefaces 7 on JBoss 7.3
I have an application which allows users to click on entries in a datatable to display details of the entity in a dialog box:
<p:column headerText="XTAMessageID" id="msgIdCol" width="350" sortBy="#{nachricht.messageId}" styleClass="column">
<p:commandLink value="#{nachricht.messageId}" id="transportReportLink"
oncomplete="PF('transportDialogDC').show()"
action="#{detailController.showTransportReport(nachricht)}"
update="#form:transportDialogDC"></p:commandLink>
<p:tooltip for="transportReportLink" value="Transport Report anzeigen" position="top"></p:tooltip>
</p:column>
<p:dialog id="transportDialogDC" widgetVar="transportDialogDC" styleClass="messageDialog">
<p:growl life="10000"></p:growl>
<p>MessageId: #{detailController.messagedId} von: #{detailController.absender} an: #{detailController.empfaenger}</p>
<p:panelGrid columns="2" style="border-width:0px !important">
<p:panel style="padding: 0px; margin: 0px; border-width:0px !important">
<h4>Transport Report</h4>
<h:inputTextarea value="#{detailController.transportReportXML}" readonly="true" styleClass="messageDialogTextArea" cols="100" rows="25"/>
</p:panel>
…..
In Chrome this works, however in Firefox (98) sometimes the dialog is displayed empty without calling the detailController.showTransportReport(nachricht) method. Nothing happens in the backend....
This behavior persists for a few trials. After reloading the pages the dialog works again for a random number of times.
Any ideas what might cause this?
Thanks,
Hans
Related
For example, I am trying to update total price in a panelgrid once am clicking on another panelgrid.
<c:forEach items="#{coinsBean.selectedCountryVo.selectedGameVo.operatorGamePackageVos}" var="operatorGamePackageVo" >
<h:panelGrid id="pack_#{operatorGamePackageVo.id}"
styleClass="bord"
style="border:solid #cbcbcb; margin: 4vmin; min-width: -webkit-fill-available;text-align: center;border-radius: 2vmin;"
onclick="selectUcs(this.id);"
>
<p:commandLink style="border-radius: 2vmin; padding: 2vw;background-size: 4vmin;text-align: center;font-family: 'Cairo', sans-serif "
update="totalSelected" action="#{coinsBean.selectOperatorGamePackageVo(operatorGamePackageVo)}"
value="#{operatorGamePackageVo.packageName}"
/>
</h:panelGrid>
</c:forEach>
<h:panelGrid columns="1" id="totalSelected" style="background-color: white;
padding-left: 5vh;border-radius: 0 0 1vh 1vh;margin-bottom: 2vh;width:95%;margin:auto;text-align: left ;">
<h:panelGrid>
<p id="total" style="color: #FE6D2C;font-size: 3.5vmin;font-family: 'Cairo', sans-serif;text-align: center;font-weight: bold;margin: auto;" dir="rtl">
price
</p>
<p id="total1" style="color: black;font-size: 3vw;font-family: 'Cairo', sans-serif;text-align: center;font-weight: bold;margin: auto" dir="rtl">
#{coinsBean.selectedCountryVo.selectedGameVo.selectedOperatorGamePackageVo.price}
</p>
</h:panelGrid>
</h:panelGrid>
once I click on the above one!
Solution
It isn't possible to add ajax to a h:panelGrid (see Explanation to see why).
Probably the best way to this would be using the h:commandScript (since JSF 2.3).
Just add this somewhere to your page:
<h:form>
<h:commandScript name="someFunction" render="totalSelected" />
</h:form>
Now when you want to update the panelGrid just execute someFunction().
In your case add this to your panelGrid that should update the other one:
<h:panelGrid ... onclick="someFunction();">
...
</h:panelGrid>
One could also use css (a bad hack) to stretch a h:commandLink to fit the whole panelGrid (I can add this on request).
Explanation
Basically every component (h:panelGrid, h:commandLink, etc.) you can use is a java class. But not every one can/should do the same things. If you want to use ajax behaviours with a component that specific component has to implement the ClientBehaviourHolder interface. This is reserved for action components like h:commandButton, h:inputText, h:commandScript, etc. . The h:panelGrid does not implement this interface.
I am trying to create OrderList with Primefaces.
This list would make possible changing order of items and allow setting some boolean with a checkbox. Changing the order is fine.
The problem is that every checkbox gets the same id.
When I am clicking on one of them, then the value of all of them change.
Here is my snippet:
<p:orderList id="OrderList" value="#{editBean.visibleitem}" var="item"
itemValue="#{item}" controlsLocation="left" responsive="true"
converter="converter">
<f:facet name="caption">
<div>
<div style="float: left">label</div>
<div style="text-align: right; padding-right: 15px">checkbox</div>
</div>
</f:facet>
<p:column style="width:80%">
<h:outputText value="item" styleClass="bst-text"/>
</p:column>
<p:column style="width:20%; text-align: center">
<p:selectBooleanCheckbox id="id_item"
valueChangeListener="editBean"
value="#{item.object.booleanObj}">
</p:selectBooleanCheckbox>
</p:column>
</p:orderList>
I will be happy if you could help me.
Greetings :)
It is an open enhancement request currently in PrimeFaces 6.2 found here:
https://github.com/primefaces/primefaces/issues/3781
I will see if we can get it implemented before the 7.0 release.
Thank you for your responses. I decided to redesign my UI and now I don't display checkboxes in OrderList Component.
So i have designed a simple form having selectOneListbox / selectManyMenu elements which I am using to generate a piece of text based upon the user selections.
It's working fine. Now what I want is when the user clicks 'clear' button, the selections should be undone and the page should come back to the initial state(no selections).
How can I achieve this ?
xhtml
<h:form>
<h:panelGrid columns="6" style="margin-bottom:10px;" cellpadding="5" columnClasses="label, value">
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">Comment Type</h6>
<!-- comment type -->
<p:selectOneListbox id="basic1" value="#{decisionTreeBean.option1}" style=" font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.commentType}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectOneListbox>
</p:panel>
<p:panel>
<h6 style="width:10.4em;background-color:#ACBECE;">MTCN</h6>
<p:selectManyMenu id="advanced1" value="#{decisionTreeBean.option2}" showCheckbox="true" style="font-size: 12px;background-color:silver;width:12em; height:10em; border-style:solid !important;border-width:0.5px !important; border-color:grey !important;">
<f:selectItems value="#{decisionTreeBean.mtcns}" var="X" itemLabel="#{X}" itemValue="#{X}" />
</p:selectManyMenu>
</p:panel>
</h:panelGrid>
<!-- Text Area -->
<p:inputTextarea id="decisionNotes" readonly="#{facesContext.renderResponse}" value="#{decisionTreeBean.decisionNotes}" styleClass="dispostionInputTextArea" autoResize="true">
</p:inputTextarea>
<br/>
<p:commandButton id="generateBtn" value="Generate Text" action="#{decisionTreeBean.generateText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:commandButton id="clearBtn" value="Clear" action="#{decisionTreeBean.clearText}" update=":#{p:component('decisionNotes')}">
</p:commandButton>
<p:ajaxStatus onstart="PF('statusDialog').show()"
onsuccess="PF('statusDialog').hide()" />
<p:dialog widgetVar="statusDialog" modal="true" draggable="false"
closable="false" resizable="false" showHeader="false">
<p:graphicImage value="/images/ajax-loader.gif" />
</p:dialog>
</h:form>
In my bean, I have a clear method which clears the content of the textarea. I want this button to undo the selections as well as part of the ajax call.
public void clearText() {
this.decisionNotes=" ";
}
(for brevity I have included just 2 columns here in xhtml. There are in total 5 separate selection columns with same functionality)
I would simply reset the values of the Menu/Box in the bean method too:
public void clearText() {
this.decisionNotes=" ";
this.option1 = null;
//and so on...
}
Then you just need to update the components in the update attribute of your button. But I'd update the whole form instead of each component if you want to refresh nearly each component in the form. So just use update="#form":
Note: The default process value of p:commandButton is #form. So your clear button will process the whole form on every click altough it doesn't need to. I'd set it to process="#this", so it will just perform it's action.
Using primefaces version 6.0, I have my form (inputText, dataTable, selectOnemenu, etc) and it works correctly, but at the moment of adding a p: inputNumber it stops working all Primefaces, (inputText, dataTable, selectOnemenu, etc) To run ... in the registry does not appear any error
<p:panelGrid columns="2" layout="grid" style="border: none" columnClasses="ui-grid-col-6,ui-grid-col-6">
<p:outputLabel value="Tamaño" style="width: 100%"></p:outputLabel>
<p:inputNumber value="#{reporteadorBean.index2}" maxlength="15" >
</p:inputNumber>
<p:outputLabel value="Tipo de dato" style="width: 100%"></p:outputLabel>
</p:panelGrid>
According to primefaces you should use:
xmlns:pe="http://primefaces.org/ui/extensions">
and dependencies
I am new to this Website My issue is related to SelectBooleanCheckbox in primefaces.
Whenever I submit my form, the checkbox gets unchecked.
I am using dynamic tabview.
Here is my xhtml code:-
<h:form id="form" >
<p:panel id="tagsPanel" >
<p:tabView id="tabView" style="background-color:transparent;background-image:none;" var="tabKey" value="#{MBean.Names}"
dynamic="true" >
<p:dataGrid var="appSettingsList" value="#{appSettingsMBean.tabData[tabKey]}" columns="1" styleClass="plainDataGrid">
<h:panelGrid columns="2" border="0" cellspacing="0" cellpadding="0" columnClasses="JspContent12 ,JspContent22" width="100%" >
<p:column escape="false" >
<p:selectBooleanCheckbox value="#{appSettingsList.resultValues.checkboxValue}" style="float:left" id="checkBoxValue"
rendered="#{appSettingsList.currentValues != null and appSettingsList.currentValues.size() > 0 and
appSettingsList.displayType.equalsIgnoreCase('single') and appSettingsList.dataType.equalsIgnoreCase('boolean')}">
</p:selectBooleanCheckbox>
</p:column>
</h:panelGrid>
</p:dataGrid>
</p:panel>
<p:panel border="0" id="buttonRow" style="text-align:center;border-width:0;border-style:none;background-image:none;" >
<p:commandButton value="Save" id="save" actionListener="#{MBean.saveSettings()}" ajax="false" style="width:130px" />
</p:panel>
</h:form>
The checkboxes remain checked when tabs are changed and save btn is clicked
But,when only the save btn is clicked,it gets unchecked
Any help will be appreciated...
Here,
<p:commandButton ... ajax="false" />
Ajax is turned off. Thus a full page refresh is performed after submitting the form. That the checkbox got unchecked suggests that the bean doesn't properly keep its state, or that you're performing business logic in a getter method, which causes it to return a fresh new model everytime instead of the one holding the submitted values.
You've 2 options:
Just use ajax. I.e. get rid of ajax="false". If you intend to update certain parts of the view on submit, then just specify update attribute accordingly.
Make sure that your bean doesn't mess with the state or getters.