editing a data in a datatable using a modal form - jsf

i have a datatable, each row has a
<p:commandButton styleClass="edit-promo-img" action="#{branchController.prepareEdit}" value="" oncomplete="updateBranchForm()"/>
this is my modal:
<div id="edit-branch-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<h:form id="editBranchForm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
Branch Details
</div>
<div class="modal-body">
<div><h:outputLabel value="#{bundle.CreateBranchLabel_name}" for="name" /></div>
<div><h:inputText id="name" value="#{branchController.selected.name}" title="#{bundle.CreateBranchTitle_name}" required="true" requiredMessage="#{bundle.CreateBranchRequiredMessage_name}"/></div>
</div>
<div class="modal-footer">
<p:commandButton action="#{branchController.update}" value="#{bundle.CreateBranchSaveLink}" />
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
<p:remoteCommand name="updateBranchForm" update="#form" />
</h:form>
prepareEdit method:
public void prepareEdit() {
current = (Branch) getItems().getRowData();
selectedItemIndex = pagination.getPageFirstItem() + getItems().getRowIndex();
}
selected method:
public Branch getSelected() {
if (current == null) {
current = new Branch();
selectedItemIndex = -1;
}
return current;
}
when i debugged on the getSelected method, there is actually correct data on my "current" object.
my problem is, the input in the modal has no data.
using JSF 2.0 with Primefaces and my bean is using ViewScope.

Related

updating bean when change selectonemenu value without refreshing the page

I have selectonemenu and i want when i change the value of selectonemenu i want that the bean value updated for to display some code that i have in a block condition without submitting and refreshing the page without this i will lose the other value fill in the form
I have none display
I have selectonemenu block
<h:selectOneMenu id="categorieSelect" value = "#{categorie.option}"
valueChangeListener="#{categorie.categorieChanged}">
<f:selectItem itemValue="selection" itemLabel="Choisissez une catégorie" noSelectionOption="true"/>
<f:selectItems value ="#{categorie.options}" var="categorieSelect" />
<f:ajax event="change" execute="#form"/></h:selectOneMenu>
I have also some block in c:choose which i want to display when the value of selectonemenu change
<c:choose>
<c:when test="#{categorie.option == 'offreemploi'}">
<div class="row">
<p:outputLabel value="Type d'annonce *" class="outputelement" id="test3"></p:outputLabel>
</div>
<div class="row">
<h:selectOneRadio id="typeannonce" required="#{not empty param[menucategorie.clientId]}"
requiredMessage="Le type d'annonce est obligatoire"
class="inputelement"
value="#{offreEmploi.typeannonce}" binding="#{typeannonce}">
<f:selectItem itemValue="demande" itemLabel="Demande (Vous recherchez un emploi)"
/>
<f:selectItem itemValue="offre" itemLabel="Offre (Vous recherchez un employé)" />
</h:selectOneRadio>
</div>
<div class="row">
<h:message for="typeannonce" class="message col-xs-12 col-sm-6 col-md-6 col-lg-6"/>
</div>
<div class="row">
<h:outputText value="Intitulé du poste *" class="outputelement"></h:outputText>
</div>
<div class="row">
<h:inputText id="intituleposte" binding="#{intituleposte}" required="#{not empty param[menucategorie.clientId]}"
requiredMessage="L'intitule du poste est obligatoire"
class="col-xs-12 col-sm-6 col-md-6 col-lg-6 inputelement"
value="#{offreEmploi.intituleposte}"></h:inputText>
</div>
<div class="row">
<h:message for="intituleposte" class="message col-xs-12 col-sm-6 col-md-6 col-lg-6"/>
</div>
<div class="row">
<h:outputText value="Description du poste *" class="outputelement"></h:outputText>
</div>
<div class="row">
<h:inputTextarea id="descriptionposte" rows="10" cols="30" binding="#{descriptionposte}" required="#{not empty param[menucategorie.clientId]}"
requiredMessage="La description du poste est obligatoire"
class="col-xs-12 col-sm-6 col-md-6 col-lg-6 inputelement"
value="#{offreEmploi.descriptionposte}"></h:inputTextarea>
</div>
<div class="row">
<h:message for="descriptionposte" class="message col-xs-12 col-sm-6 col-md-6 col-lg-6"/>
</div>
<div class="row">
<h:outputText class="outputelement" value="Photos : Une annonce avec photos est beaucoup plus consulté qu'une annonce sans photos"></h:outputText>
</div>
<div class="row">
<h:outputText class="outputelement" value="Photo principal"></h:outputText>
<p:fileUpload mode="simple" class="inputelement"
value="#{photo.photo1}" binding="#{photo1}"/>
</div>
<div class="row">
<h:outputText class="outputelement" value="Photo 2"></h:outputText>
<p:fileUpload mode="simple" class="inputelement"
value="#{photo.photo2}" binding="#{photo2}"/>
</div>
<div class="row">
<h:outputText class="outputelement" value="Photo 3"></h:outputText>
<p:fileUpload mode="simple" class="inputelement"
value="#{photo.photo3}" binding="#{photo3}"/>
</div>
</c:when>
<c:otherwise>Bonjour</c:otherwise>
</c:choose>
and here is my backing bean
#ManagedBean
#SessionScoped
public class Categorie implements Serializable{
String option; // +getter +setter
List<SelectItem> options; // +getter
public String getOption() {
return option;
}
public void setOption(String selectedOption) {
this.option = selectedOption;
}
public List<SelectItem> getOptions() {
return options;
}
public void setOptions(List<SelectItem> options) {
this.options = options;
}
public void categorieChanged(ValueChangeEvent e) {
//assign new value to country
option = e.getNewValue().toString();
}
public void changeCountry() {
//System.out.println("Selected country is: " + option.);
}
public Categorie() {
options = new ArrayList<SelectItem>();
SelectItemGroup group1 = new SelectItemGroup("EMPLOI");
group1.setSelectItems(new SelectItem[] {
new SelectItem("offreemploi", "Offre d'emploi")
});
options.add(group1);
}
public void save(){
}
}

