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" "">
<html xmlns="">
    <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>
        <script type="text/javascript">
            $(document).ready(function () {
                    autoOpen: false,
                    draggable: false,
                    modal: true,
                    resizable: false,
                    closeOnEscape: false,
                    open: progressDialogOpen
            function progressDialogOpen() {
            function progressDialogClose() {
            function doSomethingOpen() {
                setTimeout(progressDialogClose, 3000);
                return false;
            function doSomethingClose() {
        <button onclick="doSomethingOpen()">Open</button>
        <button onclick="doSomethingClose()">Close</button>
        <div id="progressDialog" title="Processing">
            <img alt="Processing..." src="Content/images/YourAnimatedProcessingImage.gif" />

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