jsf - Difference between rendered and visible attributes of &p:dialog& - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I am using PrimeFaces 3.2 in my project. I wanted to know what is the difference between setting the rendered attribute of a &p:dialog& as against setting the visible attribute. When should I use either of these attributes?
2,83911833
The rendered attribute is server-side and the visible attribute is client-side. The rendered attribute tells whether JSF should generate the dialog's HTML representation or not. The visible attribute tells whether HTML/CSS/JS should immediately show the dialog on browser's page load or not.
If the dialog isn't rendered, then you won't be able to display it by for example JavaScript dialogWidgetVar.show() without reloading the page or ajax-updating one of the dialog's parent components that way so that the dialog's rendered condition evaluates to true. Also the visible attribute won't have any effect if the dialog is not rendered simply because there's nothing being rendered to the resulting HTML output which could be shown/hidden by JavaScript.
If the dialog is rendered, then it is by default hidden. You can set visible to true to force it to display the dialog immediately whenever the page is opened. Or you can invoke JavaScript dialogWidgetVar.show() in some onclick or oncomplete attribute to show it.
Use the rendered attribute if you don't want to render the dialog at all, for example because it wouldn't ever be used anyway in the currently requested page composition.
648k19022912542
According to the
for those attributes, section 3.28:
rendered: Boolean value to specify the rendering of the component, when set to
false component will not be rendered [default value: TRUE]
When enabled, dialog is visible by default [default value: FALSE]
129k14144221
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabledDisplay a dynamic message on &p:confirmDialog& in Primefaces [] - 问题-字节技术
Display a dynamic message on &p:confirmDialog& in Primefaces
问题 (Question)
I need to display a confirmation message dynamically on &p:confirmDialog&. This can be done by updating this component with AJAX after sending the request to the server. For example,
&p:column selectionMode="multiple" resizable="false" style="width:5%; text-align:"&
&f:facet name="footer"&
&p:commandButton oncomplete="confirmDeleteMultiple.show()" update=":form:confirmDialogDeleteMultiple" process=":form:dataTable" actionListener="#{stateManagedBean.deleteMultipleActionListener}" ajax="true" type="submit" icon="ui-icon ui-icon-close"/&
&/f:facet&
&/p:column&
The specified button on the footer of &p:dataTable& can update the message which is set inside deleteMultipleActionListener(ActionEvent actionEvent){...} and updates the specified confirm dialog, confirmDialogDeleteMultiple which is as follows.
&p:confirmDialog id="confirmDialogDeleteMultiple" widgetVar="confirmDeleteMultiple" message="#{stateManagedBean.deleteMultipleMsg}" header="Initiated deletin of row." severity="alert" closeOnEscape="true" appendToBody="true" closable="true"&
&p:commandButton id="confirmDeleteMultiple" value="Yes" process="@this dataTable messages :form:systemMessages" rendered="#{stateManagedBean.renderedYesButtonMultipleDelete}" update="messages dataTable :form:systemMessages" oncomplete="confirmDeleteMultiple.hide()" actionListener="#{stateManagedBean.deleteMultiple}"/&
&p:commandButton id="declineDeleteMultiple" value="#{stateManagedBean.noButtonTextMultipleDelete}" onclick="confirmDeleteMultiple.hide()" type="button" /&
&/p:confirmDialog&
The managed bean simply looks like the following.
@ManagedBean
@RequestScoped
public final class StateManagedBean extends LazyDataModel&StateTable&
private String deleteMultipleM
private boolean renderedYesButtonMultipleDelete=
private String noButtonTextMultipleDelete="No";
//Getters only. Setters are unnecessary in this case.
public void deleteMultipleActionListener(ActionEvent actionEvent)
if(selectedValues!=null&&!selectedValues.isEmpty())
int size = selectedValues.size();
renderedYesButtonMultipleDelete=
noButtonTextMultipleDelete="No";
deleteMultipleMsg="You're about to delete "+size+(size==1?" row":" rows")+". Attention this action will never be undone. Are you sure?";
noButtonTextMultipleDelete="Ok";
renderedYesButtonMultipleDelete=
deleteMultipleMsg="Please select the rows you want to delete.";
selectedValues is a List which holds the selected rows in DataTable. deleteMultipleMsg is a message that is displayed on &p:confirmDialog& after an AJAX request.
There is no question at all about it. This works as expected. Therefore, I don't explore this at length.
This however, requires sending an AJAX request to the server just to fetch a simple confirm message. I feel this is quite unnecessary. Such a confirmation message should be displayed on the client-side itself before sending the actual request to the server.
So, I'm looking for a way to do this on the client-side itself probably by using usual JavaScript. Can this simply be done as usual, exactly as JavaScript confirm("Message") with Ok and Cancel buttons is displayed?
I'm using Primefaces 3.5. Now it is 4.0 final.
我需要上动态显示确认消息&p:confirmDialog&。这可以通过使用AJAX更新该组件后在将请求发送给服务器。例如,&p:column selectionMode="multiple" resizable="false" style="width:5%; text-align:"&
&f:facet name="footer"&
&p:commandButton oncomplete="confirmDeleteMultiple.show()" update=":form:confirmDialogDeleteMultiple" process=":form:dataTable" actionListener="#{stateManagedBean.deleteMultipleActionListener}" ajax="true" type="submit" icon="ui-icon ui-icon-close"/&
&/f:facet&
&/p:column&
指定的页脚上的按钮&p:dataTable&可以更新消息设置里面是哪个deleteMultipleActionListener(ActionEvent actionEvent){...}和更新指定的确认对话框,confirmDialogDeleteMultiple这是如下。&p:confirmDialog id="confirmDialogDeleteMultiple" widgetVar="confirmDeleteMultiple" message="#{stateManagedBean.deleteMultipleMsg}" header="Initiated deletin of row." severity="alert" closeOnEscape="true" appendToBody="true" closable="true"&
&p:commandButton id="confirmDeleteMultiple" value="Yes" process="@this dataTable messages :form:systemMessages" rendered="#{stateManagedBean.renderedYesButtonMultipleDelete}" update="messages dataTable :form:systemMessages" oncomplete="confirmDeleteMultiple.hide()" actionListener="#{stateManagedBean.deleteMultiple}"/&
&p:commandButton id="declineDeleteMultiple" value="#{stateManagedBean.noButtonTextMultipleDelete}" onclick="confirmDeleteMultiple.hide()" type="button" /&
&/p:confirmDialog&
只是看起来像下面的托管bean。@ManagedBean
@RequestScoped
public final class StateManagedBean extends LazyDataModel&StateTable&
private String deleteMultipleM
private boolean renderedYesButtonMultipleDelete=
private String noButtonTextMultipleDelete="No";
//Getters only. Setters are unnecessary in this case.
public void deleteMultipleActionListener(ActionEvent actionEvent)
if(selectedValues!=null&&!selectedValues.isEmpty())
int size = selectedValues.size();
renderedYesButtonMultipleDelete=
noButtonTextMultipleDelete="No";
deleteMultipleMsg="You're about to delete "+size+(size==1?" row":" rows")+". Attention this action will never be undone. Are you sure?";
noButtonTextMultipleDelete="Ok";
renderedYesButtonMultipleDelete=
deleteMultipleMsg="Please select the rows you want to delete.";
selectedValues是一个列表,保存选中的行吗DataTable .deleteMultipleMsg是显示在一个消息吗&p:confirmDialog&后一个AJAX请求。毫无疑问,关于这件事的一切。这是预期。因此,我不要探索这个长度。然而,需要向服务器发送一个AJAX请求只取一个简单的确认消息。我觉得这是完全不必要的。这样一个确认消息之前应该显示在客户端本身的实际将请求发送给服务器。所以,我寻找一个方法在客户端本身可能通过使用JavaScript。可以这样做只是像往常一样,就像JavaScriptconfirm("Message")与Ok和Cancel按钮显示吗?我使用Primefaces 3.5。现在是4.0决赛。
最佳答案 (Best Answer)
You can keep the message in your XHTML page with the CSS style display:none and do the validation in JavaScript and if the validation fails just change the style to display:block.
你可以保持消息XHTML页面的CSS样式display:none和JavaScript验证,如果验??失败只是改变风格display:block。没有AJAX。
答案 (Answer) 2
May be simple
function is enough for you:
jQuery("confirmDeleteMultiple.p").replaceWith(...
可能是简单的对你来说是足够的功能:&script&
jQuery("confirmDeleteMultiple.p").replaceWith(...
本文翻译自StackoverFlow，英语好的童鞋可直接参考原文：jsf - Difference between rendered and visible attributes of &p:dialog& - Stack Overflow
to customize your list.
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
J it only takes a minute:
Join the Stack Overflow community to:
Ask programming questions
Answer and help your peers
Get recognized for your expertise
I am using PrimeFaces 3.2 in my project. I wanted to know what is the difference between setting the rendered attribute of a &p:dialog& as against setting the visible attribute. When should I use either of these attributes?
2,83911833
The rendered attribute is server-side and the visible attribute is client-side. The rendered attribute tells whether JSF should generate the dialog's HTML representation or not. The visible attribute tells whether HTML/CSS/JS should immediately show the dialog on browser's page load or not.
If the dialog isn't rendered, then you won't be able to display it by for example JavaScript dialogWidgetVar.show() without reloading the page or ajax-updating one of the dialog's parent components that way so that the dialog's rendered condition evaluates to true. Also the visible attribute won't have any effect if the dialog is not rendered simply because there's nothing being rendered to the resulting HTML output which could be shown/hidden by JavaScript.
If the dialog is rendered, then it is by default hidden. You can set visible to true to force it to display the dialog immediately whenever the page is opened. Or you can invoke JavaScript dialogWidgetVar.show() in some onclick or oncomplete attribute to show it.
Use the rendered attribute if you don't want to render the dialog at all, for example because it wouldn't ever be used anyway in the currently requested page composition.
648k19022912542
According to the
for those attributes, section 3.28:
rendered: Boolean value to specify the rendering of the component, when set to
false component will not be rendered [default value: TRUE]
When enabled, dialog is visible by default [default value: FALSE]
129k14144221
Your Answer
Sign up or
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Post as a guest
By posting your answer, you agree to the
Not the answer you're looking for?
Browse other questions tagged
Stack Overflow works best with JavaScript enabledPost Reply
Bookmark Topic
Data confusion in dialog after validation
Primefaces:3.3.1 or 3.2....
&!-- jsf --&com.sun.faces 2.1.2
this is my index page.this page have the datatable. In this ,I deleted some code filed.Basically be to see p:commandButton.
add p:commandButton and edit commandButton show the same dialog.
you can see this ,and this code.chinese you can ignore.
&p:dataTable var="ss" value="#{userinfoBean.list}"
id="tableId"
paginatorPosition="bottom" rowIndexVar="index" paginator="true"
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}"
currentPageReportTemplate="#{component.rowCount == 0 ? '0/0' : '{currentPage}/{totalPages}'} "
style="margin-top: 5" emptyMessage="no data" &
&f:facet name="header"&
User information
&div style="text-align: position: margin: -13px 0px 0px 0 vertical-align: middle"&
&p:commandButton value="add" icon="ui-icon ui-icon-plus"
actionListener="#{userinfoBean.resetDlg()}" update=":userdataDlgId"
oncomplete="dialogHeaderValueChange();userdataDlgVar.show();removeRedBox();"
&/f:facet&
&p:column &
&f:facet name="header"&
&h:outputText value="account" /&
&/f:facet&
&h:outputText value="#{ss.account}" /&
&/p:column&
&p:column &
&f:facet name="header"&
&h:outputText value="pwd" /&
&/f:facet&
&h:outputText value="#{ss.password}" /&
&/p:column&
&p:column &
&f:facet name="header"&
&h:outputText value="realName" /&
&/f:facet&
&h:outputText value="#{ss.realname}" /&
&/p:column&
&p:column style="text-align:width:18"&
&f:facet name="header"&
&h:outputText value="Used" /&
&/f:facet&
&h:outputText value="#{ss.usable eq 'Y'?'Y':'N' }" /&
&/p:column&
&p:column style="text-align:width:18"&
&f:facet name="header"&
&h:outputText value="for" /&
&/f:facet&
&p:commandButton
oncomplete="dialogHeaderValueChangeTwo();userdataDlgVar.show();removeRedBox();"
icon="ui-icon ui-icon-pencil" title="Edit" update=":userdataDlgId"
style="width:18height:18"&
&f:setPropertyActionListener target="#{userinfoBean.userinfo}" value="#{ss}" /&
&f:setPropertyActionListener target="#{userinfoBean.isModify}" value="true" /&
&f:setPropertyActionListener target="#{userinfoBean.sex}" value="#{ss.sex}" /&
&f:setPropertyActionListener target="#{userinfoBean.usable}" value="#{ss.usable}" /&
&/p:commandButton&
&/p:column&
&/p:dataTable&
&/p:panel&
&script type="text/javascript"&
function dialogHeaderValueChange(){
userdataDlgVar.titlebar.children('span.ui-dialog-title').html('addDialog');
function dialogHeaderValueChangeTwo(){
userdataDlgVar.titlebar.children('span.ui-dialog-title').html('editDialog');
function removeRedBox(){
$(".ui-state-error").removeClass("ui-state-error");
function myrefresh()
if(document.getElementsByClassName("ui-messages-error-summary").length!=0){
alert("havae error CSS!");
window.location.reload();
&/ui:define&
&ui:define name="dialog"&
&ui:include src="operate.xhtml"&&/ui:include&
&/ui:define&
&/ui:composition&
&ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="/jsf/html"
xmlns:f="/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="/jsf/facelets"
xmlns:c="/jstl/core"&
&p:dialog header="Js assignment" widgetVar="userdataDlgVar" showEffect="fade"
hideEffect="fade" modal="true" resizable="false" id="userdataDlgId"&
&p:ajax event="close"
oncomplete="myrefresh();"&&/p:ajax&
&h:form id="userdataFormId" prependId="false"&
&p:messages id="userdataMsgId"
&p:growl id="userdataGrowlId" life="1000" /&
&h:panelGrid columns="4"
columnClasses="column1,column2,column1,column2"&
&h:outputText value="account:" /&
&p:inputText id="in" value="#{userinfoBean.userinfo.account}" disabled="#{userinfoBean.isModify}" required="true" requiredMessage="account:not null!"&
&/p:inputText&
&h:outputText value="password:" /&
&p:inputText value="#{userinfoBean.userinfo.password}"
required="true" requiredMessage="password:not null"&
&/p:inputText&
&h:outputText value="realname:" /&
&p:inputText value="#{userinfoBean.userinfo.realname}"/&
&h:outputText value="age:" /&
&p:inputText value="#{userinfoBean.userinfo.age}"/&
&h:outputText value="email:" /&
&p:inputText value="#{userinfoBean.userinfo.email}"/&
&h:outputText value="address:" /&
&p:inputText value="#{userinfoBean.userinfo.address}" /&
&h:outputText value="usable:" /&
&p:selectOneRadio value="#{userinfoBean.usable}"
required="true" requiredMessage="usable:not null!"&
&f:selectItem itemLabel="Y" itemValue="Y" /&
&f:selectItem itemLabel="N" itemValue="N" /&
&/p:selectOneRadio&
&/h:panelGrid&
&p:spacer width="10px" height="10px"&&/p:spacer&
&div align="center"&
&p:commandButton value="modify"
icon="ui-icon ui-icon-check"
style="margin-right:5px"
rendered="#{userinfoBean.isModify}"
actionListener="#{userinfoBean.sumbitDlgData()}"
oncomplete="aboutMeRequest(xhr, status, args);"
update=":userinfoFormId,:userdataFormId"
&p:commandButton value="add"
icon="ui-icon ui-icon-check"
style="margin-right:5px"
rendered="#{!userinfoBean.isModify}"
actionListener="#{userinfoBean.sumbitDlgData()}"
oncomplete="aboutMeRequest(xhr, status, args);"
update=":userinfoFormId,:userdataFormId"
&p:commandButton type="button" value="cancel"
onclick="userdataDlgVar.hide()"
icon="ui-icon ui-icon-cancel" /&
&script type="text/javascript"&
function aboutMeRequest(xhr, status, args) {
if (args.aboutMeAddInfo == "Y") {
userdataDlgVar.hide();
&/p:dialog&
&/ui:composition&
===============================================
you can see this above code:&p:ajax event="close"
oncomplete="myrefresh();"&&/p:ajax&.
myrefresh(); is jscode,it's :
function myrefresh()
if(document.getElementsByClassName("ui-messages-error-summary").length!=0){
alert("havae error CSS!");
window.location.reload();
if dialog have uesd "ui-messages-error-summary" css,index.xhtml will reload.
Now,we don't used this JScode &p:Ajax&.and you see this images.
I click index.xhtml's addButton.
show I need dialog.Effect as shown in figure:
And I click this dialog's add button,this button is p:commandButton.
Because some textbox have ==& required="true" requiredMessage="account:not null!".
So..Validation and page show error ..Effect as shown in figure:
OK..now,we click this dialog cancel button.
And ,we return index.xhtml.and click index's editButton.
you can see this,page data is error.
The correct data should be like this
lase: If you click first "editButton", validation and page show error,To continue to open the dialog.Whether to add or edit,the data will error.
Bean code :
package org.credo.system.
import java.io.S
import java.util.ArrayL
import java.util.L
import java.util.M
import javax.annotation.PostC
import javax.annotation.R
import javax.faces.application.FacesM
import javax.faces.context.FacesC
import org.credo.model.U
import org.credo.system.service.UserinfoS
import org.primefaces.context.RequestC
import org.slf4j.L
import org.slf4j.LoggerF
import org.springframework.context.annotation.S
import org.springframework.stereotype.C
@SuppressWarnings({"unchecked"})
@Controller
@Scope("view")
public class UserinfoBean implements Serializable{
protected Logger log = LoggerFactory.getLogger(getClass());
private static final long serialVersionUID = 1L;
@Resource UserinfoService userinfoS
private String queryBuilderA
private List&Userinfo& list=new ArrayList&Userinfo&();
private Userinfo userinfo=new Userinfo();
private boolean isModify=
@PostConstruct
public void queryUserInfo(){
list=this.userinfoService.queryAll("Userinfo");
} catch (Exception e) {
e.printStackTrace();
public void sumbitDlgData(){
userinfo.setSex(sex);
userinfo.setUsable(usable);
if (isModify) {
this.userinfoService.update(userinfo);
this.userinfoService.insert(userinfo);
this.isModify=
} catch (Exception e) {
e.printStackTrace();
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "MySQL ERROR!", ""));
queryUserInfo();
Map&String, Object& map =FacesContext.getCurrentInstance().getExternalContext().getSessionMap();
Userinfo userinfoSession=(Userinfo) map.get("userinfo");
if(userinfo.getId()==userinfoSession.getId()){
map.put("userinfo", userinfo);
FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("successful!", ""));
RequestContext.getCurrentInstance().addCallbackParam("aboutMeAddInfo", "Y");
public void resetDlg(){
this.userinfo=
this.userinfo=new Userinfo();
this.isModify=
this.usable="";
public List&Userinfo& getList() {
public void setList(List&Userinfo& list) {
this.list =
public Userinfo getUserinfo() {
public void setUserinfo(Userinfo userinfo) {
this.userinfo =
public String getQueryBuilderAccount() {
return queryBuilderA
public void setQueryBuilderAccount(String queryBuilderAccount) {
this.queryBuilderAccount = queryBuilderA
public boolean getIsModify() {
return isM
public void setIsModify(boolean isModify) {
this.isModify = isM
public String getSex() {
public void setSex(String sex) {
this.sex =
public String getUsable() {
public void setUsable(String usable) {
this.usable =
package org.credo.system.
import org.credo.base.service.BaseS
import org.springframework.stereotype.S
import org.springframework.transaction.annotation.T
@SuppressWarnings("rawtypes")
@Transactional
public class UserinfoService extends BaseService{
//BaseService have CRUD.
I hava no ideal.so i write some javaScript code for this problem,
function myrefresh()
/* alert("1:"+document.getElementsByClassName("ui-messages-error-summary")); */
if(document.getElementsByClassName("ui-messages-error-summary").length!=0){
alert("havae error CSS!");
window.location.reload();
But,I think is bad.........
thanks for you help.
this problem
resolve. url:http://forum.primefaces.org/viewtopic.php?f=3&t=23682
tandraschko
Expert Member
Posts: 1172
Joined: 03 Dec
Re: &I changed topic&Data confusion in dialog after validati
This isn't a bug and we have a more flexible component in primefaces-extensions:
if you try it,maybe
Post Reply
Bookmark Topic
Similar Threads}