JSF couldn't pass data to bootsrtap modal

hello everyone i have a bootsfaces dataTabble, each row has an edit end delete action, i want to show a modal that contains selected row data to edit that object.
i successfully get the selected row i pass data to the managedBean, i assign data to managedProperties, but nothing is shown in Modal input elements.
this is my dataTable code:
<b:dataTable id="articleslist" value="#{listeArticlesAction.listeArticles}" var="article" page-length="10" paginated="true"
page-length-menu="10,20,30">
<b:dataTableColumn value="#{article.code}" label="Code" />
<b:dataTableColumn value="#{article.nom}" label="Nom" />
<b:dataTableColumn value="#{article.description}" label="Description" />
<b:dataTableColumn value="#{article.prix}" label="Prix (DH)" />
<b:dataTableColumn label="Modifier" style="text-align: center">
<h:commandButton style="padding: 0 4px;" iconAwesome="pencil" look="link" pt:data-target="#userEditModal" pt:data-toggle="modal"
action="#{listeArticlesAction.modifierArticle}">
<f:setPropertyActionListener target="#{listeArticlesAction.editArticle}" value="#{article}"
/>
<f:ajax render="#form"/>
</h:commandButton >
</b:dataTableColumn>
<b:dataTableColumn label="Supprimer" style="text-align: center">
<h:commandButton style="padding: 0 4px; text-align: center;" iconAwesome="trash" look="link" pt:data-target="#userEditModal" pt:data-toggle="modal"
onclick="confirmDelete()" action="#{listeArticlesAction.supprimerArticle}" >
<f:param name="actionDelete" value="article" />
</h:commandButton >
</b:dataTableColumn>
</b:dataTable>
and this is my managedBean class:
public class ListeArticlesAction {
private List<Article> listeArticles = new ArrayList<Article>();
private String editArticleNom;
private String editArticleDescription;
private int editArticlePrix;
private Article editArticle;
/**
* Methode pour preparer la liste des articles
*/
#PostConstruct
public void init() {
listeArticles = ServiceFactory.getArticleService().allArticles();
}
public List<Article> getListeArticles() {
return listeArticles;
}
public void setListeArticles(List<Article> listeArticles) {
this.listeArticles = listeArticles;
}
public String getEditArticleNom() {
return editArticleNom;
}
public void setEditArticleNom(String editArticleNom) {
this.editArticleNom = editArticleNom;
}
public String getEditArticleDescription() {
return editArticleDescription;
}
public void setEditArticleDescription(String editArticleDescription) {
this.editArticleDescription = editArticleDescription;
}
public int getEditArticlePrix() {
return editArticlePrix;
}
public void setEditArticlePrix(int editArticlePrix) {
this.editArticlePrix = editArticlePrix;
}
public Article getEditArticle() {
return editArticle;
}
public void setEditArticle(Article editArticle) {
this.editArticle = editArticle;
}
public void supprimerArticle() {
}
/**
* methode pour modifier un article quelconque
*/
public void modifierArticle() {
editArticleDescription = editArticle.getDescription();
editArticleNom = editArticle.getNom();
editArticlePrix = editArticle.getPrix();
}
}
and this is my modal html code:
<div class="modal" id="userEditModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Modifier le produit
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
×
</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="edit_product_name" class="form-control-label">
Nom:
</label>
<h:inputText type="text" class="form-control" id="edit_product_name"
value="#{listeArticlesAction.editArticleNom}" autocomplete="off" />
</div>
<div class="form-group">
<label for="edit_product_description" class="form-control-label">
Description:
</label>
<h:inputTextarea class="form-control" id="edit_product_description"
value="#{listeArticlesAction.editArticleDescription}" autocomplete="off" />
</div>
<div class="form-group">
<label for="edit_product_price" class="form-control-label">
Prix(DH):
</label>
<h:inputText type="text" class="form-control m-input" id="edit_product_price"
value="#{listeArticlesAction.editArticlePrix}" autocomplete="off" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Annuler
</button>
<button type="button" class="btn btn-primary">
Modifier
</button>
</div>
</div>
</div>
</div>
Most likely you're updating the wrong part of the screen. That happens to many people using modals for the first time. Thing is, the modal is rendered when the page is loaded. That's potentially a minute before the button is clicked. So the modal doesn't know which data to display. You tell it using the update attribute of the command button.
As far as I can see, the datatable and the Java bean are OK. With the exception of the update region. Your code snippets don't show where the <h:form> or <b:form> tag is, so it's almost certainly outside the datatable. However, what you should update is the content of the modal. Don't update the entire modal (because that renders it hidden again). Just the content. Something like update="#(.modal-dialog)".
The modal itself looks a bit odd to me. What is listeArticlesAction? Judging from the other code snippets, you want to use listeArticlesAction.editArticle instead.
Side remark: I suggest you choose a language for the variable names (and stuff like this) and use it consistently. French is a good choice, although most developers (except me) recommend English. But it's hard enough to remember the variable name. You don't have to add the burden of remembering the language :).

