Friday, 26 October 2012

A "processing" dialogue box with jQuery

Suppose you want to create something like the following:



Common scenarios are when a user submits something and you want to wait for a response without refreshing the page.

This is easy!

First add two NuGet packages to your web application:

    install-package jQuery-UI
    install-package jQuery.UI.Combined

Then use the following mark-up:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link href="Content/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
    <link href="Content/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
    <link href="Content/themes/base/jquery.ui.dialog.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery-ui-1.9.0.js" type="text/javascript"></script>
</head>
    <body>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#progressDialog").dialog({
                    autoOpen: false,
                    draggable: false,
                    modal: true,
                    resizable: false,
                    closeOnEscape: false,
                    open: progressDialogOpen
                });
            });
 
            function progressDialogOpen() {
                $(".ui-dialog-titlebar-close"this.parentNode).hide();
            }
 
            function progressDialogClose() {
                $("#progressDialog").dialog('close');
            }
 
            function doSomethingOpen() {
                $("#progressDialog").dialog('open');
                setTimeout(progressDialogClose, 3000);
                return false;
            }
 
            function doSomethingClose() {
                progressDialogClose();
            }
        </script>
        <button onclick="doSomethingOpen()">Open</button>
        <button onclick="doSomethingClose()">Close</button>
        <div id="progressDialog" title="Processing">
            <img alt="Processing..." src="Content/images/YourAnimatedProcessingImage.gif" />
        </div>
    </body>
</html>


Note that this example just puts in a time out to simulate something happening. You can replace the call to "setTimeout" with some server call.

And that is it.

About Me