I am using primefaces6.0 on Jsf2.0 & mojarra 2.0.9-SNAPSHOT.
I have a commandLink on the actions facet of a panel. This panel is rendered using ui:repeat so as to be dynamic. The panels are grouped inside a Tab.
So the i have dynamic p:tab , and inside each tab, the panels are rendered using ui:repeat.
My problem is the commandLInk action or actionlistener is called only for the first panel of each tab. When i click on other panels of the same tab - the action is not fired.
Any leads ?
Below is my xhtml code.
<p:tabView id="tabViewId"
value="#{userdashboard.chartGroupsList}" var="cg" onTabShow="reflowChart()">
<p:tab title="#{cg.groupName}" >
<ui:repeat var="c" value="#{cg.charts}" varStatus="status">
<ui:fragment rendered="#{c.typeCode ne 'TABLE1'}">
<div class="Container#{c.chartSpecificContainerWidth} Responsive#{c.chartSpecificContainerWidth} NoIndent"
id="parentDivId#{c.rowid}" >
<p:panel header="" styleClass="panelChart"
toggleable="true" toggleOrientation="horizontal">
<f:facet name="actions" >
<p:commandLink styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"
action="#{userdashboard.updateUIColumnLayout}" ajax="false">
<h:outputText value="#{c.id}"/>
</p:commandLink>
</f:facet>
</p:panel>
</ui:fragment>
</ui:repeat>
</p:tab>
</p:tabView>
Related
I use this code:
<p:panel header="Advanced User Data" toggleable="true" toggleOrientation="horizontal" collapsed="true">
some other stuff...
</p:panel>
Is there an attribute with which I can set the title when th panel is closed like this:
example
There is no attribute like this AFAIK. You could bind the value of collapsed attribute to a managed bean and add an AJAX listener on toggle event:
<p:panel header="Advanced User Data" toggleable="true"
toggleOrientation="horizontal" collapsed="#{myBean.booleanVal}" style="display: inline-block;">
<p:ajax event="toggle" process="#this" update="pnlAlternativeTitle" />
</p:panel>
<h:panelGroup id="pnlAlternativeTitle">
<h:outputText rendered="#{myBean.booleanVal}"
value="Alternative title" />
</h:panelGroup>
i have a 1 datatable inside a tab and another tab with a other datatable in tabview element, but when the method onTabChange is execute the TabEvent.getTab is null wtf?!!! I have the next Code
<h:form id="frmTab">
<p:tabView id="tabs" dynamic="true" cache="false">
<p:ajax event="tabChange" listener="#{controller.onTabChange}" update="one-content,two-content"/>
<p:tab title="First Tab" id="first-tab">
<h:panelGroup display="block" id="one-content">
<p:dataTable value="${controller.detailTable1}"
</p:datatable>
</h:panelGroup>
</p:datatable>
<p:tab title="Second Tab" id="two-tab">
<h:panelGroup display="block" id="one-content">
<p:dataTable value="${controller.detailTable2}"
</p:datatable>
</h:panelGroup>
</p:tab>
</p:tabView>
When the onTabChange method is fired,
java.lang.NullPointerException
at org.primefaces.component.tabview.TabViewRenderer.encodeEnd(TabViewRenderer.java:59)
at javax.faces.component.UIComponentBase.encodeEnd(UIComponentBase.java:881)
at javax.faces.component.UIComponent.encodeAll(UIComponent.java:1786)
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"
Commandbutton with id("myButtonId2") works fine. I mean it updates "myOutputPanel"
but commandbutton(myButtonId) which is inside datatable doesn't update outputPanel. I found the suggestions and tried with the following,
update=":myForm:myOutputPanel"
update="#myForm"
update=":myOutputPanel"
But none of them worked...
Here is the snippet...
<h:form id="myForm" prependId="false">
<p:panel id="myPanel">
<p:dataTable id="myDatatable">
<p:column style="width:4%">
<p:commandButton id="myButtonId" actionListener="#{bean.showPanel}" update="myOutputPanel"/>
</p:column>
</p:dataTable>
<p:commandButton id="myButtonId2" update="myOutputPanel"/>
</p:panel>
<p:outputPanel id="myOutputPanel" rendered="#{bean.show}">
//some stuff
</p:outputPanel>
Try to put your <p:outputPanel /> inside a <p:panel />
and add a "widgetVar" attribute
For example : <p:panel widgetVar="var" [..]>
and just update the panel directly with update="#widgetVar(var)"
I have an accordion panel with few tabs with in a form . Each tab has a command button (I use the update and process attributes to process specific inputs with a tab). I have set the multiple attribute to true on the accordion panel. When the page initially loads the first tab is open by default. If i hit the enter key on the key board then the command button in the first tab has the keyboard focus and the fields are processed. now I leave the first tab open and open another tab and i hit the enter key the keyboard focus is still on the command button on the first tab . I tried using the p:focus with for/context attributes but with no help.
<h:form id="calculatorsNTools">
<p:accordionPanel multiple="true">
<p:tab title="Teenage Check">
<h:inputText id="age1" required="true" label="Age"
value="#{calculatorBacking.age}" validatorMessage="Enter a value">
<f:validateDoubleRange minimum="1" />
</h:inputText>
<p:message for="age1" id="msgage1" />
<h:panelGrid columns="3" id="gridTAresult">
<p:commandButton id="calculateTA"
action="#{calculatorBacking.calculateTA}" value="Calculate"
process="#this,age1"
update="gridTAresult">
</p:commandButton>
<b> Teenage (y/n)</b>
<h:outputLabel id="resultTA" value="#{calculatorBacking.resultTeenAge}"></h:outputLabel>
</h:panelGrid>
</p:tab>
<p:tab title="Retirement Check">
<h:inputText id="age2" required="true" label="Age"
value="#{calculatorBacking.age}" validatorMessage="Enter a value">
<f:validateDoubleRange minimum="1" />
</h:inputText>
<p:message for="age2" id="msgage2" />
<h:panelGrid columns="3" id="gridREresult">
<p:commandButton id="calculateRE"
action="#{calculatorBacking.calculateRE}" value="Calculate"
process="#this,age2"
update="gridREresult">
</p:commandButton>
<b> Retirement (y/n)</b>
<h:outputLabel id="resultRE" value="#{calculatorBacking.resultRetirement}"></h:outputLabel>
</h:panelGrid>
</p:tab>
</p:accordionPanel>
<h:form>
You can use javascript to accomplish what you want. I am not completely sure how to do it on an accordion but on a tabView it would be:
<p:tabView onTabChange="handleTabChange(event, index)">
Then create a javascript function to set the focus:
function handleTabChange(event, index){
if(index == 1){
var opControl = document.getElementById("calculatorsNTools:calculateTA");
opControl.focus();
}
}
You should be able to modify that to what you need for the accordionPanel.