Update JavaScript after C# UpdatePanel update

I have a dynamically created block of JavaScript which executes on page load. The JS is inside a UpdatePanel.

When the UpdatePanel is updated, I need to update my dynamically created JavaScript. This all works fine as when I view the generated source of the page, I can see the updated JS.

My problem is that after the page is updated, I need to re-execute the JavaScript function manually (as this is normally done automatically on page load).

I've tried a number of methods:

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;
        }
    }
}

Or:

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

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

But both of the above methods just execute the old version of the JavaScript, which acco开发者_StackOverflow社区rding to the generated source code, has changed.

Is there something I'm missing, or maybe another method I could try?

UPDATE:

Using the comment @Mehdi Maujood, I've put together a working solution:

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);

This combines answers from How can I recall a javascript function after updatepanel update as well as @shatl's comment on Rebinding events in jQuery after Ajax update (updatepanel).

As far as I can understand, the problem you're having is that the javascript rendered via the update panel is not getting executed. I searched a bit, and this appears to be common problem. The browser just doesn't seem to execute script wrapped in an update panel.

The issue is that although your updated script is sent to the browser, it is never executed. drawVisualization is never re-defined. You can try something like this from your C# code:

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

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

The call to RegisterClientScriptBlock may need fixing for some parameters; I just copied it from somewhere.

EDIT: I found a better way to do this from another question. Refer to the comment. Here's a piece of code that executes scripts rendered by update panels (you can ignore the previous code):

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