ASP Showing/Hiding a Table during an Event - asp.net

Question

I have a table that has a loading gif inside of it, that starts with the visible property set to false. I also have a drop down list that has a selection change event that will update information on the page depending on what the user selects. What I want to happen is the loading table to become visible at the beginning of the selection change event, the processing of new information with the selection made by the user to occur, then the loading table to go back to being invisible.
Here is what some of my code looks like:
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table id="tblLoading" runat="server" align="center" width="100%" visible="false">
<tr>
<td align="center">
<img src="../images/Loading_Gif.gif" class="auto-style1" alt="Load" />
</td>
</tr>
<tr align="center">
<td>
<asp:Label runat="server" Font-Names="Tahoma" Font-Size="Larger" Font-Bold="True">Loading...</asp:Label>
</td>
</tr>
</table>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlPayrollPeriodReport" EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
<asp:DropDownList ID="ddlPayrollPeriodReport" runat="server" AutoPostBack="True" Font-Size="Large" Font-Names="Tahoma"></asp:DropDownList>
Private Sub ddlPayPeriodReport_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlPayrollPeriodReport.SelectedIndexChanged
'set up the link to the HR system
Me.tblLoading.Visible = True
Dim datStart As Date = CDate(Me.ddlPayrollPeriodReport.SelectedItem.Value)
SetUptblReport(datStart)
Me.tblLoading.Visible = False
End Sub
I found out that I need to place the loading table in an UpdatePanel in order for it to change the value of the visible property. However, I noticed that the table will become visible if I don't have the call that turns it invisible. If I have both calls, then both calls are ignored. I am still new to ASP, so is there something I need to know in order to get this to work the way I want it to work?

Answer 1

The changes made in code-behind become visible only after the postback has completed and the page (or the UpdatePanel) has been refreshed. In your case, the page will show the last change that you made to tblLoading in the SelectedIndexChanged event handler, which is to set visible="False". In other words, it was not visible before the postback, and it is still not visible after it.
To show the loading message, you must make the table visible in client code, before the postback is triggered. In order to do that, the table has to be present in the page. The visible="false" setting does not work well for that because it causes ASP.NET to remove the control from the HTML ouptut. You can hide the table with the display: none style property:
<table id="tblLoading" runat="server" align="center" width="100%" style="display: none;">
To make the table visible before the postback, you can process the DropDownList selection change on the client side:
<asp:DropDownList ID="ddlPayrollPeriodReport" ... onchange="showLoadingMessage();">
The Javascript function could be defined as follows:
<script type="text/javascript">
function showLoadingMessage() {
document.getElementById('<%= tblLoading.ClientID %>').style.display = '';
}
</script>
Note: the <% ... %> syntax ensures that any modification to the ID of the control made by ASP.NET is taken into account.
Finally, you can hide the table in your event handler on the server side:
Private Sub ddlPayPeriodReport_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlPayrollPeriodReport.SelectedIndexChanged
...
tblLoading.Style("display") = "none"
End Sub