CODEWITHSUNDEEP
asp.netasp.net-ajaxupdatepanel
BuddyJoe
BuddyJoe

Reputation: 71161

ASP.NET - UpdatePanel and JavaScript

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?

Upvotes: 25

Views: 39499

Answers (6)

Brian Lorraine
Brian Lorraine

Reputation: 183

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

Upvotes: 3

Mike
Mike

Reputation: 31

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

Upvotes: 3

ctorx
ctorx

Reputation: 6951

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

Upvotes: 4

cgreeno
cgreeno

Reputation: 32411

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>

Upvotes: 28

AdamB
AdamB

Reputation: 9110

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.

Upvotes: 2

Robert C. Barth
Robert C. Barth

Reputation: 23355

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.

Upvotes: 32

Related Questions