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)
Related
I have two selectBooleanCheckbox in differet tabs that are linked to the same variable in the backend bean, like this:
.xhtml:
<p:tabView id="tabsView" widgetVar="tabPanelWidget" dynamic="true" cache="true">
....
<p:tab id="tab1">
<p:outputPanel id="panel1">
<p:fieldset toggleable="false">
<p:panelGrid id="panelGrid1">
<p:row>
<p:column>
<p:outputLabel for="toggle1"/>
<p:selectBooleanCheckbox id="toggle1" value="#{backingBean.toogleBool}">
<p:ajax update="#(.toggle2)"/>
</p:selectBooleanCheckbox>
<p:column>
</p:row>
</p:panelGrid>
</p:fieldset>
</p:outputPanel>
</p:tab>
....
<p:tab id="tab2">
<p:outputPanel id="panel2">
<p:fieldset toggleable="false">
<p:panelGrid id="panelGrid2">
<p:row>
<p:column>
<p:outputLabel for="toggle2"/>
<p:selectBooleanCheckbox id="toggle2" value="#{backingBean.toogleBool}">
<p:ajax update="#(.toggle1)"/>
</p:selectBooleanCheckbox>
<p:column>
</p:row>
</p:panelGrid>
</p:fieldset>
</p:outputPanel>
</p:tab>
</p:tabView>
backingBean.java :
....
#Getter #Setter private boolean toggleMailAnhangExtrahieren = true;
....
Obviously this isn't my whole code as that would be too much to post here but I hope I included everything relevant. As you can see I try to use ajax to update the other selectBooleanCheckbox when one of them is clicked. As they are bound to the same variable, I would expect both selectBooleanCheckboxes to have the same status (both checked or both unchecked), but the other checkbox does not update. What am I doing wrong?
You need to fix the update part in the p:ajax tags:
#(.<class>) is a class-selector (Primefaces is using the jQuery Selector API, see https://api.jquery.com/category/selectors/), but you want to reference an id. So just use the id itself in the p:ajax tag, e.g.
<p:ajax update="toggle2"/>
Try using the tab id like this:
<p:ajax update="#form:tabsView:toggle2"/>
I used PrimeFaces component tabView and i have code like below.
<p:tabView id="tabs" dynamic="true" cache="false">
<p:tab id="tab1">
<ui:include src="/some/path/page.xhtml"/>
</p:tab>
<p:tab id="tab2">
<ui:include src="/some/path/page2.xhtml"/>
</p:tab>
<p:tab id="tab3">
<ui:include src="/some/path/page3.xhtml" />
</p:tab>
</p:tabView>
On page3 i have ajax commandButton which looks like below.
<p:commandButton actionListener="#{bean.method(parameter)}" ajax="true" value="Add" />
I need switch to tab1 when method in bean finished. Thank you for help.
You have to add:
activeIndex
attribute to your tabView:
<p:tabView id="tabs" dynamic="true" cache="false" activeIndex="1" >
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 this piece of code:
<h:body>
<h:form id="form1">
<p:menuButton value="#{msgs.settingsMenuButton}">
<p:menuitem value="#{msgs.accountsMenuItem}" url="#" update=":dlgEdit" oncomplete="_dlgEdit.show()"/>
</p:menuButton>
<p:commandButton value="Accounts" icon="ui-icon-gear"
update=":dlgEdit"
oncomplete="_dlgEdit.show()"/>
</h:form>
<p:dialog id="dlgEdit" widgetVar="_dlgEdit" modal="true" closable="true" header="Accounts">
<h:form id="frmEdit" >
<p:panelGrid id="pnlEdit" columns="2">
<p:outputLabel id="lblName" for="eName" value="Name"/>
<p:inputText id="eName" value="#{tasksBean.selectedLocation}"/>
</p:panelGrid>
</h:form>
</p:dialog>
</h:body>
The dialog is not displayed when the menuItem is selected but it works when the commandButton is pressed.
The behaviors for both are the same...
Can you support me please?
Thanks,
Andrei
Try:
oncomplete="PF('_dlgEdit').show();"
I have a p:dataTable and contains commandLinks.
<h:form id="defVhclForm">
<p:dataTable id="vehicleTable" var="vhcl" value="#{vehicle.vehicleList}"
scrollable="true" scrollHeight="520">
<p:column id="trackId" label="#{general.vehicleName}" width="120" style="spacing:0;padding-left:10px;border:0px">
<p:commandLink id="editLink" immediate="true" value="#{vhcl.vehicle.vehicleName}" title="#{general.editVehicleInfo}"
action="#{vehicle.vehicleSelected}" style="font-weight:bold; font-size:11px;"
update="#form"/>
<br />
<h:outputText id="vehicleId" value="#{vhcl.vehicle.mtsTrackId}" title="#{general.vehicleId}" style="font-size:10px; color:blue;" />
<br/>
<h:outputText value="#{vhcl.vehicle.vehiclePlate}" id="vehiclePlate" title="#{general.licencePlate}" style="font-size:10px; color:blue"/>
<h:inputHidden value="#{vhcl.vehicle.mtsTrackId}" id="mtsTrackId"/>
</p:column>
</p:dataTable>
<p:tabView id="tabView" styleClass="tableCellHeader" style="align:left">
<p:tab id="vehicleDefinitionTab" title="#{general.vehicle}" styleClass="tableCellHeader">
<h:panelGrid id="mainGrid" columns="2" columnClasses="alignTop, alignTop">
<h:panelGrid id="subGrid" columns="4">
<h:outputLabel id="vhclIdLbl" value="#{general.vehicleId}:"/>
<p:inputText id="vehicleIdTxt" binding="#{vehicle.vehicleIdTxt}" style="width:150px;"/>
<h:outputLabel id="vhclPlateLbl" value="#{general.licencePlate}:"/>
<p:inputText id="vehiclePlateTxt" binding="#{vehicle.vehiclePlateTxt}" style="width:150px;"/>
<h:outputLabel id="vhclNameLbl" value="#{general.vehicleName}:"/>
<p:inputText id="vehicleNameTxt" binding="#{vehicle.vehicleNameTxt}" style="width:150px;"/>
<h:outputLabel id="vhclTypeNameLbl" value="#{general.vehichleType}:"/>
<p:selectOneMenu id="vhclTypeCmb" binding="#{vehicle.vehicleTypeCmb}" styleClass="tableCell" effect="slide" style="width:157px">
<f:selectItem itemLabel="#{general.pleaseSelect}" itemValue="" styleClass="tableCell"/>
<f:selectItems value="#{vehicle.vehicleTypeCmbList}" styleClass="tableCell"/>
</p:selectOneMenu>
</h:panelGrid>
<!-- <p:graphicImage value="#" width="120px" height="80px"/>-->
</h:panelGrid>
</p:tab>
<p:tab id="registrationTab" title="#{general.auth}" styleClass="tableCellHeader">
</p:tab>
</:tabView>
</h:form>
By pressing the commandLink some p:tab should be updated and filled with the related data. Every component is inside the same h:form. Pressing the commandLink does not update the related p:tab s. Also, the commandLink action calls the bean method just for one time. More than one pressing does not call the bean method.
How can I solve this problem?