Empty variable when open <p:dialog> - JFS 2.0, Primefaces - jsf

how're you?
Maybe a newbie question now. Now I have one input and a "submit" button inside a form. When I click in submit, this doesn't call any method, this just opens a <p:dialog>. When this dialog is opened, the variable in input wasn't setted, so another input I have in doesn't show anything.
See the images to understand:
After click in "submit" (Adicionar):
This second image must show exactly the same value of the first input, but as you can see this just shows a empty input.
Now let's go to my code.
Here's my JSF:
<h:form id="inserirDisciplina">
<h:inputText styleClass="form-control" id="disciplina" value="#{cursoMBean.nome}"
valueChangeListener="#{cursoMBean.atualizarListagemPesquisa}">
// atualizarListagemPesquisa just update the arraylist to be shown in dataTable
<f:ajax event="keyup" render=":meuForm:minhaTabela" />
</h:inputText>
<h:commandButton value="Adicionar" styleClass="btn btn-md btn-success">
<p:ajax event="click" update=":meuForm:display" render=":meuForm:dialog" oncomplete="PF('insert').show();" onerror="alert('erro');" />
</h:commandButton>
<p:dialog id="dialog" header="Inserir Curso" widgetVar="insert" resizable="false" modal="true" width="600" height="500" hideEffect="clip" closeOnEscape="true" focus="enviar">
<h:panelGrid id="display" styleClass="col-lg-10 center">
<label for="nome">Nome:</label>
<p:inputText styleClass="form-control adicionar" id="nome" value="#{cursoMBean.nome}" />
</h:panelGrid>
...
MBean:
private String nome;
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
Edit (new View):
<h:form id="inserirDisciplina">
<div class="form-group">
<div class="col-md-10">
<h:inputText styleClass="form-control" id="disciplina" value="#{cursoMBean.nome}" valueChangeListener="#{cursoMBean.atualizarListagemPesquisa}">
<f:ajax event="keyup" render=":meuForm:minhaTabela" />
</h:inputText>
</div>
<div class="col-md-2">
<h:commandButton value="Adicionar" styleClass="btn btn-md btn-success" process="disciplina" partialSubmit="true">
<p:ajax event="click" update=":meuForm:display" render=":meuForm:dialog" partialSubmit="true" process="disciplina" oncomplete="PF('insert').show();" onerror="alert('erro');" />
</h:commandButton>
</div>
</div>
</h:form>
<p:messages autoUpdate="true" />
<p:dialog id="dialog" header="Inserir Curso" widgetVar="insert"
resizable="false" modal="true" width="600" height="500"
hideEffect="clip" closeOnEscape="true">
<h:form>
<h:panelGrid id="display" styleClass="col-lg-10 center" style="margin-top: 10px; margin-bottom: 15px;">
<label for="nome">Nome:</label>
<p:inputText styleClass="form-control adicionar" id="nome" value="#{cursoMBean.nome}">
</p:inputText>
</h:panelGrid>
<h:panelGrid styleClass="col-lg-10 center">
<p:columnGroup>
<label for="disciplinas">Disciplinas do Curso:</label>
<h:selectManyCheckbox style="margin-bottom: 40px;" id="disciplinas" value="#{cursoMBean.listaDisciplinasDoCurso}" converter="omnifaces.SelectItemsConverter">
<f:selectItems value="#{cursoMBean.listaTodasDisciplinas}" var="disciplina" itemValue="#{disciplina}" itemLabel="#{disciplina.nome}" />
</h:selectManyCheckbox>
</p:columnGroup>
</h:panelGrid>
<h:panelGrid styleClass="col-lg-10 center">
<p:columnGroup>
<h:commandButton id="enviar" styleClass="btn btn-lg btn-success pull-right" value="Adicionar" action="#{cursoMBean.cadastrar}">
<f:ajax event="click" execute="#form" onevent="insert.hide()" render=":meuForm:minhaTabela" listener="#{cursoMBean.cadastrar}" />
</h:commandButton>
</p:columnGroup>
</h:panelGrid>
</h:form>
</p:dialog>
What I'm doing wrong?

Try the following code for the button:
<p:commandButton value="Adicionar" styleClass="btn btn-md btn-success"
process="disciplina" partialSubmit="true" update=":inserirDisciplina:display"
oncomplete="insert.show();" onerror="alert('erro');">
</p:commandButton>

