jQuery UI dialog

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the ‘x’ icon by default.

by jQuery UI

I blogged about showing popup for user confirmation before doing something permanently in our application. This is a rule of thumb when design software. I created a small demo as an example to show how we can show a confirm box before delete record from persistent layer for example database. In that example I used a plain JavaScript confirm box for user confirmation. It may be enough for our simple and in house applications. But for internet based public application we need a more sophisticated solution over a simple JavaScript confirmation box. For that kind of applications we need more beautiful user interface.

We have some options for this problem. We can design a ‘div’ element and design it as an popup and using some JavaScript we can show it when we want the confirmation. But today I am using a library which is from jQuery for my solution. This is jQuery UI plugin. This library has a dependency on jQuery core. That means we need the jQuery core library in our page when we are using this plugin. This plugin has a function called ‘dialog()’ using this function we can popup a simple ‘div’ element as popup. To make things simple I am going to show a simple code.

If we want to show a simple dialog using this plugin then we can use this code.

<!-- CSS for jQuery UI. -->
<link href="../../Content/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<!-- jQuery core library. -->
<script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>   

<!-- jQuery UI plugin. -->
<script src="../../Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {
    $("#dialog").dialog(); // Show 'div' as a dialog.
});
</script>

<div id="dialog" title="Demo Dialog">
    This is my dialog box.
</div>

This will show the div as a dialog. The title of the ‘div’ will be the title of the dialog. So simple. If we want to show a ‘OK’ button inside our dialog then we can use this code.

$("#dialog").dialog({
    buttons: {
        OK: function () {
            $(this).dialog("close");
        }
    }
});

Dialog function can accept object literal. Through that we can set many option of our dialog. Also this plugin have some theme to select. You can also create your own theme to use. Depending on your theme the CSS can be downloaded. I am here using the most basic theme. In real applications we should use theme which will match our application look and feel, if not then we should create one. For full documentation please take a look at jQuery UI plugin.

Lets go to my main code. I am going to use this plugin to convert my plain confirm box with a more beautiful dialog box in my demo example. First of all I am creating a ‘div’ element as my dialog.

<div id="dialog" title="Delete Confirmation">
    Are you sure?
</div>

Next in the place where I wrote the code to show a plain JavaScript dialog box, I am going to replace that code to this.

// Show confirmation dialog and pass the 'event' paramer
// to use the object inside the function for which the 
// 'click' event fired, in this case the perticular 'delete' link.
$(".deleteLink").click(function (event) {
    $("#dialog").dialog({
        modal: true,
        buttons: {
            OK: function () {
                $(this).dialog("close");
                window.location = "http://<%: Request.Url.Host %>:<%: Request.Url.Port %>/Customer/Delete/" + 
                    event.target.id; // Get the ID of the record from the 'delete' link id.
            },
            Cancel: function () {
                $(this).dialog("close"); // Cancel the 'delete' operation.
            }
        }
    });
});

Also at place where the delete link was I am going to replace that code.

<a class="deleteLink" href="#" id="<%: item.CustomerID %>">Delete</a>

When the user click on the delete link then the dialog will come up for the confirmation. This confirmation have two buttons. One is ‘OK’ and another is ‘Cancel’. Clicking on the ‘Cancel’ button will close the dialog and do nothing. That means it will not continue with the deletion process. But when the ‘OK’ button is clicked the deletion process will continue. For that it will collect some information like host name, port number and the id of the record which will delete (the id of the record is actually the id of the delete link which is dynamically populated using my model object). Using these information dynamically the deletion link is created and call the deletion controller. The deletion controller will actually continue the process at the server side. For simplicity I am not discussing the deletion logic here. Also it is out of my present discussion.

So the full code will be following.

