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-02 12:08:49Z

5

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>

edited Aug 2, 2011 at 12:08

answered Aug 2, 2011 at 12:00

Mehdi Maujood

4005 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mehdi Maujood Over a year ago

In fact, I just found an even better way to execute javascript rendered from an update panel refresh: stackoverflow.com/questions/1625791/… .. This is the actual problem you're having.

Dan Over a year ago

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.

Collectives™ on Stack Overflow

Update JavaScript after C# UpdatePanel update

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related