Question

我有一个动态创建的JavaScript块，它在页面加载时执行。 JS位于UpdatePanel内。

更新UpdatePanel后，我需要更新动态创建的JavaScript。这一切都很好，因为当我查看生成的页面源时，我可以看到更新的JS。

我的问题是页面更新后，我需要手动重新执行JavaScript函数（因为这通常是在页面加载时自动完成的。）

我尝试了很多方法：

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);

function pageLoaded(sender, args) {
    var updatedPanels = args.get_panelsUpdated();

    // check if Main Panel was updated 
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "PageContent_TabContent_UpdatePanel1") {
            drawVisualization();
            break;
        }
    }
}

或者：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);

function handleEndRequest(sender, args) {
    drawVisualization();
}

但是上述两种方法都只执行旧版本的JavaScript，根据生成的源代码，它已经发生了变化。

我有什么遗漏，或者我可以尝试另一种方法吗？

更新

使用评论@Mehdi Maujood，我已经制定了一个有效的解决方案：

function handleEndRequest(sender, args)
{
    var updatedPanels = args.get_panelsUpdated();
    for (idx = 0; idx < updatedPanels.length; idx++) {
        if (updatedPanels[idx].id == "PageContent_TabContent_UpdatePanel1") {

            var scripts = updatedPanels[idx].getElementsByTagName('script');
            for(var i=0;i<scripts.length;i++) {
                eval(scripts[i].innerHTML);
            }

            drawVisualization();
            break;
        }
    }
}

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(handleEndRequest);

这结合了How can I recall a javascript function after updatepanel update的答案以及@ shatl对Rebinding events in jQuery after Ajax update (updatepanel)的评论。

Answer 1

据我所知，你遇到的问题是通过更新面板呈现的javascript没有被执行。我搜索了一下，这似乎是常见的问题。浏览器似乎没有执行包含在更新面板中的脚本。

问题在于，虽然您更新的脚本已发送到浏览器，但它永远不会被执行。 drawVisualization永远不会重新定义。您可以从C＃代码中尝试这样的事情：

string script = "function drawVisualization() { alert('Drawing code here') }";

ScriptManager.RegisterClientScriptBlock(this.Page, typeof(SomeClass), Guid.NewGuid().ToString(), script, true);

调用RegisterClientScriptBlock可能需要修复某些参数;我只是从某处复制了它。

编辑：我从另一个问题找到了更好的方法。请参阅评论。这是执行更新面板呈现的脚本的一段代码（您可以忽略以前的代码）：

<script type="text/javascript">
    function handleEndRequest(sender, args)
    {
        var panel = document.getElementById(sender._postBackSettings.panelID);
        var scripts = panel.getElementsByTagName('script');
        for(var i=0;i<scripts.length;i++) {
            eval(scripts[i].innerHTML);
        }
    }

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(handleEndRequest);
</script>

在C＃UpdatePanel更新后更新JavaScript

1 个答案: