By default when page is loaded the panel appear close because i have the attribute collapsed="true". I want that when i edit an add automatically the panel updates, the update works fine but all the panels appear open even though i have collapsed set to true. I dont know why this happens. Does any knows why? and how to solve this?
addView.xhtml:
<body>
<h:outputStylesheet name="./../../resources/css/cssLayout.css"/>
<ui:composition template="./../../Layouts/LayoutGeneral.xhtml">
<ui:define name="content">
<h1 style="text-align: center">Adds</h1> <br/>
<h:form id="allAddsId">
<ui:repeat value="#{addBean.allAdds}" var="add" >
<p:panel id="basic" header="#{add.title}" style="margin-bottom:20px" toggleable="true" collapsed="true" styleClass="">
<p:ajax event="toggle"/>
<h:panelGrid columns="2" style="width:100%">
<p:outputLabel value="#{add.description}" />
</h:panelGrid> <br/>
<p:separator/>
<p:commandButton value="Edit" oncomplete="PF('detail').show();" update="detailAdd" action="#{addBean.setAddAux(add)}"/>
<p:growl id="growl" showDetail="true" sticky="false" />
</p:panel>
</ui:repeat>
</h:form>
<p:dialog id="detail" header="Edit Add" widgetVar="detail">
<p:outputPanel id="detailAdd">
<h:form>
<p:outputLabel value="Title"/><br/>
<p:inputTextarea id="titleEdit" value="#{addBean.addAux.title}" rows="2" cols="50" counter="displayTE" maxlength="50" counterTemplate="{0} caracteres restantes" autoResize="false" required="true" requiredMessage="Title necesaria"/> <br/>
<p:outputLabel id="displayTE"/> <br/> <br/>
<p:outputLabel value="Description"/> <br/>
<p:inputTextarea id="opcion1" value="#{addBean.addAux.description}" rows="6" cols="50" counter="displayDE" maxlength="200" counterTemplate="{0} caracteres restantes" autoResize="false" required="true" requiredMessage="Description necesaria"/> <br/>
<p:outputLabel id="displayDE"/> <br/> <br/>
<p:separator/> <br/>
<h:panelGrid columns="1">
<p:commandButton value="Save" action="#{addBean.editAdd(addBean.addAux)}" onclick="detail.hide()" update=":allAddsId"/>
</h:panelGrid>
</h:form>
</p:outputPanel>
</p:dialog>
</ui:define>
</ui:composition>
</body>
Okey i found a solution!! i dont know if this is the best answers but here i go..
I was doing somo test and i delete p:ajax event="toggle" which is under the panel declaration and now works!! When i edit an add the list of adds automatically updates and the panels appear collapsed!! I dont why deleting that makes it works so if someone knows feel free to tell me!
Hope this help someone!
Related
I am trying to persist a form in JSF page with many inputs. in parallel I added client side validation to process before entering to the actionLisner method.
The issus is that if I make the commandbutton inside <h:form> and outside <p:panel> the validation is OK but the action does not do anything (if all the fiels are validated). If I make the commandbutton inside <p:panel> the opposite happens, the validation does not work anymore and even if some fiels are empty, the method in actionListner is called.
<?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:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="Entretien annuel - Personnel d'Agence">
</h:outputText>
</ui:define>
<ui:define name="body">
<div align="center">
<h:form id="CollaborateurViewForm">
<h:panelGroup id="display">
<p:panel header="Détails du Collaborateur">
<p:panelGrid columns="2" rendered="#{collaborateurController.selected !=
null}">
<h:outputText value="#{bundle.ViewCollaborateurLabel_idCollaborateur}"/>
<h:outputText value="#{collaborateurController.selected.idCollaborateur}"
title="#{bundle.ViewCollaborateurTitle_idCollaborateur}"/>
</p:panelGrid>
</p:panel>
</h:panelGroup>
</h:form>
</div>
<h:form id="testForm" >
<p:panel id="entretienFormPa" header="Entretien annuel - Personnel d'Agence">
<div align="center">
<p:panelGrid columns="2">
<p:panel header="Détails de l'entretien">
<p:outputLabel for="collaborateursItem" value="Entretien mené par :"/>
<p:selectManyMenu id="collaborateursItem" filter="true" filterMatchMode="contains"
showCheckbox="true"
value="#{entretienController.entretienMenePar}">
<p:ajax process="#this"/>
<f:selectItems id="entretienMenePar" value="#
{collaborateurController.itemsAvailableSelectMany}"
var="entretienMeneParItem"
itemValue="#{entretienMeneParItem}"/>
</p:selectManyMenu>
</p:panel>
</p:panelGrid>
<p:panel header="Saisie des notes de l'entretien">
<p:tabView>
<p:tab title="#{bundle.Personnel_Organisation_Commerciale}">
<h:panelGrid columns="2" cellpadding="10" cellspacing="10">
<p:outputLabel value="#
{bundle.Personnel_Organisation_Commerciale_Comprehension}" for="noteItem11"/>
<p:selectOneButton id="noteItem11" value="#
{entretienController.note11}"
required="true"
requiredMessage="#
{bundle.NoteEntretien_Requise}">
<f:selectItems value="#
{entretienController.listeNotesPossibles}"
var="noteItem"
itemValue="#{noteItem}"/>
<p:ajax process="#this"/>
</p:selectOneButton>
<p:outputLabel
value="#{bundle.Personnel_Organisation_Commerciale_Actions}" for="noteItem12"/>
<p:selectOneButton id="noteItem12" value="#
{entretienController.note12}"
required="true"
requiredMessage="#
{bundle.NoteEntretien_Requise}">
<f:selectItems value="#
{entretienController.listeNotesPossibles}"
var="noteItem"
itemValue="#{noteItem}"/>
<p:ajax process="#this"/>
</p:selectOneButton>
<p:outputLabel for="commentaireOrgaCom" value="Commentaire de suivi : " style="font-weight: bold"/>
<p:inputTextarea id="commentaireOrgaCom" value="#{entretienController.commentaireOrgaCom}"
rows="4" cols="50">
<p:ajax process="#this"/>
</p:inputTextarea>
</h:panelGrid>
</p:tab>
</p:tabView>
</p:panel>
<p:tabView>
<p:tab title="#{bundle.Da_Divers}">
<div align="center">
<p:outputLabel for="diagnosticItem" value="Diagnostic : " />
<p:inputTextarea id="diagnosticItem" value="#
{entretienController.diagItem}" rows="8" cols="67" required="true"
requiredMessage="#{bundle.Diagnostic_Requis}">
<p:ajax process="#this"/>
</p:inputTextarea>
</h:panelGrid>
</div>
</p:tab>
</p:tabView>
</div>
</p:panel>
<div align="right">
<p:commandButton id="saveEntretienButton" value="Enregistrer"
process="entretienFormPa" update="entretienFormPa" immediate="true"
actionListener="#
{noteEntretienController.saveEntretienActionPa(entretienController,
collaborateurController)}">
<p:confirm header="Confirmation" message="Etes-vous sûr de vouloir
enregistrer l'entretien ?" />
</p:commandButton>
<p:commandButton value="Retour" action="Details"
ajax="false" />
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade">
<p:commandButton value="Oui" type="button" styleClass="ui-confirmdialog-yes" />
<p:commandButton value="Non" type="button" styleClass="ui-confirmdialog-no" />
</p:confirmDialog>
</div>
</h:form>
</ui:define>
</ui:composition>
</html>
I also tried to add validateClient="true" on the commandButton
Thank in advance !
UPDATE :
I resolved the issue without knowing what was the source. I go back to the initial example given on primefaces showcase, I added my fields one by one. Know all is good
http://icefaces-showcase.icesoft.org/showcase.jsf?grp=ace:dialog&exp=Server%20Initiated I am just trying to learn how to use this component. But unable to run this example. When I click the button nothing happens. Does anybody have any idea? There is no error message either.
<h:form>
<h:panelGroup style="display:block; text-align:center;">
<ace:pushButton id="show" value="Show Dialog"
type="button">
<ace:ajax execute="#none" render="#none"
onStart="ice.ace.instance('#{dialog.clientId}').show(); return false;"/>
</ace:pushButton>
</h:panelGroup>
</h:form>
<ace:dialog id="dialog" binding="#{dialog}"
header="A sample dialog overview example"
closable="false"
modal="true"
draggable="false"
showEffect="clip"
hideEffect="fade"
width="400">
<h:form id="inputForm">
<h:panelGrid columns="2" width="100%">
<h:outputLabel id="firstNameLabel" for="firstNameInputField" value="First Name:"/>
<ace:textEntry id="firstNameInputField"
value="#{dialogBean.firstName}" />
<h:outputLabel id="lastNameLabel" for="lastNameInputField" value="Last Name:"/>
<ace:textEntry id="lastNameInputField"
value="#{dialogBean.lastName}"/>
</h:panelGrid>
<h:panelGrid width="100%" style="text-align: center;">
<ace:pushButton id="submitBtn"
value="Click me once done with input">
<ace:ajax execute="#form" render="#all"
onSuccess="ice.ace.instance('#{dialog.clientId}').hide(); "/>
</ace:pushButton>
</h:panelGrid>
</h:form>
</ace:dialog>
<h:form id="outputForm">
<h:panelGrid id="outputPanel" columns="2">
<h:outputLabel value="Entered text: " for="enteredName"/>
<h:outputText id="enteredName" value="#{dialogBean.firstName} #{dialogBean.lastName}"/>
</h:panelGrid>
</h:form>
This is the client side code from the example.
<h:form prependId="false">
<h:commandButton id="show" value="Show Dialog" onclick="ice.ace.instance('myDialog').show();" type="button"/>
<ace:dialog id="myDialog"
header="A sample dialog overview example"
width="400">
<h:outputText value="i will fix this"/>
</ace:dialog>
</h:form>
I was able to find the solution to the problem. One of the key problem was that I was suppose to use prependId="false" with form. so now the basic functionality works and on button click the ace:dialog appears.
Hi I've been stuck for sometime getting a modal form to update, it's loading the data, and it's calling the function - it's just not passing the data back to the server
<h:form id="modal">
<p:dialog widgetVar="modalText" styleClass="modalSceneText" modal="true" dynamic="true" >
<p:panel id="sceneText">
<p:inputTextarea id="sceneName" immediate="true" style="width: 200px" rows="1" counter="labelCount" maxlength="20" counterTemplate="{0} characters remaining." value="#{CustomerDashboardController.selectedScene.title}"/><h:outputText id="labelCount" /><br/>
<p:inputTextarea id="sceneDescription" immediate="true" rows="10" cols="50" value="#{CustomerDashboardController.selectedScene.description}" counter="descriptionCount" maxlength="1000" counterTemplate="{0} characters remaining." autoResize="false" /><br/>
<h:outputText id="descriptionCount" />
</p:panel>
<p:ajax event="close" process="#form" immediate="true" update=":form:locationScenes" listener="#{CustomerDashboardController.saveSelectedScene()}" />
</p:dialog>
</h:form>
I've tried it inside and outside the form, I've tried everything I can think off..
The sceneName & sceneDescription are loading the correct data, they're just not saving any changes when the modal/dialog is closed. saveSelectedScene() is being called fine.
EDIT
I can get it to save with a
<p:commandLink value="save" action="#{CustomerDashboardController.saveSelectedScene()}"/>
Which isn't very pretty. Seems the problem is trying to save on the close event.
Your problem here is that the saveSelectedScene() method which is called from the listener in the ajax component is using the old values of the inputTextarea's.
As a workaround you can use a remoteCommand component and call that on your close event instead:
<h:form id="modal">
<p:remoteCommand name="rc" update=":form:locationScenes" actionListener="#{CustomerDashboardController.saveSelectedScene()}" />
<p:dialog widgetVar="modalText" styleClass="modalSceneText" modal="true" dynamic="true" >
<p:panel id="sceneText">
<p:inputTextarea id="sceneName" immediate="true" style="width: 200px" rows="1" counter="labelCount" maxlength="20" counterTemplate="{0} characters remaining." value="#{CustomerDashboardController.selectedScene.title}"/><h:outputText id="labelCount" /><br/>
<p:inputTextarea id="sceneDescription" immediate="true" rows="10" cols="50" value="#{CustomerDashboardController.selectedScene.description}" counter="descriptionCount" maxlength="1000" counterTemplate="{0} characters remaining." autoResize="false" /><br/>
<h:outputText id="descriptionCount" />
</p:panel>
<p:ajax event="close" process="#form" immediate="true" oncomplete="rc()" />
</p:dialog>
</h:form>
Also consider if the immediate="true" are really necessary in your code
Have you tried removing immediate="true" from both input elements and p:ajax tag? It seems to me that you don't need it - especially not on p:ajax tag.
Hope this helps!
I have a PrimeFaces dialog, that has two command buttons that executes some code in the backing bean. I want to block the dialog within the action.
I managed to do it using blockUI, but when the blockUI is present, and I open the dialog, it appears at the bottom of the page.
If I remove the blockUI component, the dialog opens at the center of the page, as I want. But I want it to be centered and with the blockUI.
<p:dialog header="Attention" id="dialog" position="center"
widgetVar="dialog" modal="true" closable="false"
dynamic="true" closeOnEscape="false">
<div class="internal-margin-top">
<h:outputText value="Location" styleClass="ui-outputtext" />
<p:inputText value="#{activityBean.location}"
id="inputLocation" maxlength="15">
</p:inputText>
</div>
<div class="internal-margin-bottom">
<p:commandButton id="closureYes" value="Yes"
styleClass="btn-green"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processItem()}" process="#all">
</p:commandButton>
<p:commandButton id="closureNo" value="No"
styleClass="btn-red"
onstart="PF('block').show();"
oncomplete="PF('dialog').hide(); PF('block').hide();"
action="#{activityBean.processActivity()}" process="#all" />
</div>
</p:dialog>
<p:blockUI block="scrapDialog" widgetVar="block">
<p:graphicImage library="images" name="loading_bar.gif" />
</p:blockUI>
Thanks in advance.
Example with a centered modal dialog:
<p:dialog header="Header" position="center" widgetVar="wv_dialog" modal="true" closable="false" dynamic="true" closeOnEscape="false">
<h:form id="dialogform">
<p:panelGrid columns="1">
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
<p:inputText value="test"/>
</p:panelGrid>
<p:commandButton id="closebutton"
value="Close"
oncomplete="PF('wv_dialog').hide();"
action="#{testBean.actionTest()}"
process="#form"/>
<p:blockUI block="dialogform" trigger="closebutton"/>
</h:form>
</p:dialog>
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>