Related

primefaces selectOneMenu not working in Dialog

I have this dialog:
The code for this dialog:
<p:dialog header="Détails du produit" showEffect="fade" modal="true"
widgetVar="manageProductDialog" responsive="true">
<p:outputPanel id="manage-product-content" class="ui-fluid">
<p:outputPanel rendered="#{not empty productMB.selectedProduct}">
<p:graphicImage
name="images/product/#{productMB.selectedProduct.img}"
library="demo" styleClass="product-image"
rendered="#{not empty productMB.selectedProduct.img}" />
<div class="p-field">
<p:outputLabel for="name">Nom</p:outputLabel>
<p:inputText id="name" value="#{productMB.selectedProduct.name}"
required="true" />
</div>
<div class="p-field">
<p:outputLabel for="category">Catégorie</p:outputLabel>
<p:selectOneMenu id="category"
value="#{productMB.selectedProduct.category}"
layout="responsive">
<f:selectItem itemLabel="Select One" itemValue="#{null}" noSelectionOption="true" />
<f:selectItems value="#{categoryMB.categories}" var="cat" itemValue="#{cat}" itemLabel="#{cat.name}" />
</p:selectOneMenu>
</div>
<div class="p-formgrid p-grid">
<div class="p-field p-col">
<p:outputLabel for="price">Prix</p:outputLabel>
<p:inputNumber id="price"
value="#{productMB.selectedProduct.price}" symbol=" DH"
symbolPosition="s" decimalSeparator="." thousandSeparator="," />
</div>
</div>
</p:outputPanel>
</p:outputPanel>
<f:facet name="footer">
<p:commandButton value="Enregister" icon="pi pi-check"
actionListener="#{productMB.saveProduct}"
update="manage-product-content"
process="manage-product-content #this" />
<p:commandButton value="Annuler" icon="pi pi-times"
onclick="PF('manageProductDialog').hide()"
class="ui-button-secondary" />
</f:facet>
</p:dialog>
The problem I have is that when I click on Enregister button the p:selectOneMenu is not validated even that a value was selected.
How can I solve this issue ?

passing the selected object from list of objects that each one has its own button

