Skip to content

DialogTag

Jump to bottom Edit New page
Johannes Geppert edited this page Jul 6, 2015 · 2 revisions

Introduction

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

For custom themes for the Dialog take look at the head tag.

Samples

Dialog with local static content

<%@ 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>

Dialog with content from AJAX action call

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

Remote Dialog which opens on link click

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

Modal Dialog with remote content and effects

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

Dialog with buttons in the footer

<%@ 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
appendTo false body false String Which element the dialog should be appended to. Regardless of the value set, the overlay for modal dialogs will always be appended to the body and cover the entire window.
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.
errorPosition false false String Define error position of form element (top|bottom)
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
onAfterValidationTopics false false String A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
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
requiredLabel 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.

Struts Project Page - Showcase - Showcase Grid - Download - Developer Blog - Developer News

Clone this wiki locally