<%@ Page 
    Title="" 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Customer>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">  
  
    <link href="../../Content/jquery-ui.min.css" rel="stylesheet" type="text/css" />

    <script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>   
    <script src="../../Scripts/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script>
    
    <script language="javascript" type="text/javascript">
        $("document").ready(function () {
            
            // Show confirmation dialog and pass the 'event' paramer
            // to use the object inside the function for which the 
            // 'click' event fired, in this case the perticular 'delete' link.
            $(".deleteLink").click(function (event) {
                $("#dialog").dialog({
                    modal: true,
                    buttons: {
                        OK: function () {
                            $(this).dialog("close");
                            window.location = "http://<%: Request.Url.Host %>:<%: Request.Url.Port %>/Customer/Delete/" + 
                                event.target.id; // Get the ID of the record from the 'delete' link id.
                        },
                        Cancel: function () {
                            $(this).dialog("close"); // Cancel the 'delete' operation.
                        }
                    }
                });
            });
        });
    </script>

    <h2>Index</h2>

    <table>
        <tr>
            <th></th>
            <th>CustomerID</th>
            <th>CompanyName</th>
            <th>ContactName</th>
            <th>ContactTitle</th>
            <th>Address</th>
            <th>City</th>
            <th>Region</th>
            <th>PostalCode</th>
            <th>Country</th>
            <th>Phone</th>
            <th>Fax</th>
        </tr>
        <% foreach (var item in Model)
            { %>
        <tr>
            <td>
                <%: Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) %> |
                <%: Html.ActionLink("Details", "Details", new { id = item.CustomerID })%> |

                <!-- Store the ID of the record for use at the time of deletion. -->
                <a class="deleteLink" href="#" id="<%: item.CustomerID %>">Delete</a>
            </td>
            <td><%: item.CustomerID %></td>
            <td><%: item.CompanyName %></td>
            <td><%: item.ContactName %></td>
            <td><%: item.ContactTitle %></td>
            <td><%: item.Address %></td>
            <td><%: item.City %></td>
            <td><%: item.Region %> </td>
            <td><%: item.PostalCode %></td>
            <td><%: item.Country %></td>
            <td><%: item.Phone %></td>
            <td><%: item.Fax %></td>
        </tr>
        <% } %>
    </table>

    <p><%: Html.ActionLink("Create New", "Create") %></p>

    <div id="dialog" title="Delete Confirmation">
        Are you sure?
    </div>
</asp:Content>
jQuery Dialog
jQuery Dialog

Happy coding.

Confirmation before proceed

There are some basic rule of UI development. One of them is take confirmation from the user before doing something permanently. For example suppose there is a delete option in our UI. When the user click on this option then we should ask for a confirmation from the user that if they really want to delete the record or they click on this option by accidently. It is like giving a second chance to the user.

The most basic option to take confirmation from the user is using the standard confirmation box in browser. We can use it with some JavaScript.

confirm("Are you sure?");

It will show a small modal popup in the browser with a OK and CANCEL button. After showing the confirmation box we can take our decision according the user interaction. In other words we can track the user choice. weather they click on OK button or CANCEL button. For OK it will return true and for CANCEL return false.

var isConfirmed = confirm("Are you sure?");
if (isConfirmed) {
    // Continue with the operation.
}
else {
    // Cancel the operation.
}

As a demo, I am working on a ASP.NET MVC application, on which I am showing all the ‘Customer’ data from ‘Northwind’ database inside one of a view.

//
// GET: /Customer/

public ActionResult Index()
{
    // Get all 'Customer' data using 'ADO.NET Entity Framework'.
    NorthwindEntities entities = new NorthwindEntities();
    IList<Customer> customers = entities.Customers.ToList();

    return View(customers);
}

Now I am creating a view to show all the ‘Customer’ data. I am using html table in my view. Also I am including some links for basic operation like edit, delete etc in the table.

