Update JavaScript after C# UpdatePanel update

Question

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 according 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).

Mehdi Maujood · Accepted Answer · 2011-08-02T12:08:49.290

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>

In fact, I just found an even better way to execute javascript rendered from an update panel refresh: http://stackoverflow.com/questions/1625791/how-can-i-recall-a-javascript-function-after-updatepanel-update .. This is the actual problem you're having. — Mehdi Maujood, Aug 02 '11 at 12:04
Thanks for your comment. I had a problem with the JS you posted above, it was saying that `panel` was undefined. I came up with a solution which merged your example with another. See my updated post for the code. — Dan Ellis, Aug 02 '11 at 13:37

Update JavaScript after C# UpdatePanel update

1 Answers1