Login Register Help
API Documentation
Choose a stylesheet:

Constructordijit.Dialog

Pops up a modal dialog window, blocking access to the screen and also graying out the screen Dialog is extended from ContentPane so it supports all the same parameters (href, etc.)

Usage

var foo=new dijit.Dialog(params: Object?, srcNodeRef: DomNode|String); (view source)
parametertypedescription
paramsObjectOptional.
srcNodeRefDomNode|String 

Examples

Example 1

<div dojoType="dijit.Dialog" href="test.html"></div>

Example 2

var foo = new dijit.Dialog({ title: "test dialog", content: "test content" };
dojo.body().appendChild(foo.domNode);
foo.startup();
dijit._Contained (from dijit.layout.ContentPane), dijit._Container (from dijit.layout.ContentPane), dijit._Templated, dijit.form._FormMixin, dijit._DialogMixin

Jump to PropertiesFunctionsBack to top

FunctionaddChild(child: Widget, insertIndex: Integer?)
Makes the given widget a child of this widget.
Functionattr(name: String|Object, value: Object?)
Defined by dijit._Widget
Set or get properties on a widget instance.
Construct the UI for this widget from a template, setting this.domNode.
Cancels a inflight download of content
Functionconnect(obj: Object|null, event: String|Function, method: String|Function)
Defined by dijit._Widget
Connects specified obj/event to specified method of this object and registers for disconnect() on widget destroy.
Functioncreate(params: Object?, srcNodeRef: DomNode|String?)
Defined by dijit._Widget
Kick off the life-cycle of a widget
Functiondestroy(preserveDom: Boolean)
Overrides dijit._Widget
Destroy this widget, but not its descendants. Will, however, destroy internal widgets such as those used within a template.
Destroy all the widgets inside the ContentPane and empty containerNode
FunctiondestroyRecursive(preserveDom: Boolean)
Destroy the ContentPane and it's contents
FunctiondestroyRendering(preserveDom: Boolean?)
Defined by dijit._Widget
Destroys the DOM nodes associated with this widget
Functiondisconnect(handles: Object)
Defined by dijit._Widget
Disconnects handle created by this.connect. Also removes handle from this widget's list of connects
Functionexecute(formContents: Object)
Defined by dijit._DialogMixin
User defined function to do stuff when the user hits the submit button
Returns array of children widgets.
FunctiongetDescendants(directOnly: Boolean, outAry: DomNode[]?)
Defined by dijit._Widget
Returns all the widgets contained by this, i.e., all widgets underneath this.containerNode.
Defined by dijit._Container
Gets the index of the child in this container or -1 if not found
Defined by dijit._Container
Returns true if widget has children, i.e. if this.containerNode contains something.
Functionhide()
Hide the dialog
Defined by dijit._Widget
Return true if this widget can currently be focused and false if not
Defined by dijit._Widget
Checks the page for text direction
Position the Dialog and the underlay
Defined by dijit._Widget
stub function. Override or connect to this method to receive notifications for when the widget moves out of focus.
Defined by dijit._DialogMixin
Callback when user has canceled dialog, to notify container (user shouldn't override)
FunctiononClick(event: mouse)
Defined by dijit._Widget
Connect to this function to receive notifications of mouse click events.
Defined by dijit._Widget
Callback if someone tries to close the child, child will be closed if func returns true
called on DOM faults, require fault etc in content default is to display errormessage inside pane
FunctiononDblClick(event: mouse)
Defined by dijit._Widget
Connect to this function to receive notifications of mouse double click events.
called when download is finished
Called when download error occurs, default is to display errormessage inside pane. Overide function to change that. The string returned by this function will be the html that tells the user a error happend
called before download starts the string returned by this function will be the html that tells the user we are loading something override with your own function if you want to change text
Defined by dijit._DialogMixin
Callback when user is about to execute dialog, to notify container (user shouldn't override)
Defined by dijit._Widget
stub function. Override or connect to this method to receive notifications for when the widget moves into focus.
FunctiononKeyDown(event: key)
Defined by dijit._Widget
Connect to this function to receive notifications of keys being pressed down.
FunctiononKeyPress(event: key)
Defined by dijit._Widget
Connect to this function to receive notifications of printable keys being typed.
FunctiononKeyUp(event: key)
Defined by dijit._Widget
Connect to this function to receive notifications of keys being released.
FunctiononLoad(data)
when href is specified we need to reposition the dialog after the data is loaded
Defined by dijit._Widget
Connect to this function to receive notifications of when the mouse button is pressed down.
Defined by dijit._Widget
Connect to this function to receive notifications of when the mouse moves onto this widget.
Defined by dijit._Widget
Connect to this function to receive notifications of when the mouse moves off of this widget.
Defined by dijit._Widget
Connect to this function to receive notifications of when the mouse moves over nodes contained within this widget.
FunctiononMouseOut(event: mouse)
Defined by dijit._Widget
Connect to this function to receive notifications of when the mouse moves off of nodes contained within this widget.
Defined by dijit._Widget
Connect to this function to receive notifications of when the mouse moves onto nodes contained within this widget.
FunctiononMouseUp(event: mouse)
Defined by dijit._Widget
Connect to this function to receive notifications of when the mouse button is released.
Event hook, is called before old content is cleared
FunctionplaceAt(reference: String|DomNode|_Widget, position: String?|Integer?)
Defined by dijit._Widget
Place this widget's domNode reference somewhere in the DOM based on standard dojo.place conventions, or passing a Widget reference that contains and addChild member.
Called after a widget's dom has been setup
Called after the parameters to the widget have been read-in, but before the widget template is instantiated. Especially useful to set properties that are referenced in the widget template.
Functionpostscript(params: Object?, srcNodeRef: DomNode|String)
Defined by dijit._Widget
kicks off widget instantiation, see create() for details.
[Re]download contents of href and display
Defined by dijit._Container
Removes the passed widget instance from this widget but does not destroy it. You can also pass in an integer indicating the index within the container to remove
FunctionsetAttribute(attr: String, value: anything)
Defined by dijit._Widget
Functionshow()
display the dialog
Called after a widget's children, and other widgets on the page, have been created. Provides an opportunity to manipulate any children before they are displayed. This is useful for composite widgets that need to control or layout sub-widgets. Many layout widgets can use this as a wiring phase.
Defined by dijit._Widget
returns a string that represents the widget. When a widget is cast to a string, this method will be used to generate the output. Currently, it does not implement any sort of reversable serialization.
Overrides dijit._Widget
stub function. Override to implement custom widget tear-down behavior.
Defined by dijit._Widget
Step during widget creation to copy all widget attributes to the DOM as per attributeMap and _setXXXAttr functions.
Defined by dijit._Templated
Iterate through the template and attach functions and nodes accordingly.
Function_attrToDom(attr: String, value: String)
Defined by dijit._Widget
Reflect a widget attribute (title, tabIndex, duration etc.) to the widget DOM, as specified in attributeMap.
Test if we have exactly one visible widget as a child, and if so assume that we are a container for that widget, and should propogate startup() and resize() calls to it. Skips over things like data stores since they aren't visible.
Called after dragging the Dialog. Calculates the relative offset of the Dialog in relation to the viewport.
Defined by dijit._Templated
relocate source contents to templated container node this.containerNode must be able to receive children, or exceptions will be thrown
Defined by dijit._Widget
helper function for Widget.attr() cache attribute name values so we don't do the string ops every time
hook to make attr("content") work
Function_getDescendantsHelper(directOnly: Boolean, outAry: DomNode[], root: DomNode)
Defined by dijit._Widget
Search subtree under root, putting found widgets in outAry
Function_getFocusItems(dialogNode: Node)
Defined by dijit._DialogMixin
Defined by dijit._Container
Get the next or previous widget sibling of child
returns true if the content is currently shown
Since I am a Container widget, each of my children expects me to call resize() or layout() on them.
Call this to load href contents if necessary.
Defined by dijit._Widget
Defined by dijit._Widget
Called when someone connects to one of my handlers. "Turn on" that handler if it isn't active yet.
Function_onError(type, err, consoleText)
Defined by dijit._Widget
Function_onKey(evt: Event)
handles the keyboard events for accessibility reasons
This is called whenever new content is being loaded
Called when the ContentPane is made visible
Defined by dijit._DialogMixin
callback when user hits submit button
This is called whenever the content is being unloaded
Position modal dialog in the viewport. If no relative offset in the viewport has been determined (by dragging, for instance), center the node. Otherwise, use the Dialog's stored relative offset, and position the node to top: left: values based on the viewport.
Call resize() on each of my child layout widgets, either now (if I'm currently visible) or when I become visible
Function_setContent(cont, isFakeContent)
Insert the content into the container node
Hook to make attr("content", ...) work. Replaces old content with data content, include style classes from old content
Hook so attr("href", ...) works.
stuff we need to do before showing the Dialog for the first time (but we defer it until right beforehand, for performance reasons)
Make sure the dialog is small enough to fit in viewport.
Defined by dijit._Templated

Jump to FunctionsPropertiesBack to top

attributeMap sets up a "binding" between attributes (aka properties) of the widget and the widget's DOM. Changes to widget attributes listed in attributeMap will be reflected into the DOM. For example, calling attr('title', 'hello') on a TitlePane will automatically cause the TitlePane's DOM to update with the new title. attributeMap is a hash where the key is an attribute of the widget, and the value reflects a binding to a: - DOM node attribute focus: {node: "focusNode", type: "attribute"} Maps this.focus to this.focusNode.focus - DOM node innerHTML title: { node: "titleNode", type: "innerHTML" } Maps this.title to this.titleNode.innerHTML - DOM node CSS class myClass: { node: "domNode", type: "class" } Maps this.myClass to this.domNode.className If the value is an array, then each element in the array matches one of the formats of the above list. There are also some shorthands for backwards compatibility: - string --> { node: string, type: "attribute" }, for example: "focusNode" ---> { node: "focusNode", type: "attribute" } - "" --> { node: "domNode", type: "attribute" }
A Toggle to modify the default focus behavior of a Dialog, which is to focus on the first dialog element after opening the dialog. False will disable autofocusing. Default: true
Defined by dijit._Widget
HTML class attribute
Designates where children of the source dom node will be placed. "Children" in this case refers to both dom nodes and widgets. For example, for myWidget: <div dojoType=myWidget> <b> here's a plain dom node <span dojoType=subWidget>and a widget</span> <i> and another plain dom node </i> </div> containerNode would point to: <b> here's a plain dom node <span dojoType=subWidget>and a widget</span> <i> and another plain dom node </i> In templated widgets, "containerNode" is set via a dojoAttachPoint assignment. containerNode must be defined for any widget that accepts innerHTML (like ContentPane or BorderContainer or even Button), and conversely is null for widgets that don't, like TextBox.
The innerHTML of the ContentPane. Note that the initialization parameter / argument to attr("content", ...) can be a String, DomNode, Nodelist, or widget.
Defined by dijit._Widget
Unsupported by Dijit, but here for completeness. Dijit only supports setting text direction on the entire document. Bi-directional support, as defined by the [HTML DIR](http://www.w3.org/TR/html401/struct/dirlang.html#adef-dir) attribute. Either left-to-right "ltr" or right-to-left "rtl".
Don't change this parameter from the default value. This ContentPane parameter doesn't make sense for Dialog, since Dialog is never a child of a layout container, nor can you specify the size of Dialog in order to control the size of an inner widget.
This is our visible representation of the widget! Other DOM Nodes may by assigned to other properties, usually through the template system's dojoAttachPoint syntax, but the domNode property is the canonical "top level" node in widget UI.
Toggles the moveable aspect of the Dialog. If true, Dialog can be moved by it's title. If false it will remain centered in the viewport.
The time in milliseconds it takes the dialog to fade in and out
Message that shows if an error occurs
Extract visible content from inside of <body> .... </body>
Defined by dijit._Widget
a unique, opaque ID string that can be assigned by users or by the system. If the developer passes an ID which is known not to be unique, the specified ID is ignored and the system-generated ID is used instead.
Parameters to pass to xhrGet() request, for example: <div dojoType="dijit.layout.ContentPane" href="./bar" ioArgs="{timeout: 500}">
True if the ContentPane has data in it, either specified during initialization (via href or inline content), or set via attr('content', ...) / attr('href', ...) False if it doesn't have any content, or if ContentPane is still in the process of downloading href.
Defined by dijit._Widget
Rarely used. Overrides the default Dojo locale used to render this widget, as defined by the [HTML LANG](http://www.w3.org/TR/html401/struct/dirlang.html#adef-lang) attribute. Value must be among the list of locales specified during by the Dojo bootstrap, formatted according to [RFC 3066](http://www.ietf.org/rfc/rfc3066.txt) (like en-us).
Message that shows while downloading
is True or False depending on state of dialog
parse content and create the widgets, if any
Force load of data even if pane is hidden.
Cache content retreived externally
A Toggle to modify the default focus behavior of a Dialog, which is to re-focus the element which had focus before being opened. False will disable refocusing. Default: true
Refresh (re-download) content when pane goes from hidden to shown
Defined by dijit._Widget
pointer to original dom node
Defined by dijit._Widget
HTML style attribute
Overrides dijit._Templated
Path to template (HTML file) for this widget relative to dojo.baseUrl
Defined by dijit._Widget
Defined by dijit._Templated
should we parse the template to find widgets that might be declared in markup inside it? false by default.
Defined by dijit._Widget
attributeMap addendum for event handlers that should be connected only on first use
The pointer to the first focusable node in the dialog
The pointer to which node has focus prior to our dialog

Navigating the Dojo API Tool

There are several different methods of navigating through the object structure of the Dojo Toolkit:

  • Use the namespace list (to the left). The simplest method would be to use the list of namespaces defined by the Dojo Toolkit, on the left side of every page.
  • Drill-down from where you are. The API Tool was designed to give you as much information via drill-down as possible. Everything defined in an object can be clicked on, for more information.
  • Use the search. At the top of the namespace list to the left is a search box; type in the terms you are looking for, and you will be taken to a result page that spans the entire toolkit.
Move to different sections

In addition, objects with large numbers of contained types have a simple way of jumping to sections on a page; simply look at the right side of any heading, and you will see a set of quick navigation icons. Clicking a type icon will take you to that section; clicking the up arrow icon will return you to the top of the page.

Inherited and private members

Show or hide variable types

The Dojo API Tool will show the full ancestry of an object's members (including how that member was defined and whether or not it overrides an original). By default, all members of an object that are inherited are shown with the object's API listing, and all private members are hidden.

To toggle either inherited or private members, look just beneath the breadcrumb bar (above the name of the object you are viewing) and click the appropriate link.

Switching styles

Choose a style

The Dojo API Tool was designed with several themes in mind; we know that some people prefer light on dark, while others might prefer dark on light. With this in mind, two themes (Noir and Blanc) are currently available, with more on the way.

To switch visual styles, click on the theme you want to use, near the top right corner of the page. The API Tool will remember which style you prefer and automatically load that theme on subsequent visits.

Key/Legend

Namespace Namespaces
A namespace in Dojo parlance is an object/property bag that can contain almost anything: constructors, methods, properties, etc. Usually is expressly defined to serve a particular purpose; for example, dojo.date.locale is a namespace defined to deal with locale-specific date handling.
Constructor Constructors
A constructor is a function designed to create instances of objects. With the Dojo Toolkit, there are two ways of creating constructors: the "old school" way (i.e. defining a function with the this keyword in the body) or using dojo.declare.
Singleton Singletons
A singleton is a constructor that is defined and then immediately executed so that only one instance may ever exist during an application's lifetime. Usually this is done to capture some information in the environment, or to ensure a set of private variables that cannot be accessed from outside of the declaration. Examples include dojox.encoding.crypto.Blowfish.

Data Types

Array Array
Arrays are ordered lists, native to Javascript.
Boolean Boolean
Native data type representing a simple "true/false" value.
Date Date
Native Javascript data type to handle common date and time representations.
DOMNode Node
An object that represents any kind of element being referenced/used by Javascript code. Note that the type of element is not dictated by this data type; only that it is a node of some sort.