Processing feedback with JavaScript and CSS

I wrote a post before about giving user some feedback when a long process occurs. It is very simple if you use AJAX as the post shows. But what if your boss told you that you can’t use AJAX for whatever reason, like my boss told me?

Well, the good news is that you still can do it with JavaScript and CSS. The trick is to use JavaScript’s setTimeout function to repeatedly check the value of a hidden field which is updated in code-behind after the long process is finished. Here is the code (CSS is the same as the previous post ):

The idea is this:

1. Add a HiddenField to the page with an initial value, say 0;

2. When the submit button is clicked, a JavaScript function is called. This function will check if the HiddenField’s initial value has been changed; if not, then display the “Processing” message to the user; if yes, then hide the “processing” message. This function is repeatedly executed every second by using JavaScript’s setTimeout inside of the function itself until the HiddenFiled’s value is changed.

3. In the button’s click event handler, after the long process is finished, just change the HiddenField’s value to a different value, then the JavaScript will pick up the new value and hide the “processing” message.

4. The purpose of CSS here is to create a transparent layer to cover the whole page (so user will not be able to click the button again until the process is finished), and on top of the layer a “Processing” message is displayed.

OK, here is the code:

JavaScript:

<script language="javascript" type="text/javascript">
function displayProgress()
{
    var hdn = document.getElementById('<%=hdnStatus.ClientID%>');
    var div = document.getElementById('<%=pnlBackGround.ClientID %>');
    if (div !=null)
    {
        var feedback = document.getElementById('<%=divFeedback.ClientID%>');
        if (hdn.value!=1)
        {
            feedback.innerHTML = "<img src='../Images/ajax-loader.gif'>The request is being processed,"+
                        " please wait...<br />This window will disappear when the process is finished.";
            div.style.display = "block";
            setTimeout("displayProgress()", 1000);
            return true;
        }
        else
        {
            div.style.display = "none";
            return true;
        }
    }
    else
    {
        return true;
    }
} 

</script>

ASPS Page:

    <div>
        <asp:Panel ID="pnlBackGround" runat="server" CssClass="popup-div-background" style="display:none;" >
            <div id="divFeedback" runat="server" class="popup-div-front">
                <img src="../Images/ajax-loader.gif" border="0" />
                The request is being processed. Please wait...<br />
                This window will disappear when the process is finished.
            </div>
        </asp:Panel>
        <asp:Button ID="btnProcess" runat="server" Text="Process" OnClientClick="displayProgress()" />
            <br />
        <asp:HiddenField ID="hdnStatus" runat="server" Value="0" EnableViewState=false /></div>
    </div>

Code behind code:

    Protected Sub btnProcess_Click(ByVal sender As System.Object, _
                ByVal e As System.EventArgs) Handles btnProcess.Click

        'The following For loop is to
        'simulate a long process.
        'Replace it with the actual long process
        For i As Integer = 0 To 10
            Me.lblResults.Text += DateTime.Now.ToString() & "<br />"
                Threading.Thread.Sleep(1000)
        Next
        Me.hdnStatus.Value = "1"
        
    End Sub