Skip to end of metadata
Go to start of metadata
Displays a localised dialog box on click or hover.

Component Availability

Available:

AUI 1.0+

Usage Status:

General

Example

A simple example of an inline dialog:

Usage Guide

The AUI Dialog should be used for the following scenarios:

  • When you want to show extended information about an object that helps the user understand more about that object's state or expose additional actions for the object.
  • If you have a space-constricted area and it's good to provide expansion of the object above the page, rather than within the page.

do NOT use Dialog for these situations:

  • When your user action is primary and needs to be easily discoverable. A menu hides functionality until it is clicked.

NOTE: These are the recommended use-cases, if you have others that you feel requires a dialog please be sure to consider all other options before doing so.

The follow demonstrates the markup and javascript for instantiating an inline-dialog, for further information on options please consult the API section.

HTML

This HTML Code uses a hyperlink, however InlineDialog can be applied to any other element types as long as it has an ID.

Javascript - link to content

This javascript code binds an InlineDialog to the trigger element with id="inlineDialog". Clicking this trigger element displays a container element with id="inline-dialog-myDialog" and sets its innerHTML value to the content fetched from "dialog-content.html".

NOTE: "content.html" could have something like the following HTML:

You just need the fragment, not a whole document.

Javascript - insert content directly

You don't have to have a separate file; you can inject content directly:

API

Primary Instantiation Function

AUI Inline Dialog uses a function to attach and inline-dialog to a DOM element.

Parameters

items - The elements that will trigger the inline-dialog, use a jQuery Selector to select items.

identifier - A unique identifier for the inline-dialog.

url - The URL of the dialog contents

options - A number of different options may be passed in as an associative array, options explained below.

Default Behavior

  • If no options are changed the Inline Dialog will be default display below the trigger aligned to the left of the trigger.
  • If the dialog is drawn offscreen to the right it will be re-positioned such that it is on-screen.
  • If the dialog is drawn off-screen to the bottom it will be displayed above the trigger with the arrow flipped.
  • In all cases the arrow will be drawn in the middle of the trigger.

Advanced Usage

Passing a function instead of a URL String

You can pass a function into the url parameter of inlineDialog instead of a url string. Your function must be:

Where:

  • Contents is the div element that will contain your custom content
  • trigger is the element of your dialog trigger
  • showPopup is the function from within InlineDialog that shows the popup (your function should call this at the end)

This function will override the contents loading section in Inline-Dialog.

Quick example:

Options

To pass options into the InlineDialog function you must use an associative array:

Below is a table of options, possible values and examples of usage:

Option

Details

Examples

onHover

determines whether the inline-Dialog will show on a mouseOver or mouseClick of the trigger.
Options: true/false
Default: false

noBind

determines if the inline-Dialog will bind the event-handler to the trigger event, use this option if you wish to bind the event handler programatically at a different point.
Options: true/false
Default: false

fadeTime

determines the fade in and fade out duration of the dialog in milliseconds.
Accepts a numerical value.
Default: 100

hideDelay

determines how long (in milliseconds) the inline-dialog will stay visible for until it is hidden (if no other trigger for hiding the dialog is fired) if null is passed auto-hide is disabled for this inline-Dialog
Accepts a Numerical value.
Default: 10000 (or null)

showDelay

determines how long in milliseconds after a show trigger is fired (such as a trigger click) until the dialog is shown.
Accepts a Numerical Value
Default: 0

width

Sets how wide the inline-dialog is in pixels.
Accepts a Numerical value
Default: 300

offsetX

Sets an offset distance of the inline-dialog from the trigger element along the x-axis in pixels
Accepts a Numerical Value
Default: 0

offsetY

Sets an offset distance of the inline-dialog from the trigger element along the y-axis in pixels
Accepts a Numerical Value
Default: 10

container

The element in which the dialog itself will be appended.
Accepts a String or an element.
Default: "body"

cacheContent

determines if the contents of the dialog are cached. If set to false the contents will be reloaded everytime the dialog is shown.
Options: true/false
Default: true

hideCallback

a function that will be called after the popup has faded out.
Accepts a javascript function
Default: function(){}

initCallback

a function that will be called after the popup contents have been loaded
Accepts a javascript function
Default: function(){}