I’m working on a web-app that displays list of objects, each object has its own modal when clicked inside the modal there are two dropdown menus and a button that is supposed to call a method add in a bean, to perform an action and add the selected object while taking three values, selected object, selected two items from the two drop downs and spinner’s value.
<ui:repeat value="#{ViewTeacher.teacherList}" var="teacher"
varStatus="status">
<h:panelGroup layout="block" styleClass="name">
<p>#{teacher.name}</p>
</h:panelGroup>
<br />
<br />
<a onclick="viewModal(#{status.index})" class="btn btn-success">view</a>
<h:panelGroup id="modal" layout="block" class="modal"
style="max-width: 44em;" tabindex="1">
<h:panelGroup class="modal-content" layout="block">
<span class="close" onclick="modClose()">×</span>
<h:outputText styleClass="description" value="#{teacher.name}" />
<br />
<br />
<br />
students
<h:selectOneMenu value="ok" class="form-control">
<f:selectItems value="#{teacher.students}" var="s"
itemValue="#{s.id}" itemLabel="#{s.name}" />
</h:selectOneMenu>
classes
<h:selectOneMenu value="ok" class="form-control">
<f:selectItems value="#{teacher.classes}" var="c"
itemValue="#{c.id}" itemLabel="#{c.name}" />
</h:selectOneMenu>
<br />
<h:panelGroup layout="block" styleClass="form-group">
<p:spinner min="1" max="10" />
</h:panelGroup>
<h:commandButton id="submitButton" styleClass="btn btn-success" value="ADD">
<!—-this is the button that is supposed to take the values
</h:commandButton>
<a onclick="modClose()" class="btn btn-success">CANCEL</a>
</h:panelGroup>
</h:panelGroup>
</ui:repeat>
I tried :
<f:param name="name1" value="China" />
But the fact that param’s name will get repeated, will make it the same all the time and might be set to the latest object retrieved,
Any recommendation?
UPDATE:
<p:commandLink styleClass="btn btn-success" process="#this"
onclick="viewModal(#{status.index});">
<h:outputText value="ADD" />
<f:setPropertyActionListener
value="#{teacher.id}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
Made this change to pass the teacher's id but it's still null in the bean
First of all, having a separate modal for each object isn't a good idea. You can achieve (what you are trying) by:
1). Adding a property (with its getter and setter) in bean for selected object.
2). Place single modal (<p:dialog with id="modal" and widgetVar="modal" attributes) outside ui:repeat to display data from selected object.
3). Set selected object on clicking view link, update and display modal, using:
<p:commandLink styleClass="btn btn-success" process="#this" update="modal"
onclick="PF('modal').show();">
<h:outputText value="View" />
<f:setPropertyActionListener
value="#{teacher}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
Here, f:setPropertyActionListener will be setting your selected modal in bean and thus it will become available in your action listener.
Update: Change the code as following:
<ui:repeat value="#{ViewTeacher.teacherList}" var="teacher" varStatus="status">
<h:panelGroup layout="block" styleClass="name">
<p>#{teacher.name}</p>
</h:panelGroup>
<p:commandLink styleClass="btn btn-success" process="#this" update="modal"
oncomplete="PF('modal').show();">
<h:outputText value="view" />
<f:setPropertyActionListener
value="#{teacher}" target="#{ViewTeacher.selectedTeacher}" />
</p:commandLink>
</ui:repeat>
<p:dialog id="modal" widgetVar="modal" header="Edit Teacher" modal="true"
showEffect="fade" hideEffect="fade" resizable="false" closeOnEscape="true"
styleClass="teachers-dialog">
<h:outputText styleClass="description" value="#{ViewTeacher.selectedTeacher.name}" />
<br />
<br />
<br />
students
<h:selectOneMenu value="#{ViewTeacher.selectedStudentId}" class="form-control">
<f:selectItems value="#{ViewTeacher.selectedTeacher.students}"
var="s" itemValue="#{s.id}" itemLabel="#{s.name}" />
</h:selectOneMenu>
classes
<h:selectOneMenu value="#{ViewTeacher.selectedClassId}" class="form-control">
<f:selectItems value="#{ViewTeacher.selectedTeacher.classes}"
var="c" itemValue="#{c.id}" itemLabel="#{c.name}" />
</h:selectOneMenu>
<br />
<h:panelGroup layout="block" styleClass="form-group">
<p:spinner value="#{ViewTeacher.spinnerValue}" min="1" max="10" />
</h:panelGroup>
<h:commandButton id="submitButton" styleClass="btn btn-success" value="ADD">
</h:commandButton>
</p:dialog>
Where selectedTeacher, selectedStudentId, selectedClassId, spinnerValue are properties from your ViewTeacher bean.

Primefaces drop event is not invoked

I am using drag and drop with datagrid.
I expose for your my code.
I am using primefaces 4.0 and have followed the exemple detailed in documentation.
The problem is that the drop function dropQuery is not invoked.
<div id="columnwrap"> <p:droppable for="report" tolerance="touch" activeStyleClass="ui-state-highlight" datasource="availablequeries" onDrop="handleDrop" >
<p:ajax listener="#{dragQueryMB.dropQuery}" update="dropArea availablequeries"/>
</p:droppable>
<div id="column1">
<p:fieldset id="report" legend="Report" >
<p:outputPanel id="dropArea">
<h:outputText value="drop here" rendered="#{not empty dragQueryMB.addedQueries}" style="font-size:16px;" />
</p:outputPanel>
</p:fieldset>
</div>
</div>
<div id="column2">
<p:fieldset id="queryfield" legend="Available Queries" >
<p:commandLink value="add new Query" action="createQuery?faces-redirect=true" style="position: right" ></p:commandLink>
<p:dataGrid id="availablequeries" value="#{dragQueryMB.queryList}" var="query" columns="1">
<p:column>
<p:panel id="pnl" header="#{query.queryTitle}" style="text-align:center">
<h:panelGrid columns="1" style="width:100%">
<h:outputText value="#{query.description}" />
</h:panelGrid>
</p:panel>
</p:column>
<p:draggable for="pnl" revert="true" handle=".ui-panel-titlebar" stack=".ui-panel"/>
</p:dataGrid>
</p:fieldset>
</div>
Method dropQuery:
public void dropQuery(DragDropEvent ddEvent) {
Query query = ((Query) ddEvent.getData());
addedQueries.add(query);
queryList.remove(query);
}

Why i get previous data in dialog using primefaces?

