Как запустить событие JavaScript после того, как UpdateProgress расположен на ASP.NET C#?

У меня есть веб-форма, где у меня есть функция JavaScript, которая оценивает, должен ли он отображать div... вот эта функция...

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

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

                return;
            }

Я также добавил это в мою форму

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

Таким образом, даже если была обратная передача, он покажет div, если в раскрывающемся списке выбрано определенное значение.

Тем не менее, я недавно добавил панель обновлений и updateprogress... и теперь я думаю, что она больше не будет работать, так как обратная передача не произойдет.

Вот что у меня сейчас...

<%@ 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>

Итак, я заметил, что после того, как вы нажмете кнопку btnFilter, ее функция будет запущена, пока updateprogress виден, но после того, как он исчезнет (и функция btnFilter завершится), divSpecificDates не будет виден, когда он должен быть виден. Я полагаю, что я должен вызвать viewCalendars() после того, как все сделано...

Как и где я должен вызвать эту функцию??

ОБНОВЛЕНИЕ: Я только что избавился от процесса обновления... и он все еще не работает, так что я думаю, что проблема не там... вероятно, это на панели обновления

Источник

1 ответ

Решение

Когда UpdatePanel обновляется, DOM изменяется, и вам необходимо повторно запустить инициализацию, которую вы выполняете при загрузке страницы. Это делается с помощью функции JavaScript, которую asp.net включает при добавлении UpdatePanel. Так что удалите onload от тела и использовать pageLoad,

Так что уберите нагрузку из этой строки

<body onload="viewCalendars();">

и добавьте этот скрипт

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

Похоже как сохранить JavaScript после частичной обратной передачи UpdatePanel
Справка: события жизненного цикла на стороне клиента Ajax

Источник
Другие вопросы по тегам