Form Elements

Tasks

Links

Developer Guide

DialogTag

The Dialog widget renders a HTML Dialog with local or remote content.
Phase-Implementation

Updated Feb 8, 2011 by johgep

Introduction
Samples

Local Dialog
Remote Dialog
Remote Dialog open on Click
Modal Remote Dialog with Effects
Dialog with Buttons

Topics
Attributes

Introduction

This tag generates an Dialog that can load content into the Dialog using an AJAX call.

For custom themes for the Dialog take look at the Head Tag.

Samples

Local Dialog

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true"/>
  </head>
  <body>
    <sj:dialog id="mydialog1" title="Local Dialog">
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
   </sj:dialog>
  </body>
</html>

Remote Dialog

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true"/>
  </head>
  <body>
    <s:url id="remoteurl" action="myremoteaction"/>
    <sj:dialog id="mydialog2" href="%{remoteurl}" title="Remote Dialog"/>
  </body>
</html>

Remote Dialog open on Click

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true"/>
  </head>
  <body>
    <s:url id="remoteurl" action="myremoteaction"/>
    <sj:dialog id="mydialog3" href="%{remoteurl}" title="Remote Dialog open on Click" autoOpen="false"/>
   <sj:a openDialog="mydialog3">Open Dialog</sj:a>
  </body>
</html>

Modal Remote Dialog with Effects

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true"/>
  </head>
  <body>
    <s:url id="remoteurl" action="myremoteaction"/>
    <sj:dialog id="mydialog4" href="%{remoteurl}" title="Modal Remote Dialog with Effects" modal="true" showEffect="slide" hideEffect="explode"/>
  </body>
</html>

Dialog with Buttons

<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<html>
  <head>
    <sj:head jqueryui="true"/>
     <script type="text/javascript">
      function okButton(){
       alert('OK Button pressed!');
     };
     function cancelButton(){
      alert('Cancel Button pressed!');
      $('#mybuttondialog').dialog('close');
     };
   </script>
  </head>
  <body>
    <sj:dialog
    	id="mybuttondialog"
    	buttons="{
    		'OK':function() { okButton(); },
    		'Cancel':function() { cancelButton(); }
    		}"
    	autoOpen="false"
    	modal="true"
    	title="Dialog with Buttons"
    >
     Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </sj:dialog>
  </body>
</html>

Topics

Topic	Event	Parameter
onOpenTopics	open	event.originalEvent.event, event.originalEvent.ui
onCloseTopics	close	event.originalEvent.event, event.originalEvent.ui
onFocusTopics	focus	event.originalEvent.event, event.originalEvent.ui
onBeforeCloseTopics	beforeclose	event.originalEvent.event, event.originalEvent.ui
onChangeTopics	drag	event.originalEvent.event, event.originalEvent.ui

Attributes

Name

Required

Default

Evaluated

Type

Description

accesskey false false String Set the html accesskey attribute on rendered html element

autoOpen false true false Boolean When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog('open') is called on it.

buttons false false String Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked.

closeOnEscape false true false Boolean Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.

closeTopics false false String A comma delimited list of topics to close the dialog.

cssClass false false String The css class to use for element

cssErrorClass false false String The css error class to use for element

cssErrorStyle false false String The css error style definitions for element to use

cssStyle false false String The css style definitions for element to use

dataType false false String Type of the result. e.g. html, xml, text, json, ...

destroyTopics false false String A comma delimited list of topics to destroy the dialog.

dialogClass false false String The specified class name(s) will be added to the dialog, for additional theming.

disabled false false String Set the html disabled attribute on rendered html element

draggable false true false Boolean If set to true, the dialog will be draggable will be draggable by the titlebar.

effect false none false String Perform a effect on the elements specified in the 'targets' attribute. e.g. bounce, highlight, pulsate, shake, size or transfer. See more details at http://docs.jquery.com/UI/Effects

effectDuration false 2000 false String Duration of effect in milliseconds. Only valid if 'effect' attribute is set

effectMode false none false String The Effect Mode. show, hide, toggle, none

effectOptions false false String jQuery options for effect, eg 'color : #aaaaaa' for the highlight effect or 'times : 3' for the bounce effect. Only valid if 'effect' attribute is set. See more details at http://docs.jquery.com/UI/Effects

errorElementId false false false String This should provide the id of the element into which the error text will be placed when an error ocurrs loading the container. If 'errorTest' is provided, that wil be used, otherwise the ajax error message text wil be used.

