View Source

h2. Overview

_Since 3.0_

Displays a dialog that asks users to confirm or cancel their actions.

{tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=confirmationDialogBean] of this component, complete with source code.{tip}

h2. Getting Started
{panel}
{code:xml|borderStyle=dashed} <ace:confirmationDialog widgetVar="confirmation"
modal="true"
message="This is a modal dialog"
header="Modal Dialog"
closable="true"
closeOnEscape="false">
<h:panelGrid width="100%" style="text-align: center;" columns="2" cellspacing="30">
<h:commandButton value="Yes" onclick="confirmation.hide()"/>
<h:commandButton value="No" onclick="confirmation.hide()"/>
</h:panelGrid>
</ace:confirmationDialog>
{code}
{panel}
h2. Attributes

{tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/confirmationDialog.html].{tip}
{panel}
*modal* specifies whether the document should be shielded with a partially transparent mask.
{panel}
{panel}
*draggable* allows the user to drag the dialog using its header.
{panel}
{panel}
*closable* specifies whether the dialog should have a close button in the header.
{panel}
{panel}
*closeOnEscape* specifies if dialog should be closed when escape key is pressed.
{panel}
{panel}
*header* is text for the header.
{panel}
{panel}
*message* is text to be displayed in body.
{panel}
h2. Event Listeners

None.

h2. Client Behavior Events

None.


h2. JavaScript API

h4. ICEfaces 3.x

The client side confirmation dialog object is exposed through the global variable name specified in the *widgetVar* attribute. You can use the *hide()* and *show()* methods to hide and show the confirmation dialog on the client side:
{panel}
{code:xml|borderStyle=dashed} <h:commandButton onclick="sampleDialog.show();" ... />
...
            <ace:confirmationDialog widgetVar="sampleDialog" ... >
...
            <h:commandButton onclick="sampleDialog.hide();" ... />
...
            </ace:confirmationDialog>
{code}
{panel}
h4. ICEfaces 4\+

The "widgetVar" attribute on the ACE components has been removed in ICEfaces 4 and in its place a new "ice.ace.instance()" client JavaScript object lookup API has been introduced. The reason for this change is to enable lazy-initialization of the ACE component JavaScript objects to improve runtime performance and reduce browser memory use.

{code}
widget = ice.ace.instance('frm:myDialog');{code}
To illustrate this change, see the before and after code example below.

h5. Before (ICEfaces 3 API)

{panel}
{code:xml|borderStyle=dashed}<h:commandButton id="show" value="Show Dialog" onclick="sampleDialog.show();" type="button"/>

<ace:confirmationDialog id="myDialog"
header="A sample confirmation dialog overview example"
widgetVar="sampleDialog"
width="400">
...
{code}
{panel}
h5. After (ICEfaces 4 API)
{panel}{code:xml|borderStyle=dashed}
<h:commandButton id="show" value="Show Confirmation Dialog" onclick="ice.ace.instance('myDialog').show();" type="button"/>

<ace:dialog id="myDialog"
header="A sample dialog overview example"
width="400">
...
{code}
{panel}
{tip}The _ice.ace.instance_ approach for showing confirmation dialogs requires the _full_ client id of the confirmation dialog to be specified, such as "j_idt77:qrDialog" instead of just "qrDialog". To reduce the complexity of working with complete IDs for showing/hiding confirmation dialogs it may be preferable in some cases to locate confirmation dialogs inside of forms with _<h:form prependId="false">_ specified.{tip}
h4.


h2. Keyboard and ARIA Support

The following ARIA roles are supported: dialog, button.

h2. CSS Classes

The following markup represents the basic HTML structure of the component and the CSS classes it uses.

{code:xml}<!-- Root container -->
<div>
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all [user defined classes]" style="[user defined styles]">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span class="ui-dialog-title" >Title</span>
<!-- Close button -->
<a class="ui-dialog-titlebar-close ui-corner-all"><span class="ui-icon ui-icon-closethick"></span></a>
</div>
<div class="ui-dialog-content ui-widget-content">
<p>
<span class="ui-icon ui-icon-alert"></span>
Message
</p>
<div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
<!-- Body content -->
</div>
</div>
</div>
</div>
{code}
h2. Known Issues

The following effects have been disabled due to errors or odd behaviours:

* 'pulsate' on hide for all browsers .
* 'highlight' and 'bounce' on hide for IE7 and IE8.
* 'puff' on hide for IE7.
* 'puff' and 'scale' on show for IE7.
* 'explode' on show for IE7 and IE8.

{panel}
*Dialog closes unexpectedly at the first request when having cleared the cache and pasted the URL*
This situation can occur because JSF needs to add or remove two hidden fields to the form (javax.faces.ViewState and javax.faces.ClientWindow) when loading the page in this way. The domdiff causes a full form update, and all the components inside the form are re-initialized to their original state, which in the case of the dialog is closed. This situation can be avoided by redirecting to the page where this occurs by creating a jsp file whose contents are only <% response.sendRedirect("<target-page>.jsf"); %>. This can also be avoided if the visible property is set to true in the server when the dialog is opened.
{panel}

h2. Additional Resources