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

Looks like you're adding it over and over again in lprm.add_pageLoaded(panelLoaded)l. It probably never gets removed from prm and each time you're laoding the page it's adding a new instance. Try setting a breakpoint there and seeing how many panelLoaded calls are in prm. Does prm have a remove_pageLoaded(); option? — StoriKnow, Aug 03 '12 at 20:24
Thanks, you are right on the spot, it is Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(panelLoaded); — eastboundr, Aug 03 '12 at 20:42

score 4 · Answer 1 · answered Aug 03 '12 at 20:25

4

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

answered Aug 03 '12 at 20:25

competent_tech

44,465
11
90
113

This worked for me too. I was adding a textchanged event, and it was behaving like first two requests were cancelled and third one actually processed. Due to which my progress indicator/loader was not work as it should have been – Atta H. Sep 27 '18 at 10:28

score 1 · Accepted Answer · answered Aug 03 '12 at 20:41

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.

answered Aug 03 '12 at 20:41

eastboundr

1,857
8
28
46

score 0 · Answer 3 · answered Aug 03 '12 at 20:46

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.

Why does my function run multiple times after UpdatePanel is loaded

3 Answers3