i have a serious problem with jsf tabview and form
inside my tabview i have to input text and submit button whenever i submit i always have a empty value.
<h:form id="form">
<p:tab id="tabview" title="Ressources Humaines">
<p:tabView activeIndex="#{SelectBean.activeTab}" value="#{SelectBean.types}" var="item" >
<p:ajax event="tabChange" listener="#{SelectBean.onTabChange}" update=":form" />
<p:tab title="#{item}">
<p:tabView id="tab" activeIndex="#{SelectBean.other}" value="#{SelectBean.res}" var="rr">
<p:ajax event="tabChange" listener="#{SelectBean.onTabChange1}" />
<p:tab title="#{rr.nom_ressource}">
<p:panel rendered ="#{SelectBean.bol}" closable="true" toggleable="true" styleClass="outPanel">
<p:growl id="growl" showDetail="true" />
<h:outputLabel value="Nom " />
<h:inputText value="#{SelectBean.nom}" />
<br/>
<h:outputLabel value="Experience " />
<h:inputText value="#{SelectBean.exp}" />
<br/>
<h:commandButton immediate="true" value="Modifier" action="#{SelectBean.ok}"/>
</p:panel>
</p:tab>
</p:tabView>
</p:tab>
</p:tabView>
</h:form>
the SelectBean.nom and SelecBean.exp are always empty any help please
The problem is with your
<h:commandButton immediate="true" value="Modifier" action="#{SelectBean.ok}"/>
The immediate attribute action method causes JSF to go directly to the render phase 'of the same view' by calling facesContext.renderResponse(), then the components will behave as they do for a validation failure - by displaying the value cached in the component rather than fetching data from the backing bean.
Here is a list of possible solutions
Related
Trying to develop a drag and drop functionality. A fieldSet in a layout has to be dragged and imitate user as if it is being dropped into another layout. Below is the xhtml code for the same :-
<h:head>
<script type="text/javascript">
function handleDrop(event, ui) {
var dropped = ui.draggable;
dropped.fadeOut('fast');
}
</script>
</h:head>
<h:body>
<h:form>
HI
<h1>Primefaces Basic Config</h1>
<p:layout style="min-width:400px;min-height:200px;">
<p:layoutUnit id="first" position="west">
<p:fieldset id="ppl" legend="Builder" toggleable="true" toggleSpeed="500" style="width:300px">
<h:panelGrid columns="2" cellpadding="5">
<h:outputText value="Bla bla bla"></h:outputText>
</h:panelGrid>
</p:fieldset>
<p:draggable for="ppl" revert="true" />
</p:layoutUnit>
<p:layoutUnit id="second" position="center">
<p:tabView id="dropdownpanel">
<p:tab title="Edit">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText
value="Add question details" />
</h:panelGrid>
</p:tab>
<p:tab title="Option">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="addtional options required" />
</h:panelGrid>
</p:tab>
<p:tab title="Logic">
<h:panelGrid columns="2" cellpadding="10">
<h:outputText value="addd logic to this tab" />
</h:panelGrid>
</p:tab>
</p:tabView>
</p:layoutUnit>
<p:droppable for="second" tolerance="touch" datasource="ppl" onDrop="handleDrop" >
<p:ajax update="first second" />
</p:droppable>
</p:layout>
</h:form>
</h:body>
</h:form>
Following is the screen shot of what i'm trying to achieve where builder fieldset can be dragged into edit area:-
But when i'm trying to drag BUILDER then following Exception is thrown :-
15:53:05,497 INFO
[javax.enterprise.resource.webcontainer.jsf.context]
(http-0.0.0.0-0.0.0.0-8081-1) java.lang.ClassCastException:
org.primefaces.component.fieldset.Fieldset cannot be cast to
javax.faces.component.UIData: java.lang.ClassCastException:
org.primefaces.component.fieldset.Fieldset cannot be cast to
javax.faces.component.UIData at
org.primefaces.component.dnd.Droppable.findDatasource(Droppable.java:231)
[primefaces-4.0.jar:4.0] at
org.primefaces.component.dnd.Droppable.queueEvent(Droppable.java:189)
[primefaces-4.0.jar:4.0] at
org.primefaces.component.behavior.ajax.AjaxBehaviorRenderer.decode(AjaxBehaviorRenderer.java:44)
[primefaces-4.0.jar:4.0] at
javax.faces.component.behavior.ClientBehaviorBase.decode(ClientBehaviorBase.java:132)
[jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final] at
org.primefaces.renderkit.CoreRenderer.decodeBehaviors(CoreRenderer.java:395)
[primefaces-4.0.jar:4.0] at
org.primefaces.component.dnd.DroppableRenderer.decode(DroppableRenderer.java:32)
[primefaces-4.0.jar:4.0] at
javax.faces.component.UIComponentBase.decode(UIComponentBase.java:787)
[jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final] at
javax.faces.component.UIComponentBase.processDecodes(UIComponentBase.java:1181)
[jboss-jsf-api_2.1_spec-2.0.1.Final.jar:2.0.1.Final]
And i've no clue to resolve.
The datasource attribute in your p:droppable element needs to refer to a UIData. Fieldset is not a UIData. If you look at the UIData Javadoc you will see that HtmlDatatable is a known subclass
I had the same problem and resolved by referencing my datatable instead of the fieldset. In your case you are using a h:panelGrid, so change
<h:panelGrid columns="2" cellpadding="5" >
to a datatable, give it an ID. Say "datasrc1".
And change your droppable's datasource to:
<p:droppable for="second" tolerance="touch" datasource="datasrc1" onDrop="handleDrop" >
Using primefaces 4.0 and jsf 2.2.5
stmt.xhtml has 2 includes. IncludeDetail.xhtml and IncludeDuo.xhtml. IncludeDuo also includes IncludeDetail.
In IncludeDetail.xhtml the <ui:composition> Element owns no <form>, id-Attribute or any other special elements. Only <h:panelGrid>, <h:selectOneMenu> and <h:selectOneMenu>. Nothing special.
IncludeDuo.xhtml owns <p:layout> and <p:message> as child elements of <ui:composition>. Deeper inside the <p:layout> we find this piece of code:
<h:panelGrid columns="1" style="padding-left: 10px">
<h:outputText value="AS" />
<h:selectManyMenu value="#{regelBean.selectedASForNewElement}" required="true" style="height:115px">
<f:selectItems value="#{aSBean.elementList}" var="var" itemLabel="#{var.vaSl}"
itemValue="#{var.vaSl}" />
</h:selectManyMenu>
</h:panelGrid>
If I remove required="true" everything works as expected. If I leave it there, the following setPropertyActionListener won't do it's job anymore:
<h:form id="form1">
<p:dialog header="Neue Regel" widgetVar="newDuoDialog" resizable="false" id="newDuoDlg" showEffect="fade"
hideEffect="fade" modal="true" styleClass="newDialog" width="1220">
<ui:insert name="insertDuo">
<ui:include src="/includes/duoRegelStmt.xhtml" />
</ui:insert>
</p:dialog>
<p:growl id="msgs" showDetail="true" life="20000"/>
<div class="nvg-dataTable">
<p:dataTable id="dt1" var="tVar" value="#{stmtBean.elementList}"
scrollable="false" styleClass="nvg-mainTable" paginator="true"
paginatorAlwaysVisible="false" rows="10"
rowsPerPageTemplate="10,25,100" paginatorPosition="bottom"
currentPageReportTemplate="({startRecord}-{endRecord} von {totalRecords})"
emptyMessage="Keine Statements gefunden" filteredValue="#{stmtBean.filteredElements}">
<p:column styleClass="padding2" style="width:6%">
<p:commandButton value="?" update=":dlgForm"
oncomplete="PF('detDialog').show()" icon="" title="Detail">
<f:setPropertyActionListener value="#{tVar}" target="#{stmtBean.selectedElement}" />
</p:commandButton>
<p:commandButton value="N" update=""
oncomplete="PF('newDuoDialog').show()" icon="" title="Neue Regel mit diesem Statement als Grundlage">
<f:setPropertyActionListener value="#{tVar}" target="#{stmtBean.selectedElement}" />
</p:commandButton>
[ ... ]
Is this a bug or am I misusing sth?
This is expected behaviour: As you are setting the property on submit of the form the property is only set when the form is successfully submitted, which is not the case when validation fails i.e. a required field is empty.
Use process="#this" on the p:commandButton so the form is not submitted. This should work for you as you just want to open the dialog and set the property.
I have a JSF page written with Primefaces components. My page consists of three sectors, each sector contains an accordion panel, and each tab of the accordion contains a data table.
I wish to search the data tables with the two buttons at the top of the sector, "Filter" and "Reset Filters". The search within a sector must be independent from searches within other sectors.
I wish to understand which is the best method to perform the above search/filtering. Consider that every time an accordion tab is opened, the records are loaded from the database.
<h:form id="form">
<p:tabView id="sectors" value="#{multipleSearchBean.sectors}"
var="sector">
<p:tab id="sett" title="#{sector.description}">
<ui:param name="key" value="searchText#{sector.id - 1}" />
<p:inputText id="searchValue" value="#{multipleSearchBean[key]}" />
<p:commandButton id="plainSearch" value="Filter"
action="#{searchBean.plainSearch()}">
</p:commandButton>
<p:commandButton id="resetSearch" value="Reset Filters"
action="#{searchBean.resetSearchFilters}">
</p:commandButton>
<p:accordionPanel id="accordion"
value="#{searchBean.getTabs()}" var="tab" multiple="true"
dynamic="true" cache="false"
activeIndex="#{searchBean.activeIndexes}">
<p:tab id="accordionTab" title="#{tab.title}">
<p:dataTable id="table" var="row"
value="#{searchBean.getObjects()}"
emptyMessage="Empty table" styleClass="#{sector.id - 1}_tableStyle">
<p:column headerText="Code">
<h:outputText value="#{row.code}" />
</p:column>
<p:column headerText="Description">
<h:outputText value="#{row.description}" />
</p:column>
</p:dataTable>
</p:tab>
</p:accordionPanel>
</p:tab>
</p:tabView>
</h:form>
I’m trying to update a part of my page using the following command:
<p:commandButton id="bntNewAddress" immediate="true"
value="New Address" disabled="false" icon="ui-icon-document"
process="#this" update=":main_form:createPanelDetailsAddress"
action="#{issuerComponent.initAddNewAddress}">
</p:commandButton>
When I click the button, the panel "createPanelDetailsAddress" is not updated. On the other side when I use update=":main_form”, the panel is updated (but all other panels inside the main_form are updated also)
The panel I want to update is included in a panel named “createPanel”.
Could anyone have idea why update=":main_form:createPanelDetailsAddress" doesn't work in my case ?
I use primefaces3.5 and Mojarra JSF 2.1.7
Here is the code I used:
public String initAddNewAddress(){
renderCreatePanelDetailsAddress = true;
return null;
}
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" template="/template.xhtml">
<ui:define name="content">
<h:form id="main_form">
<p:panel id="createPanel" rendered="true">
<p:messages id="msgCreate" />
<p:panel id="createPanelDetails"
header="#{issuerMsgs['issuer.createArea.title']}">
<h:panelGrid border="0" columns="6">
<h:outputText value="#{issuerMsgs['issuer.issuerCode.title']}:" />
<p:inputText required="true"
value="#{issuerComponent.updateIssuer.issuerCode}"
label="issuer_issuerCode">
</p:inputText>
<h:outputText value="#{issuerMsgs['issuer.description.title']}:" />
<p:inputText required="true"
value="#{issuerComponent.updateIssuer.description}"
label="issuer_description">
</p:inputText>
</h:panelGrid>
</p:panel>
<p:spacer height="10" />
<p:panel id="panelListAddress"
header="#{addressMsgs['address.createArea.title']}">
<p:dataTable id="addresslist" var="address"
value="#{issuerComponent.addressList}" paginator="false" rows="10">
<p:column>
<f:facet name="header">
<h:outputText value="#{addressMsgs['address.tel.title']}" />
</f:facet>
<h:outputText value="#{address.tel}" />
</p:column>
</p:dataTable>
<p:spacer height="22" width="0" />
<p:commandButton id="bntNewAddress" immediate="true"
value="New Address" disabled="false" icon="ui-icon-document"
process="#this" update=":main_form:createPanelDetailsAddress"
action="#{issuerComponent.initAddNewAddress}">
</p:commandButton>
</p:panel>
<p:panel id="createPanelDetailsAddress"
header="#{addressMsgs['address.createArea.title']}"
rendered="#{issuerComponent.renderCreatePanelDetailsAddress}">
<ui:include src="createAddress.xhtml"></ui:include>
<p:commandButton value="Add"
rendered="#{issuerComponent.renderBtnAddAddress}" disabled="false"
icon="ui-icon-document" process="#this,createPanelDetailsAddress"
update=":main_form" action="#{issuerComponent.addNewAddress}"
actionListener="#{addressComponent.addNewComposite}">
<f:setPropertyActionListener
value="#{addressComponent.updateAddress}"
target="#{issuerComponent.address}" />
</p:commandButton>
</p:panel>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
Your update will fail because
rendered="#{issuerComponent.renderCreatePanelDetailsAddress}"
will evaluate to false the first time the view is rendered. As a result the component is not in the DOM tree the first time the view is rendered.
Ajax updates work by locating a specific component (by id) in the DOM and replacing it with new markup. Your panel was never in the DOM to begin with, so there's nothing to update with ajax.
To remedy, you need to wrap the <p:panel/>with another component and make that component the target of your ajax update
<p:outputPanel id="container" layout="none">
<p:panel id="createPanelDetailsAddress" header="# addressMsgs['address.createArea.title']}" rendered="#issuerComponent.renderCreatePanelDetailsAddress}">
<ui:include src="createAddress.xhtml"></ui:include>
<p:commandButton value="Add"
rendered="#{issuerComponent.renderBtnAddAddress}" disabled="false"
icon="ui-icon-document" process="#this,createPanelDetailsAddress"
update=":main_form" action="#{issuerComponent.addNewAddress}"
actionListener="#{addressComponent.addNewComposite}">
<f:setPropertyActionListener
value="#{addressComponent.updateAddress}"
target="#{issuerComponent.address}" />
</p:commandButton>
</p:panel>
</p:outputPanel>
I am trying to use Ajax with a command link to update a dialog. Te form doesn't have any id, I am not able to run this page also, it says component with "dialog" not found/doesn't exist
<h:form>
<p:tabView id="tabView">
<p:tab id="tab1" title="Tab 1">
<h:panelGrid columns="1" cellpadding="10">
<h:dataTable value="#{testBean.dataList}" var="data">
<h:column>
<h:outputText value="#{data}" />
</h:column>
<h:column>
<p:commandLink action="#{testBean.loadCommentHistory(data)}"
update="dialog" oncomplete="dlg.show()">
<h:graphicImage url="resources/theme1/images/comments.gif"
styleClass="basicImageStyle" />
</p:commandLink>
</h:column>
</h:dataTable>
<p:dialog id="dialog" header="Dynamic Dialog" widgetVar="dlg">
<h:outputText value="#{testBean.commentHistory}" />
</p:dialog>
</h:panelGrid>
</p:tab>
</p:tabView>
</h:form>
The p:dataTable itself is a container. The p:commandLink is searching within the p:dataTable for an element with an id "dialog".
Solution: add an id to the form and refer to the dialog as ":formid:dialog".
Edit:
The p:tabView or the p:tab is also a container so check the id of the dialog in your browser and use that one. ;-) It should be noted to avoid id's as jdt_id4.