Prompt User to Start Update

Some websites need to prompt the user to decide whether a potentially disruptive task should be run, such as updating a data source in this example. Here I will describe how this can be achieved in a non-intrusive way using Bootbox.

In the ASP.NET Page_Load() is a check which determines whether an alert should be displayed to the user. In this case two dates are compared, for example the last modified date, although this should be varied based on the particular use case of the website. If the one currently in use is older, the page is reloaded with the Update=Check query string, otherwise a message is displayed.

protected void Page_Load(object sender, EventArgs e)
{
    if (Request.QueryString["Update"] == null)
    {
        // Check for updates (default option)

        DateTime newFile = DateTime.Parse("23/05/2013 16:53:13.000");
        DateTime currentFile = DateTime.Parse("23/05/2013 16:53:12.000");

        // Check if file to be uploaded is newer than current one
        if (DateTime.Compare(TruncateToSecond(newFile), TruncateToSecond(currentFile)) > 0)
        {
            // Reload with update dialogue
            Response.Redirect("Default.aspx?Update=Check");
        }
        else
        {
            // Site is on current or newer version already, no update required
            lblInfo.Text = "The site is on the latest version of the data file already. ";
        }
    }
}

Once the page is reloaded, the following jQuery is run and a Bootbox alert is displayed to the visitor. The title, message and buttons are specified, including callback functions.

$(document).ready(function () {
    if (GetQueryVariable("Update") === "Check") {
        window.bootbox.dialog({
            title: "Update Available",
            message: "There is a newer data file available for this website. Please choose an option below to continue.",
            buttons: {
                cancel: { // User has declined update
                    label: "Use current data file",
                    className: "btn-default",
                    callback: function () {
                        FadeToUrl("Default.aspx?Update=UpdateDeclined");
                    }
                },
                main: { // User has requested to run the update
                    label: "Update and use new data file",
                    className: "btn-primary",
                    callback: function () {
                        FadeToUrl("Update.aspx");
                    }
                }
            }
        });
    }
});

Each callback uses the FadeToUrl() method, which simply allows the dialogue box to fade out fully before changing the page to the specified URL.

function FadeToUrl(url) {
    setTimeout(function () {
        window.location.href = url;
    }, 200);
};

If declined, the check can be manually called by using the Update=Checkquery string. It would also be good practice to remember the users choice in a cookie so that the alert is not shown every time the page is reloaded.

Source code for Update Check example.

»