JSF 2 and Primefaces attribute Ajax=false - primefaces

I have a form that has a commandlink that opens a modal dialog, the dialog has an inputtext and a button saved, when I enter a value in the inputtext, this value has to be copied to another inputtext in the first form, but the attribute update doesn't update the inputtext in the first form, I have to put attribute ajax="false" in the button save of the dialog for that reload the page, so the value in the inputtext of the dialog is copied to the inputtext of the first form. I want to know if there is another way to update this value without the attribute ajax="false" and doesn't reload the page
create_store.xhtml
<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" >
<h:panelGrid columns="3" width="100%" border="0" columnClasses="colC1,colC2">
<h:outputText value="Code: " style="margin-right:20px;"/>
<p:inputText id="idCodProvider" value="#{storeBean.au.code}" size="84"/>
<h:outputText value="Name: " style="margin-right:20px;"/>
<p:inputText id="idName" value="#{storeBean.au.name}" size="84"/>
<p:commandLink id="idAdressLink" style="margin-right:20px;" actionListener="#{storeBean.selectAdress}"
update=":idFormAdress:idPgADressStore" >
<h:outputText value="Adress:" />
</p:commandLink>
<p:inputText id="idAdressStore" label="Adress" value="#{storeBean.au.adressStore}" size="84"/>
<h:outputText value="   " />
</h:panelGrid>
dialog_adress.xhtml
<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">
<h:panelGrid id="idPgAdressStore" columns="2" columnClasses="col1,col2">
<h:outputLabel for="idAdress" value="Adress: " />
<p:inputText id="idAdress" label="Adress" size="40" value="#{adressBean.au.strAdress}"/>
<f:facet name="footer">
<h:panelGrid width="100%" columns="2" style="text-align:center">
<p:commandButton id="idBtSaveDir" value="Save" actionListener="#{storeBean.saveAdress}"
update=":idFormAdress,:idFormStore" onComplete="PF('dlgDirStore').hide()"/>
<p:commandButton id="idBtCancelDir" value="Cancel" type="button" onclick="PF('dlgDirStore').hide()"/>
</h:panelGrid>
</f:facet>
</h:panelGrid>

Related

passing value from data table to dialog