errorText false false false String The text to be displayed on load error. If 'errorElement' is provided, this will display the error in the elemtn (if existing), if not, it will display the error as the contents of this container

formIds false false String Comma delimited list of form ids for which to serialize all fields during submission when this element is clicked (if multiple forms have overlapping element names, it is indeterminate which will be used)

height false false String The height of the dialog, in pixels.

hideEffect false false String The effect to be used when the dialog is closed. Values are slide, scale, blind, clip, puff, explode, fold and drop. Default: none

href false false String The url to be use when this element is clicked

id false false String HTML id attribute

indicator false false String If loading content into a target, Id of element that will be displayed during loading and hidden afterwards (will override settings for the target container)

javascriptTooltip false false false Boolean Use JavaScript to generate tooltips

key false false String Set the key (name, value, label) for this particular component

label false false String Label expression used for rendering an element specific label

labelSeparator false : false String String that will be appended to the label

labelposition false false String Define label position of form element (top/left)

listenTopics false false String The comma separated list 'listenTopics' is the list of topic names that is used to trigger a request.

loadingText false false String If loading content into a target, The text to be displayed during load (will be shown if any provided, will override settings for the target container)

maxHeight false false String The maximum height to which the dialog can be resized, in pixels.

maxWidth false false String The maximum width to which the dialog can be resized, in pixels.

minHeight false false String The minimum height to which the dialog can be resized, in pixels.

minWidth false false String The minimum width to which the dialog can be resized, in pixels.

modal false false String If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements. Default: false

name false false String The name to set for element

onAlwaysTopics false false String A comma delimited list of topics that published always

onBeforeCloseTopics false false String A comma delimited list of topics that published befor dialog is closed.

onBeforeTopics false false String Topics that are published before a load

onBlurTopics false false String A comma delimited list of topics that published when the element is blured

onChangeTopics false false String A comma delimited list of topics that published when the element changed

onCloseTopics false false String A comma delimited list of topics that published when dialog is closed.

onCompleteTopics false false String A comma delimited list of topics that published when the element ajax request is completed (will override settings for a target container if provided)

onDisableTopics false false String A comma delimited list of topics that published when the element disabled

onEffectCompleteTopics false false String A comma delimited list of topics that published when an effect is completed

onEnableTopics false false String A comma delimited list of topics that published when the element is enabled

onErrorTopics false false String A comma delimited list of topics that published when the element ajax request returns an error (will override settings for a target container if provided)

onFocusTopics false false String A comma delimited list of topics that published when dialog is focused.

onOpenTopics false false String A comma delimited list of topics that published when dialog is opened.

onSuccessTopics false false String A comma delimited list of topics that published when the element ajax request is completed successfully (will override settings for a target container if provided)

onblur false false String Set the html onblur attribute on rendered html element

onchange false false String Set the html onchange attribute on rendered html element

onclick false false String Set the html onclick attribute on rendered html element

ondblclick false false String Set the html ondblclick attribute on rendered html element

onfocus false false String Set the html onfocus attribute on rendered html element

onkeydown false false String Set the html onkeydown attribute on rendered html element

onkeypress false false String Set the html onkeypress attribute on rendered html element

onkeyup false false String Set the html onkeyup attribute on rendered html element

onmousedown false false String Set the html onmousedown attribute on rendered html element

onmousemove false false String Set the html onmousemove attribute on rendered html element

onmouseout false false String Set the html onmouseout attribute on rendered html element

onmouseover false false String Set the html onmouseover attribute on rendered html element

onmouseup false false String Set the html onmouseup attribute on rendered html element

onselect false false String Set the html onselect attribute on rendered html element

openTemplate false false String Set template to use for opening the rendered html.

openTopics false false String A comma delimited list of topics to open the dialog.

overlayColor false false String Overlay color when modal is true. e.g. #000

overlayOpacity false false String Overlay opacity when modal is true. e.g. 0.7

position false center false String Specifies where the dialog should be displayed. Possible values: 'center', 'left', 'right', 'top', 'bottom', or an array containing a coordinate pair (in pixel offset from top left of viewport) or the possible string values (e.g. ['right','top'] for top right corner). Default: 'center'

requestType false POST false String Type of the AJAX Request. POST, GET, PUT

required false false false Boolean If set to true, the rendered element will indicate that input is required

requiredposition false false String Define required position of required form element (left|right)

resizable false true false Boolean If set to true, the dialog will be resizeable.

showEffect false false String The effect to be used when the dialog is opened. Values are slide, scale, blind, clip, puff, explode, fold and drop. Default: none