isRelativeToMouse

determines if the dialog should be shown relative to where the mouse is at the time of the event trigger (normally a click) if set to false the dialog will show aligned to the left of the trigger with the arrow showing at the center.
Options: true/false
Default: false

closeOthers

determines if all other dialogs on the screen are closed when this one is opened
Options: true/false
Default: true

responseHandler

a function that determines how the content retrieval response is handled, the default assumes that the data returned is html. The implemented function must handle the three variables: data, status, xhr and at the end return html
Accepts a javascript Function
Default: function(data, status, xhr) {
//assume data is html
return data;
}

onTop

determines if the dialog should be shown above the trigger or not. If this option is true but there is insufficient room above the trigger the inline-dialog will be flipped to display below it.
Options: true/false
Default: false

useLiveEvents

AUI supports jQuery live events. If you choose this option, AUI will bind all events on the page to the HTML body element instead of to each individual element. This means that your events can be bound to all current elements and to elements that do not yet exist. You no longer need to rebind everything on an Ajax load. This is essential on a page which has, for example, a number of user avatars that react on hover. Binding can cause a performance problem when there is a large number of such elements.
Options: true/false
Default: false

See AUI 3.1 Release Notes.

displayShadow

Instructs the InlineDialog on rendering the shadow.
Options: true/false
Default: true

See AUI 3.5 Release Notes

getArrowPath

Returns a string representation of an SVG path that will represent the arrow being drawn. This function takes one argument, positions which is the return value of the calculatePositions method.

See AUI 3.5 Release Notes

getArrowAttributes

Returns an object which has attributes to be applied to the arrow svg element.

See AUI 3.5 Release Notes

addActiveClass

Instructs the InlineDialog to add the 'active' class.
Options: true/false
Default: true

See AUI 3.5 Release Notes

calculatePositions

Allows the consumer of InlineDialog to manually determine or calculate the position that the InlineDialog should be drawn at.

See AUI 3.5 Release Notes

arrowOffsetXAs of 5.0; arrowOffsetX defines an X axis offset in pixels for placement of the arrow (default is zero).

 

persistentAs of 5.1: if persistent: true the inline dialog can only be dismissed programatically by calling .hide(). This option, ignores the 'closeOthers' option. (inline-dialogs with closeOthers set to true will not close this one) and the hideDelay option.

The options should be properties on an object in the fourth parameter:

Functions

Here is a list of functions that can be called on the DOM object returned by the Inline Dialog constructer. You can call these by assigning the constructor to a DOM object such as:

after that you can call them directly from the object (as per the table below)

Function

Description

Example

Version Available

show();

shows the inline-dialog

inlineDialog1.show();

3.0m5

hide();

hides the inline-dialog

inlineDialog1.hide();

3.0m5

refresh();

redraws the inline-dialog. Use this function when you need to add contents to the inline dialog and you need it to be redrawn after your contents are inserted

inlineDialog1.refresh();

3.0m5

  • No labels

3 Comments

  1. Anonymous

    I had some problems in JIRA 6.1.1 providing  an Integer as identifier as proposed above (Uncaught TypeError). A String identifier seems to work.

  2. Anonymous

    Hi, if I implement multiple inline dialogs in one page, i get AJAX Content loaded multiples times:

    Primary JS:

    $('.action-col').each(function(index){
                var action_btn = $(this);
                var width = AJS.$(this).attr('dialog-width') || 500;
                var ajaxurl = AJS.$(this).attr('ajax-url');
                var identifier = AJS.$(this).attr('dialog-id') || "inline-form";
                AJS.InlineDialog(AJS.$(this), identifier, ajaxurl, {width: width, cacheContent: false});
            });
    }}

     

    HTML:

    <a class="action-col" href="#" dialog-width="700" dialog-id="ce1" ajax-url="1.html">1</a>
    <a class="action-col" href="#" dialog-width="700" dialog-id="ce2" ajax-url="2.html">2</a>
    <a class="action-col" href="#" dialog-width="700" dialog-id="ce3" ajax-url="3.html">3</a>

    If I click on the first Link, 1.html get loaded one time with ajax. If I click on the second link the ajax request get loaded multiple times...