How to fire JavaScript Event after UpdateProgress is disposed on ASP.NET c#?

https://stackoverflow.com/questions/15395787

23-03-2022
|

Question

I have a webform where I have a javascript function that evaluates whether or not it should display a div... here's the function...

function viewCalendars()
            {
                if (document.getElementById('ddlDates').value == '5')
                {
                    document.getElementById('divSpecificDates').style.display = 'inline';
                }

                else
                {
                    document.getElementById('divSpecificDates').style.display = 'none';
                }

                return;
            }

I also added this to my form

<body onload="viewCalendars();">
//Everything
</body>

So even if there was a postback, it will show the div if the dropdownlist has an specific value selected.

However, I recently added both an updatepanel and an updateprogress... and now I think that the will not work anymore since a postback will not occur.

Here's what I have now...

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Consumptions.aspx.cs" Inherits="Station.Consumptions" %>
<%@ Register TagPrefix="ew" Namespace="eWorld.UI" Assembly="eWorld.UI, Version=1.9.0.0, Culture=neutral, PublicKeyToken=24d65337282035f2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>
            Lista De Consumos
        </title>

        <link href="css/Style.css" type="text/css" rel="stylesheet"/>

        <style type="text/css">
            #blur
            {
                width: 100%;
                background-color: black;
                moz-opacity: 0.5;
                khtml-opacity: .5;
                opacity: .5;
                filter: alpha(opacity=50);
                z-index: 120;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }

            #progress
            {
                border: black 1px solid;
                padding: 5px;
                z-index: 100;                
                width: 250px;
                position: absolute;
                background-color: #fff;
                -moz-opacity: 0.75;
                font-family: Tahoma;
                font-size: 11px;
                font-weight: bold;
                text-align: center;
            }
        </style>

        <script type="text/javascript">
            function viewCalendars()
            {
                if (document.getElementById('ddlDates').value == '5')
                {
                    document.getElementById('divSpecificDates').style.display = 'inline';
                }

                else
                {
                    document.getElementById('divSpecificDates').style.display = 'none';
                }

                return;
            }
        </script>
    </head>

    <body onload="viewCalendars();">
        <form id="form1" runat="server">
            <asp:ScriptManager ID="sm" runat="server">
            </asp:ScriptManager>

            <asp:UpdateProgress ID="UpdateProgress1" runat="server">
                <ProgressTemplate>
                    <div id="blur">
                    </div>
                    <div id="progress">
                        <asp:Image ID="imgLoading" GenerateEmptyAlternateText="true" runat="server" ImageUrl="~/images/loading.gif" />
                    </div>
                </ProgressTemplate>
            </asp:UpdateProgress>

            <asp:UpdatePanel ID="upd" runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="ddlDates" CssClass="tbox" runat="server">
                    </asp:DropDownList>

                    <div runat="server" id="divSpecificDates" style="display: none; width: 100%; z-index: 1000;">
                    </div>

                    &nbsp;
                    <asp:Button Text="Filtrar" CssClass="btn" runat="server" ID="btnFilter" onclick="btnFilter_Click" />
                </ContentTemplate>

                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnFilter" EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
        </form>
    </body>
</html>

So, I noticed that after you click the btnFilter button, it's function will be triggered, while the updateprogress is visible, but after it disappears (and the btnFilter function is completed) divSpecificDates is not visible when it should be visible. I suppose that I have to call viewCalendars() after everything is done...

How and where do I have to call for this function??

UPDATE: I just got rid of the updateprogress... and it's still not working, so I guess the problem is not there... probably it's on the updatepanel

Solution

When the UpdatePanel is updated, the DOM is change, and you need to re-run the initialization's that you do when you load a page. This are done with javascript function that asp.net includes when you add the UpdatePanel. So remove the onload from the body and use the pageLoad.

So remove the onload from this line

<body onload="viewCalendars();">

and add this script

<script>
   function pageLoad() { 
      viewCalendars();
   }  
</script>

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow