Difference between rendered and visible attributes of <p:dialog>

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?

Solution 1:

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.

Solution 2:

According to the documentation 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]
visible:  When enabled, dialog is visible by default [default value: FALSE]