tabindex false false String Set the html tabindex attribute on rendered html element

targets false false String A comma separated list of ids of container elements to load with the contents from the result of this request

template false false String The template (other than default) to use for rendering the element

templateDir false false String The template directory.

timeout false 3000 false Integer jQuery options for timeout. Default is 3000

title false false String Specifies the title of the dialog. The title can also be specified by the title attribute on the dialog source element.

tooltip false false String Set the tooltip of this particular component

tooltipConfig false false String Deprecated. Use individual tooltip configuration attributes instead.

tooltipCssClass false StrutsTTClassic false String CSS class applied to JavaScrip tooltips

tooltipDelay false Classic false String Delay in milliseconds, before showing JavaScript tooltips

tooltipIconPath false false String Icon path used for image that will have the tooltip

value false false String Preset the value of input element.

width false false String The width of the dialog, in pixels.

zindex false false String The starting z-index for the dialog. Default: 1000

Comment by tapas.fr...@gmail.com, Feb 19, 2011

Hi All, I am facing a problem like when my page loads it shows the dialogs for a few seconds. Then it hides and when i click to open it works fine. What i have to do to completely load modal in background? Any suggestion will be appreciated.

Comment by rajpootu...@gmail.com, Apr 2, 2011

Hi How can i hide title bar of a dialog pls tell me.

Comment by johnboye...@gmail.com, May 4, 2011

@ tapas.fr… set autoOpen=false

Comment by mohanaka...@gmail.com, Jul 5, 2011

how can we call the function on close on Dialog box?

Comment by rajaseth...@gmail.com, Jul 15, 2011

If I give a tabbedpanel as local content of a dialog tag, all the tabs are duplicated when the dialog opens. To avoid this bug, I had to use sj:dialog with remote content only. This is a really annoying bug, I am trying to reduce repeated server trips for each tab click. Please look into this or suggest a possible local fix. Thanks.

Comment by rajilda...@gmail.com, Aug 9, 2011

I want to display customized text in dailog. I want to replace the text in dailog via java script. Is it possible?

Comment by Sirjhs...@gmail.com, Aug 28, 2011

Hello. is this library compatible with mobile deveices?

Comment by hailiang...@gmail.com, Sep 25, 2011

hello,guys. how to use the "timeout" option? after a while google for this manual,I found no valuable idea to use it with Struts2-jquery-plugin.

Comment by stefaan....@gmail.com, Oct 20, 2011

I'm using the targets attribute targets="resultDialog" The dialog calls a remote URL

In the jsp I've foreseen a DIV-sectiong <div id="resultDialog"></div>

When submitting the form of the remote URL, it shows the result in the whole page, and not in the calling page in the specified DIV

Comment by coolestr...@gmail.com, Nov 15, 2011

how can i pass parameters to the action that fetches the content of the dialog?? which is dynamic, i.e onclick of different link i want to pass different parameters..??

Comment by strept...@gmail.com, Nov 28, 2011

onOpenTopics seems to be broken in the latest release (3.2.0)...

Comment by irfan.ba...@gmail.com, Nov 30, 2011

How we can set the dialog title dynamically? OR how we can set dialog title from properties file for i18n?

Comment by utkarsh....@gmail.com, Jan 10, 2012

How can we open Dialog over a Modal Window already open

Comment by adityaba...@gmail.com, Jan 11, 2012

I have this weird issues with dialog. I have a page with table and each row has a link. On clicking this link dialog opens details about that record is opened in the dialog. The second time the dialog appears to be trimmed. and if i move the dialog on the page its starts to trim from below. Wondering if any one has run into such issue. This happens only on IE only

Comment by anupamsm...@gmail.com, Feb 7, 2012

How can I open a dialog from a javascript function? Right now I am using trigger() function of jQuery to trigger click on the link which opens the dialog, I want to do it directly

Comment by ikn...@gmail.com, Mar 15, 2012

Hello, I have a problem with the "Remote Dialog open on Click" It does not load the remote content. If I don't use the autoOpen="false" the dialog opens on page load and shows the remote content. However, If I set autoOpen="true" when I open it using the way shown in the example above it shows the dialog but does not load the content inside. It just hangs there blank

Comment by tigerswi...@gmail.com, Apr 22, 2012

Hi, I'm using a custom grid column which contains a button to open a dialog. The dialog element has a href property which points to another page. The problem is I can only show the dialog once by clicking the button in the column. Any further clicks don't work. Please help!

► Sign in to add a comment