How to call client-side Javascript function after an UpdatePanel asychronous (Ajax) request is over
Posted by zeemalik on November 27, 2007
If you are using AJAX then the only way i have found yet to give an alert to a user on return to the Asynchronous post back is to add an “end request” handler to the PageRequestManager.
In this way you can tell the request manager to run a javascript function on returning from a Asynchronous post back event of AJAX.
Code for doing this is :
function load()
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
where “EndRequestHandler” will be the name of your javascript function you want to call.
Call the above function in Onload event of <body> tag:
<body onload=”load()”>
function EndRequestHandler()
{
alert(“You record has been saved successfully”);
}
Now If you want to give a different message based on your logic in server side code (code behind) then you can use a server side Hidden Field:
<input id=”hdnValue” type=”hidden” runat=”server” value=”" />
Set its value in server side code on Asychronous Post Back:
Protected Sub btn_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnCreateSample.Click
If condition Then
hdnValue.value = “do this”
Else
hdnValue.value = “do that”
End If
End Sub
Now you can check the value of this Hidden Field in your Client Side EndRequestHandler function and give a different alert to user based on its value:
function EndRequestHandler()
{
if (document.getElementById(‘<%= hdnValue.ClientID %>’).value == “do this”)
{
alert(“You record has been saved successfully”);
}
else
{
alert(“There is an error”);
}
}
 |
 View zeeshan malik’s profile
|
Chris said
This functionality is exactly what I need, but does it require ASP.Net v3.5? I don’t see how to get the Sys.WebForms… when using v2.0. How would I accomplish the same outcome using v2.0? Thanks!
Lukk said
Hi,
This post was exactly what I was looking for!
Chris:
it works with .net 2.0 – maybe you have to add some update panels and a script manager onto your page…
Many thanks, zeemalik
Lukk
Spud said
Awesome! The only decent article on the subject. Works in v.20.
You can set any javascript to run on the server by doing :
function EndRequestHandler()
{
eval(document.getElementById(’’).value);
document.getElementById(’’).value = ”;
}
Works a beaut.
Dan Cook said
Life-saver. Cheers.
As a small contribution, if you want to call something in the initial page load AND on any subsequent refresh of update panel, the codes below. Might save 5 mins of messing about.
Then….
function onBodyLoad()
{
//do something here
load();
}
function EndRequestHandler(sender, args) {
//do same thing here
}
function load() {
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
}
zeemalik said
@Dan Cook
Thanks for the input. But i didn’t get your point. What is the difference between your code in comments and the code i have written in my post?
Also i want to accomplish the same task “if you want to call something in the initial page load AND on any subsequent refresh of update panel, the codes below.” using FaceBox (JQuery) but i am unable to do it yet. EndRequestHandler is not firing inside the FaceBox.
Any idea how to accomplish this?
Regards
zeemalik78@yahoo.com
Piyush Verma said
This article is exactly same what I am looking for.
Actually I am devloping a chat application and i wanted to change the title by calling a javascript function after the postback.
Dan said
THANKS! After adding scriptmanager and updatepanel I could not longer call my alert function. After adding your code, it works great! Thanks again for the time you spent to publish this solution.
Naveed Mazhar said
Nice article. Keep it up.
jQuery effects not working after UpdatePanel Asynchronous request is over « Imran Akram’s Blog said
[...] http://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-update... [...]
Ola said
Thanks, just what i needed .. me to
Nico said
Very nice thanks.
greez from Germany
shivakanth said
Nice article
Thanks
Bruno said
I have same problem, but I’am working with master pages, so I can’t put anything in tag because it’s not in content page. Have idea how to solve this?
Thanks
zeemalik said
Hi Bruno! This is Zeemalik . Please explain your problem in detail so that i might be able to help you.
http://www.linkedin.com/in/zeeshanmalik
Regards
Vidal said
Hi Zeemalik,
In my case I´m working with a jquery plugin, all the jquery functions are in a separated files (*.js) which I reference from my aspx file, in my aspx file I have an Update Panel which has inside a call to one of the functions in my jquery files that trigger all the functions that make the jquery component works, after an Update Panel asynchronous request the jquery component stop working… if I understand well your solution I should put all the code in my .js files within the EndRequestHandler(), is this right? if so, then I have to put a lot of code in there, or is there another way to do it? maybe I’m not getting your solution…
Vidal
zeemalik said
@Vidal. Thanks for your comments. You can try adding the code in .js files it might work. I am also facing similar kind of issue. I am using FaceBox (JQuery Plugin) and when i post back inside the FaceBox it do not fire EndRequestHandler. If you get lucky in making it work please also notify me with the solution.
Regards,
zeemalik78@yahoo.com
Vidal said
Thanks Zeemalik … I´m still working on it .. I´ll let you know if I make it work
Vidal said
Zeemalik, I´m trying right now with the ScriptManager.RegisterClientScriptInclude method, but I just can´t make it register my .js files, have you already tried this method before?
BillE said
This is a nice description of using a jQuery plugin “uploadify” in asp.net using the RegisterClientScriptInclude Methods. Works nice in an updatepanel.
BillE said
Looks like my link disappeared. Here again in plain text.
http://www.uploadify.com/forum/viewtopic.php?f=7&t=142
Neo said
Thanks a lot!! this is exactly what i was looking for..
Prakash said
hi,
how can i call my javascript method with parameters at the end of the request?
for example,
function DynamicPostBack(ControlId)
{
//method body
}
Nikhil said
Hi zeemalik,
My problem is I have a grid on page where we have updatepanel. On the grid there is Edit link which take to next page. On the next page I update the record and clicked save button. After updating the record, I click back button. On that Back button I have written Javascript History.go back. but when I click on this page it does not retain its state. i.e. If on the grid I was on 6 page, when I click back of Next page then I am on the first page.
Update Panel and Javascript go back is not working in the same manner.
If i remove update panel my problem is resolved the state is maintained on the grid but the data in the grid is not refreshed.
Please help
malappuram said
this is what i exactly needed
Heba said
Many Thanks, thats reaaly helped, exactly what i was looking for