PrimeFaces.cw does not show dialog content

When i use PrimeFaces.cw..
PrimeFaces.cw("Dialog","checkoutDlg",{
id:"j_idt115",
draggable:false,
resizable:false,
modal:true,
width:"auto",
maxWidth: „1083“,
showEffect:"blind",
hideEffect:"blind",
closeOnEscape:true,
fitViewport:true,
onShow:function(){
styleDialogCheckoutBtn()
}
});
..to show a dialog, I just see the lightbox, but the content does not appear.
<p:commandButton id="btnCheckOut" styleClass="btn btn-block btn-success" value="Add to card" process="#this"
oncomplete="PrimeFaces.cw('Dialog','checkoutDlg',{ id:'checkoutDlg', draggable:false, resizable:false, modal:true, width:'auto', maxWidth: '1083', showEffect:'blind', hideEffect:'blind', closeOnEscape:true, fitViewport:true, onShow:function(){styleDialogCheckoutBtn()} }); PF('checkoutDlg').initPosition(); PF('checkoutDlg').show(); return false;"/>
Dialog content:
<p:dialog widgetVar="checkoutDlg" id="checkoutDlg">
<div class="cart-items">
<div class="row-fluid cart-head-row clearfix">
<div class="col-xs-4">
<p class="text-bold">#{msg['dashboard.cart.checkout.service']}</p>
</div>
<div class="col-xs-4">
<p class="text-bold">#{msg['dashboard.cart.checkout.details']}</p>
</div>
<div class="col-xs-3 text-right">
<p class="text-bold">#{msg['dashboard.cart.checkout.price']}</p>
</div>
<div class="col-xs-1"></div>
</div>
</div>
</p:dialog>
Can anyone tell me how to show the content of the dialog in the lightbox?

