My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for

DialogTag  
The Dialog widget renders a HTML Dialog with local or remote content.
Phase-Implementation
Updated Feb 8, 2011 by johgep

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
Powered by Google Project Hosting