I have a problem with passing data from dataTable witch is populated from database to dialog for editing values.
izmenaPredmeta.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Obrada predmeta</title>
</h:head>
<h:body>
<center>
<h:form>
<p:growl id="msgs" showDetail="true"/>
<h:dataTable var="list" value="#{pred.getPredmets()}" border="1" cellpadding="3" cellspacing="3" bgcolor="lightgray">
<h:column>
<f:facet name="header">Naziv</f:facet>
<h:outputText value="#{list.naziv}"/>
</h:column>
<h:column>
<f:facet name="header">Akronim</f:facet>
<h:outputText value="#{list.akronim}"/>
</h:column>
<h:column>
<f:facet name="header">Semestar</f:facet>
<h:outputText value="#{list.semestar}"/>
</h:column>
<h:column>
<f:facet name="header">Godina</f:facet>
<h:outputText value="#{list.god}"/>
</h:column>
<h:column>
<f:facet name="header">Odsek</f:facet>
<h:outputText value="#{list.odsek}"/>
</h:column>
<h:column>
<f:facet name="header">Aktivan</f:facet>
<h:outputText value="#{list.drzise}"/>
</h:column>
<h:column>
<f:facet name="header">Edit</f:facet>
<h:commandButton value="Edit" action="#{pred.edit()}" onclick="PF('dlg3').show();">
<f:param name="idp" value="#{list.idpred}"/>
</h:commandButton>
<p:dialog header="Edit" widgetVar="dlg3" showEffect="explode" hideEffect="bounce" height="350">
<h:panelGrid id="panel" columns="2" cellpadding="5" border="1" bgcolor="gray">
<h:outputText value="Naziv"/>
<p:inputText style="width: 97%" value="#{pred.naziv}" required="true" requiredMessage="Naziv je obavezan"/>
<h:outputText value="Akronim"/>
<p:inputText style="width: 97%" value="#{pred.akronim}" required="true" requiredMessage="Akronim je obavezan"/>
<h:outputText value="Semestar"/>
<p:inputText style="width: 97%" value="#{pred.semestar}" required="true" requiredMessage="Semestar je obavezan"/>
<h:outputText value="Godina"/>
<p:inputText style="width: 97%" value="#{pred.god}" required="true" requiredMessage="Godina je obavezna"/>
<h:outputText value="Odsek"/>
<p:inputText style="width: 97%" value="#{pred.odsek}" required="true" requiredMessage="Odsek je obavezan"/>
<h:outputText value="Drzi se"/>
<p:inputText style="width: 97%" value="#{pred.drzise}" required="true" requiredMessage="Drzi se je obavezno"/>
<p:commandButton value="Save" action="#{pred.upPredmet()}" />
</h:panelGrid>
</p:dialog>
</h:column>
<h:column>
<f:facet name="header">Delete</f:facet>
<h:commandButton value="Delete" action="#{pred.delPredmet()}">
<f:param rendered="msgs" name="id" value="#{list.idpred}"/>
</h:commandButton>
</h:column>
</h:dataTable>
</h:form>
</center>
</h:body>
and function from PredmetBean.java #ViewScoped implements Serializable
// getter's, setter's and other functions
public void edit(){
ArrayList<Predmet> PrList = Predmet.getPredmets();
FacesContext context = FacesContext.getCurrentInstance();
HttpServletRequest request = (HttpServletRequest)context.getExternalContext().getRequest();
int id = Integer.parseInt(request.getParameter("idp"));
for(Predmet pr : PrList){
if( pr.getIdpred() == id ){
this.setIdPred(pr.getIdpred());
this.setNaziv(pr.getNaziv());
this.setAkronim(pr.getAkronim());
this.setSemestar(pr.getSemestar());
this.setGod(pr.getGod());
this.setOdsek(pr.getOdsek());
this.setDrzise(pr.getDrzise());
}
}
}
when clicked on edit button dialog should open with values from row in witch the button is click. But only thing i get is dialog try to open and break and then requiredMessages pops up all over.
When in dialog for value is list.somename dialog shows and populate the fileds with the last object value in list.
If someone have idea how to solve this or some other method for editing user values without going to other page it would be great.
Keep the p:dialog outside the form and use binding attribute in your dataTable show in below Example.
Declare the below line your managed bean
private HtmlDataTable dataTable;
Add the below line in your dataTable
binding="#{managedBean.htmlDataTable}"
Then your edit method would be like this
public void edit(){
Predmet selectedObject = (Predmet) getDataTable().getRowData();
}
Hope this can help you

Primefaces datatable required fields not work

I would create a check input information about specified in:
http://www.primefaces.org/showcase/ui/message/messages.xhtml
I create a dataTable with a lot required field (inputText with attribute required="true") and a p:message into datatable section.
Problem is when I click on button to save data: I don't see alert message in my page but starting execution of associated bean.
Why?
My code in .xhtml is this:
<h:form>
<p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" />
<p:dataTable var="myAtt"
value="#{myBean.attributes}"
rowIndexVar="myAttIndex">
<h:inputHidden value="#{myAtt.value}" rendered="#{myAtt.description == 'XXX'}" />
<p:column rendered="#{myAtt.description == 'XXX'}">
<h:outputText value="*" rendered="#{myAtt.required}" />
</p:column>
<p:column rendered="#{ myAtt.description == 'YYY'">
<p:fragment rendered="#{myAtt.description == 'ZZZ'">
<p:fragment rendered="#{myAtt.value == 'value1'}">
<p:inputText size="#{myAtt.maxLength}"
value="#{myAtt.value}"
rendered="#{myAtt.const == 't1'}"
required="true"
id="idText">
<p:ajax process="#this" event="change" update="#form"/>
</p:inputText>
<p:message for="idText"/>
</p:fragment>
</p:fragment>
</p:column>
</p:dataTable>
<br />
<p:commandButton value="Create" action="#{myBean.commit()}" process="#this" update=":MYPAGE"/>
Thanks.
You forgot to indicate an id for the h:form : <h:form id="myForm">
And in the update of the p:commandButton you have to indicate the id of the form : update=":MYPAGE :myForm"
EDIT
According to the PrimeFaces users guide 3.5, the attribute action will be called when the user clicks on the button.

