Why does my function run multiple times after UpdatePanel is loaded

Question

So I want to run some javaScript function after my updatepanel is updated, so I have:

function pageLoad() { 

    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(panelLoaded);
}


function panelLoaded(sender, args) {
        alert("foobar");
}

With the above code, if I update the panel one time, "foobar" will be alerted one time; If I update the panel the second time, "foobar" will pop up twice; the third time I trigger the panel to update, "foobar" popped up three times... 4th time pop 4 times so on and so forth....

What caused this??

Thanks~~~

Answer 1

Thanks all, problem seem to be having too many prm instances as Sam mentioned. I added Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(panelLoaded); after the alert() and everything is good.

Answer 2

This is because pageLoad is executed during updatepanel postbacks as well. There is an easy solution:

function pageLoad(sender, eventArgs) {
    // If this is being executed by ajax
    if (eventArgs) {
        // And this is only a partial load
        if (eventArgs.get_isPartialLoad()) {
            // Don't perform any further processing
            return;
        }
    }
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(panelLoaded);
}

Answer 3

This is what is happening. pageLoad basically functions as a combination of Application.Init and PageRequestManager.EndRequest. That means it works on Application Initialization ( approximately DOM Ready ) and on each Partial PostBack

So pageLoad works on all PostBacks; full and partial.

Now you are binding up pageLoaded event again on the ScriptManager's instance on every partial postback again and again causing this behaviour.