Creating message boxes

Problem

How to create a message box?

Solution

Common

DHTMLX Touch simplified creating alert, confirm and notice messages by means of 3 commands:

  1. dhx.alert().
  2. dhx.confirm().
  3. dhx.notice().

The commands in question can be used in two ways:

  1. Full form (contains several available parameters. Non-specified parameters take default values).
  2. Short form (contains just text of a message - implicit usage of the parameter 'message'. The other parameters take default values).

Please note, created windows:

  • Not modal (don't prevent the workflow on the application parent window).
  • Exist in the only copy (when a new window appears - the previous one disappears).

Related sample: 08_window/07_confirm.html
Related sample: 08_window/08_alert.html
Related sample: 08_window/09_notice.html

Advanced

buttons customizing

As buttons used in confirm and alert windows are standard controls (button), you have a possibility to define the appropriate attributes for them.
To define the desired attribute you should refer to button as:

  • Ok button (confirm window) - 'dhx_confirm_ok' (hardcoded name).
  • Cancel button (confirm window) - 'dhx_confirm_cancel' (hardcoded name).
  • Ok button (alert window) - 'dhx_alert_ok' (hardcoded name).
$$('dhx_confirm_ok').define('inputWidth', 100);
$$('dhx_confirm_ok').render();

changing the text of message box

You can change text of message box (parameter message) out of constructor. This can be achieved in the following way:

dhx.confirm({ message: "Are you sure?", id:"winId"})
 
$$('dhx_confirm_message').define('label',"new message");
$$('winId').refresh();
 
//or
dhx.alert({ message: "Warning!", id:"winId"})
 
$$('dhx_alert_message').define('label',"new message");
$$('winId').refresh();

dhx.alert()

By calling this command you create an alert box.

Parameters

  • title - (string) the text of the header.
  • message - (string) the text of the window body.
  • width - (integer) the width of the window (the default value - 300).
  • height - (integer) the height of the window (the default value - 200).
  • labelOk - (string) the text of 'Ok' button.
  • position - (right, center or left ) the alignment of the window's body text (the default value - 'center').
  • details - (any) the content of the parameter is passed to callback function as the second parameter (optional).
  • callback - (function) contains code that will be called on button click. Can get 2 parameters:
    • 'true' as the first parameter.
    • 'details' parameter as the second (optional).

Full form

dhx.alert({
		title: "Close",
		message: "You can't close this window!",
		callback: someFunction
})

Short form

dhx.alert("AlertText");

dhx.confirm()

By calling this command you create a confirm box.

Parameters

  • title - (string) the text of the header.
  • message - (string) the text of the window body.
  • details - (any) the content of the parameter is passed to callback function as the second parameter (optional).
  • callback - (function) contains code that will be called on button click. Can get 2 parameters:
    • 'true' or 'false' as the first parameter (subject to the clicked button).
    • 'details' parameter as the second (optional).
  • labelCancel - (string) the text of 'Cancel' button.
  • labelOk - (string) the text of 'Ok' button.

Full form

dhx.confirm({
		title: "Close",
		message: "Are you sure you want to do it?",
		callback: someFunction
});

Short form

dhx.confirm("ConfirmText");

dhx.notice()

By calling this command you create a notice box.

Parameters

  • message - (string) the text of the window body.
  • css - (string) the name of the appropriate css class.
  • width - (integer) the width of the window (the default value - 160).
  • height - (integer) the height of the window (the default value - 60).
  • delay - (integer) the time delay in milliseconds (the default value - 3500).
  • top - (integer) the top offset of the text (the default value - 9).
  • right - (integer) the right offset of the text (the default value - 9).

Full form

dhx.notice({
		message: "Sorry, an error has occured!",
		css:"error",
		delay:2000
})

Short form

dhx.notice("Sorry, an error has occured!");

Related sample: 08_window/07_confirm.html
Related sample: 08_window/08_alert.html
Related sample: 08_window/09_notice.html