Primefaces dialog not shown at "oncomplete" after update on MenuItem

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();"

p:commandButton action has not being called in dynamic pages

I have an application that has a layout with left and center layout units (demoLayout.xhtml). On main page (main.xhtml) i have p:tree on left layout unit (demoTree.xhtml) and three different forms on center layout unit (first.xhtml, second.xhtml, third.xhtml). Center forms switches using tree node clicks. My default center form is first.xhtml and when i do not put p:commandButton on first.xhtml command buttons on second.xhtml and on third.xhtml actions has not being called. When i put p:commandButton on first.xhtml the other command buttons works, but i do not want to put p:commandButton on first.xhtml. How can i do?
demoLayout.xhtml
<html 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">
<f:view id="mainPanel" encoding="UTF-8" contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>#{title}</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="left" position="west" size="300" resizable="true" closable="true" collapsible="true" header="Quick Links" visible="true" minSize="200">
<div id="west">
<ui:insert name="west">
Default West Content
</ui:insert>
</div>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<div id="centerDiv">
<ui:insert name="center">
Default Center Content
</ui:insert>
</div>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
main.xhtml
<ui:composition template="demoLayout.xhtml"
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">
<ui:param name="title" value="demo" />
<ui:define name="west">
<ui:include src="demoTree.xhtml" />
</ui:define>
<ui:define name="center">
<ui:include src="#{demo3MBean.activePanel}" />
</ui:define>
</ui:composition>
demoTree.xhtml
<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">
<h:form id="treeForm">
<p:growl id="messages" showDetail="true" sticky="false" />
<p:tree value="#{demoTreeBean.root}" var="node" id="tree" animate="true" style="width:350px;height:720px" dynamic="true" cache="false"
selectionMode="single">
<p:treeNode type="First">
<h:outputText value="#{node}" id="lblNode1" />
</p:treeNode>
<p:treeNode type="Second">
<h:outputText value="#{node}" id="lblNode2" />
</p:treeNode>
<p:treeNode type="Third">
<h:outputText value="#{node}" id="lblNode3" />
</p:treeNode>
<p:ajax event="select" update=":rightForm" listener="#{demo3MBean.onNodeSelect}" />
</p:tree>
<p:blockUI block=":center" trigger="tree">
LOADING<br />
<p:graphicImage value="/images/ajax-loader.gif" />
</p:blockUI>
</h:form>
</ui:composition>
first.xhtml
<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">
<h:form id="rightForm">
<p:growl id="messages" showDetail="true" sticky="false" />
<br></br>
<p:fieldset id="resourceList" legend="1 nolu grup">
<h:outputText value="1 Nolu XHTML" />
<br />
<ui:remove>
<p:commandButton id="buton" value="Print Me 1" actionListener="#{demo3MBean.printMe1}" />
</ui:remove>
</p:fieldset>
</h:form>
</ui:composition>
second.xhtml
<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">
<h:form id="rightForm">
<p:growl id="messages" showDetail="true" sticky="false" />
<br></br>
<p:fieldset id="resourceList" legend="2 nolu grup">
<h:outputText value="2 Nolu XHTML" />
<br />
<p:commandButton id="buton" value="Print Me 2" actionListener="#{demo3MBean.printMe2}" />
</p:fieldset>
</h:form>
</ui:composition>
third.xhtml
<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">
<h:form id="rightForm">
<p:growl id="messages" showDetail="true" sticky="false" />
<br></br>
<p:fieldset id="resourceList" legend="3 nolu grup">
<h:outputText value="3 Nolu XHTML" />
<br />
<p:commandButton id="buton" value="Print Me 3" actionListener="#{demo3MBean.printMe3}" />
</p:fieldset>
</h:form>
</ui:composition>
Demo3MBean.java
#ManagedBean(name = "demo3MBean")
#ViewScoped
public class Demo3MBean extends TlosSWBaseBean implements Serializable {
private static final long serialVersionUID = -504537811128309503L;
private String activePanel = FIRST_PANEL;
public final static String FIRST_PANEL = "first.xhtml";
public final static String SECOND_PANEL = "second.xhtml";
public final static String THIRD_PANEL = "third.xhtml";
public void onNodeSelect(NodeSelectEvent event) {
String nodeType = event.getTreeNode().getType();
if (nodeType.equals("First")) {
activePanel = FIRST_PANEL;
} else if (nodeType.equals("Second")) {
activePanel = SECOND_PANEL;
} else if (nodeType.equals("Third")) {
activePanel = THIRD_PANEL;
}
}
public void printMe1(ActionEvent e) {
System.out.println("Me 1");
}
public void printMe2(ActionEvent e) {
System.out.println("Me 2");
}
public void printMe3(ActionEvent e) {
System.out.println("Me 3");
}
public String getActivePanel() {
return activePanel;
}
public void setActivePanel(String activePanel) {
this.activePanel = activePanel;
}
}
DemoTreeBean.java
#ManagedBean(name = "demoTreeBean")
public class DemoTreeBean {
private TreeNode root;
#SuppressWarnings("unused")
public DemoTreeBean() {
root = new DefaultTreeNode("Root", null);
TreeNode node0 = new DefaultTreeNode("First", "First Node", root);
TreeNode node1 = new DefaultTreeNode("Second", "Second Node", root);
TreeNode node2 = new DefaultTreeNode("Third", "Third Node", root);
}
public TreeNode getRoot() {
return root;
}
}
I also read these :
JSF : dynamically loaded page commandButton not working
Primefaces commandButton action attribute not being called
BalusC answer - h:commandLink / h:commandButton is not being invoked
This part from main.xhtml is the cause of your problem.
<ui:define name="center">
<ui:include src="#{demo3MBean.activePanel}" />
</ui:define>
changing value of src at runtime does not work.
Try it with a static value like
<ui:define name="center">
<ui:include src="third.xhtml" />
</ui:define>
and you will see that buttons work.
Changing value of src at runtime will not work.
<ui:define name="center">
<ui:include src="#{demo3MBean.activePanel}" />
</ui:define>
Alternative solution to conquer your problem is using a rendered flag for your xhtml pages.For example
<ui:define name="center">
<s:div rendered="#{demo3MBean.firstFlag}">
<ui:include src="first.xhtml" />
</s:div>
<s:div rendered="#{demo3MBean.secondFlag}">
<ui:include src="second.xhtml" />
</s:div>
<s:div rendered="#{demo3MBean.thirdFlag}">
<ui:include src="third.xhtml.xhtml" />
</s:div>
</ui:define>
Set all pages flag to FALSE intially. Make the specific flag value as TRUE only when the relevant tree node is clicked. Do not forget to set unique "id" of all components of the included pages.
Using the above solution, attributes like action and actionListener of components such as commandButtons, commandLinks etc will also work normally and perfectly.
Hope this will solve your problem.
And also do not forget to accept my answer if it helps. Have a nice Day!!
It is just impossible to include a different file by updating the form inside of the included file. As you have the form rightForm in each of your files, you are only updating the rightForm of the currently loaded file when a tree node is selected. So there will never be a different file loaded.
Besides it is a bad approach to define the same form in each file when it exists in everyone (similiar for the growl).
To fix this remove the h:form in first.xhtml, second.xhtml and third.xhtml and change the second ui:define in your main.xhtml to the following:
<ui:define name="center">
<h:form id="rightForm">
<ui:include src="#{demo3MBean.activePanel}" />
</h:form>
</ui:define>
And why are you defining three p:treeNodes in the p:tree? As you are initializing the tree in the DemoTreeBean there is no need to define the treenodes manually. The p:tree is just iterating through the nodes of the given value, as you can see in the showcase. Try the following code to reduce the effort when adding more tree nodes:
<p:tree value="#{demoTreeBean.root}" var="node" id="tree" animate="true"
style="width:350px;height:720px" dynamic="true" cache="false"
selectionMode="single">
<p:treeNode type="#{node.data}">
<h:outputText value="#{node}" id="lblNode1" />
</p:treeNode>
<p:ajax event="select" update=":rightForm" listener="#{demo3MBean.onNodeSelect}" />
</p:tree>

