ASP.NET - UpdatePanel and JavaScript

Question

Is there a way to execute script when an UpdatePanel process is finished.

I have a page that allows "inserting", "copying", and "editing" of a record. This is all done on an UpdatePanel to prevent a page navigation. Somewhere else on the page I would like to print a "flash" message - like "You have successfully entered a record." It is not near the UpdatePanel and I'd like to use a jQuery effect on the message so it fades out after 4 seconds. How can I send script back with the UpdatePanel or have it execute after a UpdatePanel refresh? Should I write script to an asp:literal? thoughts?

Answer 1

Yes:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequestHandler);

And then:

function endRequestHandler(sender, args)
{
  // Do stuff
}

Documentation here and here. Keep in mind that this will fire for every AJAX request on the page.

Answer 2

This should do the trick:

       <script type="text/javascript">
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(BeginRequestHandler);
            prm.add_endRequest(EndRequestHandler);

            function BeginRequestHandler(sender, args) 
            {
                 //Jquery Call
            }

            function EndRequestHandler(sender, args) 
            {
                 //Jquery Call

            }
        </script> 

Answer 3

Here is an article for how to do it using ScriptManager's static method RegisterClientScriptBlock. Tried it and works like a charm.

http://csharperimage.jeremylikness.com/2009/06/inject-dynamic-javascript-into-aspnet.html

Answer 4

var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager.add_beginRequest(function () { alert('here1') });
requestManager.add_endRequest(function () { alert(here2') });

Source: http://www.howtositecore.com/?p=36

Answer 5

The Sys.WebForms.PageRequestManager.getInstance() method works great for me as well.

I work with a lot of pages that contain multiple Updatepanels and I've learned that this will automatically fire even if the Updatepanel you don't want it for refreshes. So inside the function that fires on the event make sure you have something like:

function BeginRequestHandler(sender, args) {
if (args.get_postBackElement().id == "ID of the Updatepanel") {
// do stuff here

Answer 6

Bruno,

First, to answer your direct question. In your callback that is being called by the update panel, you should be able to use a RegisterStartupScript call to invoke a JS method . Then in your JS method, you would show the message and then you can use do a:

setTimeout('$('#myMessage').fadeOut("slow")', 4000);

to have it fade away after 4 seconds.

To go one step further, since you're already implementing JavaScript, I would invite you to check out this article about UpdatePanels. If possible, I would try to send Ajax calls to do your inserting, copying, and editing and this would further simplify your user feedback and would prevent excess info across the wire.