How to call a client side javascript function after a specific UpdatePanel has been loaded

James picture James · Dec 3, 2008 · Viewed 43.4k times · Source

How is it possible to call a client side javascript method after a specific update panel has been loaded?

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler) does not work for me because this will fire after ANY update panel finishes loading, and I can find no client side way to find which is the one

ScriptManager.GetCurrent(Page).AsyncPostBackSourceElementID AsyncPostBackSourceElementID does not work for me as this is a server side object, and i want Client Side

The ClientSide .Net framework must know which UpdatePanel it is updating in order to update the correct content. Surely there is a way to hook into this event?

Any help would be appreciated.

Answer

James picture James · Dec 4, 2008

Thanks - both good answers. I went with the client side script "pageloaded" in the end. That is a fairly buried method that google did not reveal to me. For those who are interested, this code works with FireBug to give a good demo of the PageLoaded method working to find the updated panels:

<script type="text/javascript">
        $(document).ready(function() {
            panelsLoaded = 1;
            Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(PageLoaded)
        });

        function PageLoaded(sender, args) {
            console.log("I have occured " + panelsLoaded++ + " times!");

            var panelsCreated = args.get_panelsCreated();
            for (var i = 0; i < panelsCreated.length; i++) {
                console.log("Panels Updating: " + panelsCreated[i].id);
            }

            var panelsUpdated = args.get_panelsUpdated();
            for (var i = 0; i < panelsUpdated.length; i++) {
                console.log("Panels Updating: " + panelsUpdated[i].id);
            }
        }
    </script>