Show loading message on SelectedIndexChanged event of drop down list

Question

Hi,

I'm trying to show message "Loading..." when a user select an item in the dorp down list.

Mark up:

<asp:Label ID="lbl_LoadingMessage" runat="server" ></asp:Label>

<asp:DropDownList ID="ddl_Chapter" runat="server" AutoPostBack="True">
            </asp:DropDownList>

Code behind:

Protected Sub LoadMessage()
        lblLoading.Text = "Loading..."
End Sub


Protected Sub ddl_Chapter_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddl_Chapter.SelectedIndexChanged

        LoadMessage()

        Dim redirectURL As String = "~/chapter.aspx?bid=" & BookId.ToString
        Server.Transfer(redirectURL)

End Sub

The method I'm using above is not working. When I select a new item from the drop down list, it works as expected except the message "Loading..." is not showing at all. Any suggestion or code sample? Thank you.

Answer 1

Hello

The whole event will execute before the page re-rendering will take place.

If you are going to be doing extra processing between the LoadMessage() and the Server.Transfer try using AJAX UpdateProgress panel and adding your "loading..." message to that and add your dropDownList to a UpdatePanel.

This way depending on what code needs executing in your SelectedIndexChanged event it will show the "loading..." message before it via a partial page postback.

e.g

    <asp:ScriptManager id="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <asp:UpdateProgress id="UpdateProgress1" runat="server" associatedUpdatePanelID="UpdatePanel1">
        <ProgressTemplate>
            <p>Loading....</p>
        </ProgressTemplate>
    </asp:UpdateProgress>

    <asp:UpdatePanel id="UpdatePanel1" runat="server" childrenAsTriggers="true">
        <ContentTemplate>
            <asp:DropDownList id="DropDownList1" runat="server" autoPostBack="true">
                <asp:ListItem selected="True" value="1">Book 1</asp:ListItem>
                <asp:ListItem value="2">Book 2</asp:ListItem>
                <asp:ListItem value="3">Book 3</asp:ListItem>
                <asp:ListItem value="4">Book 4</asp:ListItem>
                <asp:ListItem value="5">Book 5</asp:ListItem>
            </asp:DropDownList>

            <asp:Label id="lblSelected" runat="server"></asp:Label>
        </ContentTemplate>
    </asp:UpdatePanel>

This way the "loading..." message will be displayed for the duration of the processing of what you are trying to achieve in your SelectedIndexChanged event. If this is simply for display reasons javaScript would be your best bet.

Answer 2

You will have to do this on the client side using javascript.

At the moment, your dropdown menu is causing a postback. when the drop down menu is changed, the page post backs then the entire page life cycle is run through. When the event ddl_Chapter_SelectedIndexChanged is run, you set the text of the loading label, but you never reload the page (which would have your loading message) - instead you server.transfer to a new page.

If you use jQuery, you could set the labels text value as soon as the dropdown is changed

something like:

$('#the_full_renedered_ID_of_ddl_Chapter').change(function () {
      $('#the_full_renedered_ID_of_lbl_LoadingMessage').html("Loading...")
});

Answer 3

Or use javascript:

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" /></script>
<script type="text/javascript">
$(document).ready( function() {
 $("#<%= ddl_Chapter.ClientID %>").change(function()
 {
  window.alert("Loading");
 });  
});
</script>