How can I make a div visible Before the page has finished loading

Question

I have a page i've built in ASP.NET using WebForms.

I have a couple of UpdatePanels which seem to be working fine. But i've hit a problem.

I have a combobox and when the value is changed it connects to TFS and retrieves details of projects in order to populate a list box. This can take some time to complete as our TFS server is in Australia and i'm in the UK, so i thought i'd display a little graphic to indicate to the user that its loading in the details.

So here's an example of what I have so far:

HTML:

<asp:ScriptManager ID="ScriptManager1" runat="server"/>
<asp:Panel ID="InnerPannelLeft" runat="server" CssClass="innerContentPanel_Left">
    <asp:Panel ID="Panel2" runat="server" CssClass="innerContentPanel_Border">
        <asp:Panel ID="Panel3" runat="server" CssClass="runResultsPanels">
            <asp:Label ID="Label2" runat="server" Text="Test Suite:  "></asp:Label>
            <asp:DropDownList ID="TestSuite" runat="server" OnSelectedIndexChanged="TestSuite_SelectedIndexChanged" AutoPostBack="True">
                <asp:ListItem Selected="True">Select a Test Suite</asp:ListItem>
                <asp:ListItem>Trades</asp:ListItem>
                <asp:ListItem>Dividends</asp:ListItem>
            </asp:DropDownList>
        </asp:Panel>
    </asp:Panel>
</asp:Panel>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="TestSuite" EventName="SelectedIndexChanged" />
    </Triggers>
    <ContentTemplate>
        <asp:Panel ID="LoadingPanel" CssClass="innerContentPanel_Border" runat="server" Visible="false">
            <asp:Panel ID="TimeDiv" runat="server">
                <asp:Label ID="Label6" runat="server" Text="Loading..."></asp:Label>
                <asp:Panel ID="TimerAnimation" CssClass="timer" runat="server"></asp:Panel>
            </asp:Panel>
        </asp:Panel>
    </ContentTemplate>
</asp:UpdatePanel>

C#:

protected void TestSuite_SelectedIndexChanged(object sender, EventArgs e)
{
    if (TestSuite.SelectedIndex > 0)
    {
         //Show the loading div
         LoadingPanel.Visible = true;

         //Long running code that grabs stuff from TFS

         //Grabbing stuff from TFS has finished so hide the div
         //LoadingPanel.Visible = false;
    }
}

So there's the code. But basically what happens is it wont display the div until the processing within the combobox changed method has finished.

Is there a way to get that div to show up straight away before that combobox starts doing all the long running stuff?

I thought putting the div in the update panel and adding the trigger would allow it to asynchronously update the panel? Please excuse my ignorance if i'm wrong about that, the MSDN site has confused me.

EDIT: I added some JQuery and it works for showing an alert based off the onchange event. But what it will not do is make the div visible.

here's the code:

$(document).ready(function ()
{
    $("#<%=TestSuite.ClientID%>").change(function()
    {
        if ($(this).find('option:selected').text() === "Select a Test Suite")
        {
            alert("Hide the panel");
            $("#<%=LoadingPanel.ClientID%>").hide();
        }
        else
        {
            alert("Show the panel");
            $("#<%=LoadingPanel.ClientID%>").show();
        }
    })
})

Im guessing this is something to do with the postback and it forgetting the changes? The default visibility for the DIV is set to false.

So im thinking every time a postback is done (which is every time I change the combo) then its going to go back to default. Or am I in the wrong area here?

score 1 · Answer 1 · answered Mar 17 '15 at 17:57

1

The TestSuite_SelectedIndexChanged is a server side event so it won't show you anything until postback. You will need to do something client side with javascript or jquery before it kicks off or you could add an AjaxUpdate control: http://www.asp.net/ajax/documentation/live/overview/updateprogressoverview.aspx

answered Mar 17 '15 at 17:57

Steve Greene

12,029
1
33
54

I see now, makes sense when I think about it. What ive done now is create an onchange script that runs in the browsers, which runs before the server behind code :) Thanks for pointing me in the right direction. – Festivejelly Mar 18 '15 at 08:46
Ok on second thoughts... it works for showing a message box, but it still wont show a DIV when I call: function testsuitechange(e) { if ($("#cphMain_TestSuite").val() === "1") { $("#cphMain_LoadingPanel").hide(); } else { $("#cphMain_LoadingPanel").show(); } } – Festivejelly Mar 18 '15 at 09:24
$(document).ready won't be called on partial postbacks. Take a look at pageLoad (https://msdn.microsoft.com/en-us/library/bb386417.aspx). I use blockUI ajaxStart for something similar: http://malsup.com/jquery/block/ – Steve Greene Mar 18 '15 at 13:05
pageLoad didnt work either :-/ I inverted the visibility and added a button. So by default its shown on the screen. I click the button and it briefly hides the div, but of course the ASP site is then re rendering the original HTML where it was set to visible. – Festivejelly Mar 18 '15 at 13:09
Ok I solved the HTML not being rendered by looking at this solution: http://stackoverflow.com/questions/22615299/how-to-set-asp-panel-element-visible-hidden-with-javascript-jquery however, I still get the problem where its merely flashing for a split second and the code ASP site is rendering the original. Is it possible to maybe change it so that when I click the button it remembers display: None? – Festivejelly Mar 18 '15 at 13:16
You could be running into Ajax page cycle issues. I really like the blockUI stuff for Ajax: $(document).ajaxStart($.blockUI({ message: $('#LoadingMessage') })).ajaxStop($.unblockUI); – Steve Greene Mar 18 '15 at 13:28

How can I make a div visible Before the page has finished loading

1 Answers1