i don't know why i get previous data when i use dialog that i call it from datatable, when i open the dialog and leave required field empty and press edit when i close the dialog and open another row i notice that the old data is appear in the fields
here's my code
<h:form id="content" prependId="false">
<c:set target="#{facilityMB}" property="facilityType" value="Recreation"/>
<h:panelGrid class="ipmagix-mainFrom" cellpadding="0" cellspacing="0" columns="1">
<h:panelGroup layout="block" class="ipmagix-breadcrumb">
<ul class="breadcrumb">
<li>Home <span class="divider">/</span></li>
<li>Services <span class="divider">/</span></li>
<li class="active">Recreation Promotion</li>
</ul>
</h:panelGroup>
<h:panelGroup layout="block" class="panel panel-primary">
<h:panelGroup layout="block" class="panel-heading">
<i class="icon-white icon-list"></i>
<i></i>
<h:outputText value="#{bundle.facilityRecreationList}"/>
</h:panelGroup>
<h:panelGroup layout="block" class="panel-body">
<p:messages id="messagesForList" showDetail="false" autoUpdate="false" closable="true"/>
<h:panelGroup layout="block" class="ipmagix-list-width" id="facilityListForm">
<ui:include src="facility-view.xhtml"/>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup layout="block" class="panel panel-primary">
<h:panelGroup layout="block" class="panel-heading">
<i class="icon-white icon-plus"></i>
<i></i>
<h:outputText value="#{bundle.facilityRecreationAdd}" />
</h:panelGroup>
<h:panelGroup layout="block" class="panel-body">
<p:messages id="messages" showDetail="false" autoUpdate="false" closable="true"/>
<h:panelGroup layout="block" class="ipmagix-form-width form-horizontal" id="facilityAddForm">
<div class="control-group">
<h:outputLabel for="facilityName" class="control-label" value="#{bundle.name}"></h:outputLabel>
<div class="controls">
<p:inputText value="#{facilityMB.facilityName}" id="facilityName" maxlength="40" required="true" requiredMessage="#{validation.emptyName}" />
<p:watermark value="#{bundle.name}" for="facilityName"/>
</div>
</div>
<div class="control-group">
<h:outputLabel for="language" class="control-label" value="#{bundle.language}"></h:outputLabel>
<div class="controls">
<p:selectOneMenu id="language" value="#{facilityMB.languageId}">
<f:selectItems value="#{facilityMB.languageList}" var="lang" itemValue="#{lang.languageID}" itemLabel="#{lang.languageName}" />
</p:selectOneMenu>
</div>
</div>
<div class="control-group">
<h:outputLabel for="facilityDesc" class="control-label" value="#{bundle.description}"></h:outputLabel>
<div class="controls">
<p:inputTextarea value="#{facilityMB.facilityDesc}" id="facilityDesc" maxlength="100" style="width: 80%" autoResize="false" rows="3" required="true" requiredMessage="#{validation.emptyDescription}" />
<p:watermark value="#{bundle.description}" for="facilityDesc"/>
</div>
</div>
<h:panelGroup layout="block" id="uploader" class="control-group">
<h:outputLabel class="control-label" value="#{bundle.imageURL}"></h:outputLabel>
<div class="controls">
<p:fileUpload fileUploadListener="#{facilityMB.handleFileUpload}" mode="advanced"
update="uploader, messages" auto="true" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"/>
</div>
</h:panelGroup>
<div class="control-group well well-small">
<p:commandButton id="saveFacility" value="#{bundle.save}" styleClass="btn btn-mini btn-primary" icon="ui-icon-plus" action="#{facilityMB.saveFacility()}"
oncomplete="filter();" update ="facilityAddForm, facilityListForm, messages">
</p:commandButton>
</div>
</h:panelGroup>
</h:panelGroup>
</h:panelGroup>
</h:panelGrid>
<h:panelGroup layout="block" id="uiBlock">
<p:blockUI block="facilityListForm" trigger="saveFacility" >
LOADING<br />
<p:graphicImage value="#{resource['images:ajax-loader.gif']}"/>
</p:blockUI>
<p:blockUI block="facilityAddForm" trigger="saveFacility" >
LOADING<br />
<p:graphicImage value="#{resource['images:ajax-loader.gif']}"/>
</p:blockUI>
</h:panelGroup>
</h:form>
<h:form id="dialogForm" prependId="false">
<p:dialog id="dialog" modal="true" width="80%" resizable="false" header="Edit Special Promotion" widgetVar="dlg" dynamic="true">
<p:ajax event="close" update=":content:facilityListForm" />
<h:panelGroup layout="block" id="dialogContent">
<ui:include src="facility-edit.xhtml"/>
</h:panelGroup>
</p:dialog>
</h:form>
</ui:define>
and this is view page is be included
<p:dataTable widgetVar="tableVar" id="facilityDataTable" scrollWidth="100%" value="#{facilityMB.facilityList}" var="facility" paginator="true" editable="true" emptyMessage="#{bundle.emptyData}" rows="5" filteredValue="#{facilityMB.facilityFilterList}" >
<p:column headerText="Image" width="100">
<p:lightBox height="100">
<h:outputLink value="#">
<img src="#{facility.imageURL}" width="100" height="100"/>
</h:outputLink>
<f:facet name="inline">
<img src="#{facility.imageURL}" width="500" height="500"/>
</f:facet>
</p:lightBox>
</p:column>
<p:column headerText="#{bundle.name}" sortBy="#{facility.facilityName}" filterBy="#{facility.facilityName}" rendered="#{facilityMB.facilityType != 'Special Promotion'}">
<p:cellEditor >
<f:facet name="output">
<h:outputText id="ink" value="#{facility.facilityName}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{facility.facilityName}" maxlength="40" required="true" requiredMessage="The name is not valid"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="5%" headerText="#{bundle.language}" sortBy="#{facility.languageID.languageName}" filterBy="#{facility.languageID.languageName}">
<h:outputText value="#{facility.languageID.languageName}"/>
</p:column>
<p:column headerText="#{bundle.description}" sortBy="#{facility.facilityDescription}" filterBy="#{facility.facilityDescription}" rendered="#{facilityMB.facilityType != 'Special Promotion'}">
<p:cellEditor >
<f:facet name="output">
<h:outputText value="#{facility.facilityDescription}" />
</f:facet>
<f:facet name="input">
<h:inputText value="#{facility.facilityDescription}" maxlength="100" required="true" requiredMessage="The description is not valid"/>
</f:facet>
</p:cellEditor>
</p:column>
<p:column width="2%">
<p:commandLink styleClass="ui-icon ui-icon-trash" immediate="true"
oncomplete="filter()" action="#{facilityMB.deleteFacility(facility)}" update=":content:facilityDataTable, :content:messagesForList">
</p:commandLink>
</p:column>
<p:column width="4%">
<p:commandButton id="basic" value="Edit" immediate="true" action="#{facilityMB.prepareEdit(facility)}" oncomplete="dlg.show();filter();" update=":dialogForm:dialogContent" >
<f:setPropertyActionListener target="#{facilityMB.selectedFacility}" value="#{facility}"/>
</p:commandButton>
</p:column>
</p:dataTable>
Do not keep p:dialog inside h:form, instead keep h:form inside p:dialog.
Then you can update the h:form or any h:panelGroup inside p:dialog.
If you want to do it from Javascript use loadContents() function on p:dialog's widgetWar object.
For Example:
<h:form id="form1">
<p:commandButton update=":form2" oncomplete="myDialogWidget.loadContents()"/>
</h:form>
<p:dialog widgetWar="myDialogWidget" appendToBody="true">
<h:form id="form2">
....
</h:form>
</p:dialog>
Use update=":dialogForm" on edit command button. So whenever you open dialogbox, previous data will get refreshed.

commandButton to commandLink in a login form

This is my xhtml login page ...
<div id="externalborderReg">
<p:spacer height="70px" />
<div id="loginForm" >
<h:form id="login" onsubmit="document.getElementById('login').action='j_security_check';" prependId="false">
<h:panelGrid columns="2">
<p:outputLabel for="j_username" value="Email:" />
<p:inputText id="j_username" name="j_username" placeholder="Email" required="true"/>
<p:outputLabel for="j_password" value="Password:" />
<p:password id="j_password" name="j_password" placeholder="Password" required="true" />
</h:panelGrid>
<p:spacer height="40px"/>
<div id="loginButton">
<p:commandButton id="submit" value="Login" ajax="false" />
</div>
</h:form>
</div>
</div>
Now i want to make the p:commandButton a h:commandLink but if i try change it the login button/link stops working ... how can i cahnge it???
Please help me ...

Resources