O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Examples of Using Dialog Boxes

Let’s put some dialog boxes in our script and manage them using the information in this chapter.

Opening and Closing a Dialog Box

Here, we’ll use the dialog ("open") and dialog ("close") methods (shown in bold) to add two Open and Close buttons to the page for opening and closing the dialog box:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Content of the dialog box</p>
</div>

<input id=open type=button value=Open>
<input id=close type=button value=Close>

<script>

$("div#dialog").dialog ({
  autoOpen : false
});

$("#open").click (function (event)    // Open button Treatment
{
  if ($("#dialog").dialog ("isOpen")) alert ("Already open !");
  else $("#dialog").dialog ("open");
});

$("#close").click (function (event)   // Close button Treatment
{
  if (!$("#dialog").dialog ("isOpen")) alert ("Already closed !");
  else $("#dialog").dialog ("close");
});

</script>

Initially, the dialog box is created but is not open (options.autoOpen set to false). Before opening the dialog box, we test whether it is already open with dialog ("isOpen"). We do the same for closing it.

Figure 4-5 shows the window after it is opened.

Buttons to open and close the dialog box

Figure 4-5. Buttons to open and close the dialog box

If you try to open the dialog box a second time, you will receive an alert message that says, “Already open!” (Figure 4-6).

An alert message appears when you try to open a dialog box that is already open

Figure 4-6. An alert message appears when you try to open a dialog box that is already open

Applying an Effect When Opening or Closing the Dialog Box

By default, no effect is used when opening or closing a dialog box. We can apply an effect using the show and hide options (shown in bold). In this example, the dialog box will appear by sliding from the left side of the page (slide effect) and will disappear by enlarging and reducing its opacity (puff effect):

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Content of the dialog box</p>
</div>

<script>

$("div#dialog").dialog ({
  show : "slide",
  hide : "puff"
});

</script>

Verifying the Closure of the Dialog Box

It is possible to verify the closure of a dialog box with the options.beforeclose option. This option corresponds to a method that is activated when the dialog box closes. If the method returns false, the dialog box does not close.

In this example, a confirmation message appears when the user tries to close the dialog box (Figure 4-7). The dialog box will be closed when the user clicks the OK button:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Content of the dialog box</p>
</div>

<script>

$("div#dialog").dialog ({
  beforeclose : function (event)
  {
    if (!confirm ("Close dialog ?")) return false;
  }
});

</script>
The confirmation dialog box verifies closure of the main dialog box

Figure 4-7. The confirmation dialog box verifies closure of the main dialog box

Another way to prevent the closure of the dialog box is to remove the close button. This case is treated in the next section.

Hiding the Close Button

We can prevent the closure of the dialog box by removing (hiding) the close button.

The close button is associated with an <a> link with the ui-dialog-titlebar-close CSS class. This link can be easily identified in the HTML generated by the call for dialog (options) (e.g., with Firebug). It is located in the sibling element before the contents of the dialog box (shown in bold):

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Content of the dialog box</p>
</div>

<script>

$("div#dialog").dialog ().prev ().find (".ui-dialog-titlebar-close").hide ();

</script>

This statement includes the following:

  1. We call dialog () to convert the HTML dialog box.

  2. We get the previous sibling of content with prev ().

  3. In this relationship, we look for the element with the ui-dialog-titlebar-close CSS class.

  4. We hide this element using hide ().

This must be done in the listed order. If, for example, we do not call dialog () first, the prev () instruction will not find the link in the previous element, because the HTML has not been turned into a dialog box!

As shown in Figure 4-8, the close button is not visible.

Dialog box without a close button

Figure 4-8. Dialog box without a close button

Inserting Buttons in the Dialog Box

We now want to insert buttons in the dialog box, such as Yes and No buttons in a window asking, “Would you like to close the window?” (see Figure 4-9). We can use options.buttons (shown in bold) for this.

Users can close the window only by clicking the Yes button—the standard close button has been removed:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Would you like to close the dialog box?</p>
</div>

<script>

$("div#dialog").dialog ({
  buttons : {
    "Yes" : function ()
    {
      $("div#dialog").dialog ("close");
    },
    "No" : function ()
    {
    }
  }
}).prev().find(".ui-dialog-titlebar-close").hide ();

</script>
The Yes and No buttons now appear in the dialog box

Figure 4-9. The Yes and No buttons now appear in the dialog box

Inserting Content Using Ajax

Now let’s insert content retrieved dynamically from the server into the dialog box before opening. This is done using the options.open option (shown in bold). This method is called before the dialog box is displayed:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Content of the dialog box</p>
</div>

<script>

$("div#dialog").dialog ({
  open : function (event)
  {
    $(this).load ("action.php");
  }
});

</script>

Recall that in the event methods (defined here by options.open), the this value represents the HTML element corresponding to the contents of the dialog box. $(this) is a jQuery class object associated with this element of the DOM. The action.php file is as follows:

<?
  $txt = "<span> Response sent by the server </span>";
  $txt = utf8_encode($txt);
  echo ($txt);
?>

The URL of the page displayed in the browser must begin with http://, otherwise the Ajax call cannot be performed.

The content of the dialog box is retrieved by Ajax and the window is displayed with its new content (Figure 4-10).

Dialog box initialized dynamically

Figure 4-10. Dialog box initialized dynamically

Changing the Behavior of a Dialog Box with Effects

We have seen that the options used when creating the dialog box can be modified by the dialog ("option", param, value) method. The param parameter is the name of the option, while the value corresponds to its new value.

To illustrate this, let’s change the effect for the opening and closing of the window. We’ll display two lists for which we can select the desired effect ("puff", "slide", etc.). When creating the dialog box, no effect is associated with it:

<!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<div id="dialog" title="Window title">
  <p> Content of the dialog box</p>
</div>

Open effect
<select id=effectopen>
  <option>No effect</option>
  <option>blind</option>
  <option>bounce</option>
  <option>clip</option>
  <option>drop</option>
  <option>fold</option>
  <option>highlight</option>
  <option>puff</option>
  <option>pulsate</option>
  <option>scale</option>
  <option>slide</option>
</select>

<br />

Close effect
<select id=effectclose>
  <option>No effect</option>
  <option>blind</option>
  <option>bounce</option>
  <option>clip</option>
  <option>drop</option>
  <option>fold</option>
  <option>highlight</option>
  <option>puff</option>
  <option>pulsate</option>
  <option>scale</option>
  <option>slide</option>
</select>

<br />

<input id=open type=button value=Open>

<script>

$("div#dialog").dialog ({
  autoOpen : false
});

$("#effectopen").change (function (event)
{
  var effect = $(this).val ();
  if (effect == "No effect") effect = false;
  $("div#dialog").dialog ("option", "show", effect);
});

$("#effectclose").change (function (event)
{
  var effect = $(this).val ();
  if (effect == "No effect") effect = false;
  $("div#dialog").dialog ("option", "hide", effect);
});

$("#open").click (function (event)
{
  $("#dialog").dialog ("open");
});

</script>

Figure 4-11 shows the result with the fold and highlight effects selected.

Application of an effect at the opening and closing of the dialog box

Figure 4-11. Application of an effect at the opening and closing of the dialog box

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required