the data on my database are not updatd when i change the value of p:selectBooleanCheckbox , but it works with the inputText [duplicate]

This question already has an answer here:
when i click on the p:selectBooleanCheckbox, it works but for the second click it doesn't work,why?
(1 answer)
Closed 5 years ago.
when i want to update the value of the <p:selectBooleanCheckbox> and click on update button, its value doesn't change on the database, but when i replace it with .
this is my code :
<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"
xmlns:evoice="http://ccs.tn/taglib/evoice">
<ui:include src="CloseTicketDialog.xhtml" />
<div class="form-body pal">
<div class="row">
<p:outputLabel for="call_from_tel_number"
styleClass="col-md-2 control-label" value="Numéro Entrant" />
<div class="col-md-3">
<div class="input-icon right">
<i class="fa fa-phone" />
<p:inputText id="call_from_tel_number" maxlength="32" size="9"
value="#{ticketController.ticket.callFromTelNumber}"
validatorMessage="Numéro Entrant : Composé au minimum par 8 chiffres dans [0..9]."
styleClass="form-control">
<f:validateRegex pattern="[0-9\s]*" />
<f:validateLength minimum="8" maximum="32" />
<p:ajax event="blur" id="ajax_call" disabled="#{ticketController.ticket.ticketId ne null}"
process="call_from_tel_number,form:growl"
update="form:growl,form:tab_view:lastName, form:tab_view:firstName"
listener="#{ticketController.queryOldTickets(ticketController.ticket)}"
onstart="PF('statusDialog').show()"
oncomplete="PF('statusDialog').hide()"/>
</p:inputText>
</div>
</div>
<p:outputLabel for="reply_to_tel_number" value="Deuxièmme Numéro"
styleClass="col-md-3 control-label" />
<div class="col-md-3">
<div class="input-icon right">
<i class="fa fa-phone" />
<p:inputText id="reply_to_tel_number" maxlength="32" size="9"
readonly="{ticketController.ticket.ticketId ne null}"
value="#{ticketController.ticket.otherPhonenum}"
validatorMessage="Deuxièmme Numéro : Accepte seulement des chiffres dans [0..9]."
styleClass="form-control">
<f:validateRegex pattern="[0-9]*" />
</p:inputText>
</div>
</div>
</div>
<div class="form-group" />
<div class="row">
<p:outputLabel for="telOwner" value="proprietaire de num"
styleClass="col-md-2 control-label" />
<div class="col-md-3">
<div class="input-icon right">
<p:selectBooleanCheckbox selected="true" id="telOwner" value="#{ticketController.ticket.phoneLineOwner}" />
</div>
</div>
</div>
what is the problem? what the value of "telOwner" is updated when i use p:inputText and its not updated when i use p:selectBooleanCheckbox?
this is the controller:
#Controller(value = "ticketController")
#Scope("view")
public class TicketController extends eVoiceController implements Serializable {
public String saveTicket() {
log.info("saveTicket");
if (!isValide(ticket)) {
return null ;
}
if (ticket.getOwner() == null) {
ticket.setOwner(currentUser());
} else {
ticket.setLastUpdateBy(currentUser());
ticket.setLastUpdateDate(new Timestamp(System.currentTimeMillis()));
}
Integer ticketId = ticketService.saveTicket(ticket);
// ticket.getTicketCategories().size();
if (closeTicketCmdBtn != null) {
closeTicketCmdBtn.setDisabled(false);
}
showInfoMessage(i18n("ticket.saved.number", ticketId));
log.info("TICKET[" + ticketId + "]");
return null;
}
this is the service:
#Override
#Transactional(readOnly = false)
public Integer saveTicket(final Ticket ticket) {
LoyaltyCard card = ticket.getLoyaltyCard();
if (card != null) {
card.setCreatedBy(ticket.getCreatedBy());
card = loyaltyCardService.save(card);
}
ticket.setLoyaltyCard(card);
Integer id = ticketDao.save(ticket).getTicketId();
/**
* #TODO run on seperate Thread
*/
ruleService.assignSeverity(ticket);
return id;
}
and this is the entity code:
#Column(name = "phone_line_owner")
#org.hibernate.annotations.Type(type = "yes_no")
private Boolean phoneLineOwner;

Issue with resetting datagrid in primefaces

I am new to JSF and I am working on an application where a group of parameters placed in a datagrid can be either added or removed. Below is the initial level of screenshot:
When I click on RemoveInvoice of any of the existing list, the list present after that box should automatically take the position of the removed list. But in my case, a blank section is getting displayed as per the below screenshot:
My jsf code looks like:
<div class="listing_Table">
<p:dataGrid columns="3" layout="grid" id="addInvoicePanel"
value="#{hrOrganizationPaymentDetailBean.invoiceDetailTOList}"
var="invoiceDetail">
<p:panelGrid rendered="#{!invoiceDetail.delete}">
<div class="Table">
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceType:</p:outputLabel>
</div>
<div class="Cell">
<p:selectOneMenu value="#{invoiceDetail.invoiceTypeID}"
filter="true" filterMatchMode="contains" required="true"
requiredMessage="InvoiceType is required">
<f:selectItems
value="#{hrOrganizationPaymentDetailBean.newInvoiceTypeList}"
var="list" itemValue="#{list.typeId}"
itemLabel="#{list.type}" />
</p:selectOneMenu>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceNumber:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoiceNumber}"
required="true" requiredMessage="InvoiceNumber is required" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceAmount:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoiceAmount}"
required="true" requiredMessage="InvoiceAmount is required">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>InvoicePath:</p:outputLabel>
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.invoicePath}" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel>
<span class="redColor">*</span>InvoiceDate:</p:outputLabel>
</div>
<div class="Cell">
<p:calendar id="invoiceDate"
value="#{invoiceDetail.invoiceDate}" showOn="button"
readonlyInput="true" timeZone="IST" pattern="dd-MMM-yyyy"
required="true" requiredMessage="InvoiceDate is required" />
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel value="ServiceTax:" />
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.serviceTax}">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell">
<p:outputLabel value="TDS:" />
</div>
<div class="Cell">
<p:inputText value="#{invoiceDetail.tDS}">
<f:convertNumber pattern="#0.00" />
</p:inputText>
</div>
</div>
<div class="Row">
<div class="Cell"></div>
<div class="Cell">
<p:commandButton styleClass="Submit_button"
value="Remove Invoice"
action="#{hrOrganizationPaymentDetailController.removeInvoiceDetail(invoiceDetail)}"
update=":EditOrganizationPaymentDetailForm:addInvoicePanel" />
</div>
</div>
</div>
</p:panelGrid>
</p:dataGrid>
</div>
And my backend java code is:
public void removeInvoiceDetail(InvoiceDetailTO invoiceDetailTO)
{
List<InvoiceDetailTO> invoiceDetailTOList = null;
List<Long> deletedInvoiceDetail = null;
try {
invoiceDetailTOList = hrOrganizationPaymentDetailBean.getInvoiceDetailTOList();
deletedInvoiceDetail = hrOrganizationPaymentDetailBean.getDeletedInvoiceDetailID();
if (deletedInvoiceDetail != null && !deletedInvoiceDetail.isEmpty()) {
} else {
deletedInvoiceDetail = new ArrayList<Long>();
}
for (InvoiceDetailTO detailTO : invoiceDetailTOList) {
if ((detailTO.getInvoiceDetailID() != null && detailTO.getInvoiceDetailID().equals(invoiceDetailTO.getInvoiceDetailID()))
|| (detailTO.getUniqueID() != null && detailTO.getUniqueID().equals(invoiceDetailTO.getUniqueID()))) {
detailTO.setDelete(true);
if (invoiceDetailTO.getInvoiceDetailID() != null) {
deletedInvoiceDetail.add(invoiceDetailTO.getInvoiceDetailID());
}
}
}
hrOrganizationPaymentDetailBean.setInvoiceDetailTOList(invoiceDetailTOList);
hrOrganizationPaymentDetailBean.setDeletedInvoiceDetailID(deletedInvoiceDetail);
} catch (Exception e) {
LOGGER_.error("", e);
}
}
Please advise where I am making a mistake?
The problem is in <p:panelGrid rendered="#{!invoiceDetail.delete}">. Even with rendered="false" cell won't be removed from html page after rendering. If you open debugger in your browser (press F12 for Mozilla or Chrome) you can find empty cell there <td class="ui-datagrid-column"></td>. So you need to remove deleted item from your #{hrOrganizationPaymentDetailBean.invoiceDetailTOList} and update dataGrid.

Resources