<table>
    <tr>
        <th></th>
        <th>CustomerID</th>
        <th>CompanyName</th>
        <th>ContactName</th>
        <th>ContactTitle</th>
        <th>Address</th>
        <th>City</th>
        <th>Region</th>
        <th>PostalCode</th>
        <th>Country</th>
        <th>Phone</th>
        <th>Fax</th>
    </tr>
    <% foreach (var item in Model)
        { %>
    <tr>
        <td>
            <%: Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) %> |
            <%: Html.ActionLink("Details", "Details", new { id = item.CustomerID })%> |      
                          
            <!-- 
                Give a css class to the 'delete' link so that we 
                can get the 'delete' link using jQuery easily. 
                'new { @class = "deleteLink" }' this is the syntax 
                to add css class. 
            -->
            <%: Html.ActionLink("Delete", "Delete", new { id = item.CustomerID }, new { @class = "deleteLink" })%> 
        </td>
        <td><%: item.CustomerID %></td>
        <td><%: item.CompanyName %></td>
        <td><%: item.ContactName %></td>
        <td><%: item.ContactTitle %></td>
        <td><%: item.Address %></td>
        <td><%: item.City %></td>
        <td><%: item.Region %> </td>
        <td><%: item.PostalCode %></td>
        <td><%: item.Country %></td>
        <td><%: item.Phone %></td>
        <td><%: item.Fax %></td>
    </tr>
    <% } %>
</table>

When the user click on the delete link then we should show a confirmation popup because this operation will remove the record permanently from the database. For that I am using some JavaScript and jQuery code.

$("document").ready(function () {
    $(".deleteLink").click(function () {                
        // Show the confirm box when delete link is clicked.
        var isConfirmed = confirm("Are you sure?");

        // Check the user decision and take action 
        // according to that.
        if (isConfirmed) {
            return true; // Yes, delete the record.
        }
        else {
            return false; // No, cancel the delete operation.
        }
    });
});

So if user click on the OK button then we can continue with the delete operation otherwise cancel it. In the case of OK button I am returning true that means it will submit to the server to continue with the delete operation and in the case of CANCEL I am returning false that means it will not submit to the server and the delete operation can not be able to continue.

So the full code of the view is:

<%@ Page 
    Title="" 
    Language="C#" 
    MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcApplication1.Models.Customer>>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Index
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">    
    
    <!-- Attach jQuery library. -->
    <script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>        
    
    <script language="javascript" type="text/javascript">
        $("document").ready(function () {
            $(".deleteLink").click(function () {                
                // Show the confirm box when delete link is clicked.
                var isConfirmed = confirm("Are you sure?");

                // Check the user decision and take action 
                // according to that.
                if (isConfirmed) {
                    return true; // Yes, delete the record.
                }
                else {
                    return false; // No, cancel the delete operation.
                }
            });
        });
    </script>

    <h2>Index</h2>

    <table>
        <tr>
            <th></th>
            <th>CustomerID</th>
            <th>CompanyName</th>
            <th>ContactName</th>
            <th>ContactTitle</th>
            <th>Address</th>
            <th>City</th>
            <th>Region</th>
            <th>PostalCode</th>
            <th>Country</th>
            <th>Phone</th>
            <th>Fax</th>
        </tr>
        <% foreach (var item in Model)
            { %>
        <tr>
            <td>
                <%: Html.ActionLink("Edit", "Edit", new { id = item.CustomerID }) %> |
                <%: Html.ActionLink("Details", "Details", new { id = item.CustomerID })%> |      
                          
                <!-- 
                    Give a css class to the 'delete' link so that we 
                    can get the 'delete' link using jQuery easily. 
                    'new { @class = "deleteLink" }' this is the syntax 
                    to add css class.
                -->
                <%: Html.ActionLink("Delete", "Delete", new { id = item.CustomerID }, new { @class = "deleteLink" })%> 
            </td>
            <td><%: item.CustomerID %></td>
            <td><%: item.CompanyName %></td>
            <td><%: item.ContactName %></td>
            <td><%: item.ContactTitle %></td>
            <td><%: item.Address %></td>
            <td><%: item.City %></td>
            <td><%: item.Region %> </td>
            <td><%: item.PostalCode %></td>
            <td><%: item.Country %></td>
            <td><%: item.Phone %></td>
            <td><%: item.Fax %></td>
        </tr>
        <% } %>
    </table>

    <p><%: Html.ActionLink("Create New", "Create") %></p>
</asp:Content>
Confirmation Box
Confirmation Box

Happy coding.