Как вызвать функцию JavaScript (с изменением тела) из обратного вызова UpdatePanel?

Question

Я обновляю div, добавляя туда функцию JavaScript.Я использую UpdatePanel.Проблема в том, что тело этой функции JS изменяется.Каждый раз, когда пользователь нажимает кнопку, новая функция JS (имя функции всегда одно и то же) помещается в один и тот же элемент div, но с другим телом.Причиной такого изменения содержимого тела функции являются новые данные.

Результат для меня таков: когда я вызываю эту функцию, я всегда выполняю первую функцию, которая была в этом div.Содержимое div меняется - я проверил.

Я пробовал:

1. Sys.Application.add_load (GetMyChart)
2. pageRequestManager.add_endRequest (EndRequestHandler)
3. ScriptManager.RegisterStartupScript
4. Page.ClientScript.RegisterStartupScript
5. Page.ClientScript.RegisterClientScriptBlock

<form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>

            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div id="chart1" runat="server" >
                        <script type="text/javascript">
                            function GetMyChart() { alert("wow!"); }
                        </script>
                    </div>

                    <asp:Label ID="Label1" runat="server" Text="old text"></asp:Label>
                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
    <script type="text/javascript">
            var pageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
            pageRequestManager.add_endRequest(EndRequestHandler);

        function EndRequestHandler(sender, args) {
            GetMyChart(); 
        }
    </script>


protected void Button1_Click(object sender, EventArgs e)
        {
            chart1.InnerHtml = GetChartFunction();
        }

В представленном здесь коде я всегда получаюоповещения.Моя цель - вызвать функцию GetMyChart, которая будет возвращена функцией GetChartFunction (), и мне нужно вызвать ее сразу после обновления.

Answer 1

Приведенный выше код не работает, потому что вы вернулись и присвоили строку <script type="text/javascript"> function XYZ() { //changing_body } XYZ();</script> во внутренний HTML-код chart1 div, что не означает, что он создаст новый тег <script> с переопределением функции.

Короче говоря, возвращаемое значение обрабатывается как обычная строка символов, и это неправильный способ добавления новых элементов в дерево DOM.

Более того, я смог воспроизвести его без использования .Netв нативном JavaScript, и вот пример: https://jsfiddle.net/qt1v6mof/

Чтобы получить ожидаемый эффект, вам обязательно нужно использовать функцию документа createElement , чтобы создать реальный <script> элемент tag, а затем используйте appendChild для замены содержимого innerHTML текущего div, как показано в следующем коде и примере:

<div id="chart">
  <script type="text/javascript">
        var getMyChart = function() { alert("wow!"); }
  </script>
</div>

<button id="changeBtn">Change getMyChart's body</button>
<button id="callEndRequest">Call endRequestHandler</button>

function change() {
    var newScript = document.createElement('script'),
    chartElem = document.getElementById('chart')

  chartElem.innerHTML = ''
  newScript.setAttribute('type', 'text/javascript');
  newScript.innerHTML = 'getMyChart = function() { alert("new body");}'

  chartElem.appendChild(newScript)
}

function endRequestHandler () {
    getMyChart()
}

changeBtn.onclick = change
callEndRequest.onclick = endRequestHandler

getMyChart()

Пример в реальном времени: https://jsfiddle.net/9mdeoLb2/

Надеюсь, это поможет вам.С уважением!