Datatable as master, dialog as details

I'm trying to get that code working:
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
template="/templates/default.xhtml">
<ui:define name="content">
<h:form id="form">
<p:dataTable id="clienti" var="c" value="#{clientiController.clienti}" rowKey="#{c.id}">
<p:column headerText="Ragione sociale">
<h:outputText value="#{c.ragioneSociale}" />
</p:column>
<p:column headerText="Codice fiscale">
<h:outputText value="#{c.codiceFiscale}" />
</p:column>
<p:column style="width:4%">
<p:commandButton
update=":formDialog:clienteEditDialogTable"
oncomplete="clienteEditDialog.show()"
value="Modifica"
title="Modifica">
<f:setPropertyActionListener value="#{c}" target="#{clientiController.clienteSelezionato}" />
</p:commandButton>
</p:column>
</p:dataTable>
<p:commandButton value="Aggiorna" actionListener="#{clientiController.aggiorna}" update=":form:clienti" icon="ui-icon-arrowrefresh-1-n" />
<p:commandButton value="Nuovo Cliente" actionListener="#{clientiController.nuovo}" update=":formDialog:clienteEditDialogTable" oncomplete="clienteEditDialog.show()" />
</h:form>
<p:dialog
header="Modifica Cliente"
widgetVar="clienteEditDialog"
id="clienteEditDialog"
showEffect="fade"
hideEffect="explode"
closable="true"
modal="true"
appendToBody="true">
<h:form id="formDialog">
<h:panelGrid id="clienteEditDialogTable" columns="2" cellpadding="10" style="margin:0 auto;">
<p:outputLabel for="fieldNome" value="Ragione Sociale:" />
<p:inputText id="fieldNome" value="#{clientiController.clienteSelezionato.ragioneSociale}" />
<p:outputLabel for="fieldCodice" value="Codice:" />
<p:inputText id="fieldCodice" value="#{clientiController.clienteSelezionato.codiceFiscale}" required="true" requiredMessage="Codice fiscale obbligatorio" />
</h:panelGrid>
<p:commandButton
value="Conferma modifiche"
actionListener="#{clientiController.modifica}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id!=null}" />
<p:commandButton
value="Conferma nuovo cliente"
actionListener="#{clientiController.crea}"
update=":form:clienti"
oncomplete="clienteEditDialog.hide()"
rendered="#{clientiController.clienteSelezionato.id==null}" />
</h:form>
</p:dialog>
</ui:define>
</ui:composition>
By clicking on "Nuovo Cliente" I get a javascript console error:
TypeError: 'undefined' is not a function (evaluating
'clienteEditDialog.show()')
It's a naming container misunderstanding of course.
Can you help me give the right ids?
In older primefaces version one could not assign the same name for widgetVar and id of a p:dialog
Try changing id="clienteEditDialog" into id="clienteEditDialogId"
You are referencing clienteEditDialogTable from different naming container. Actual id is
:formDialog:clienteEditDialogTable, so try with it. Id can be different but I can tell you more after you give the template source code.