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
|
You need hard work to get Lucky! 
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!
Vegins said
I’m just guessing, but did you try to put the Sys.WebForms… at the serverside? It’s actually JavaScript, and is to be placed at the clientside.
Example of usage of Sys.WebForms.. in JS : http://msdn.microsoft.com/en-us/library/bb383810.aspx
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
LakshmiSujaa said
Hi ! It is Working Fine ! Thank You !
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.
Imran Bhadelia said
Its not working in Safari andd Google Crome, any suggesstion or any patch for this?
jQuery effects not working after UpdatePanel Asynchronous request is over « Imran Akram’s Blog said
[…] https://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
pranav said
Were you able to make facebox work with asp.net? If yes, could you please provide a sample code?
thanks.
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
tiny pee hole said
eh. really like it 🙂
Heba said
Many Thanks, thats reaaly helped, exactly what i was looking for 🙂
Lucio said
GREAT!!!
Denis said
Many thanks , you are life saver. 🙂
Mark said
THANKS A LOT!!!
Joey said
It worked! I spent hours trying to figure this out before, thank you!
Kandarp Joshi said
hI
ITS VERY VERY VERY NICE
Thanks a lot!! this is exactly what i was looking for..
Sandrine Ngo said
Thanks much,i love u,u helped me alotz, u r awesome
Hi said
Hi,
As the function endRequest is:
function EndRequestHandler(sender, args) {}
How could I retrieve the ID of the button where I click based on ‘sender’ and ‘args’?
Thanks in advance.
krislogy said
Hi..
I think we can also use Page.RegisterStartupScript(..) to call some javascript. It is called from the server side, and there’s no need of eventHandlers and al.
What I would like to know if which one’s better? and when, and why?
Thx 🙂
Karan said
Worked absolutely. Thanks.
John Singh said
This was very helpfull thanks
jayesh said
Done great job dude.
Perfect solution and also easy to understand..
jayesh said
Also Try this code
string script = “alert(‘Message’)”;
ScriptManager.RegisterClientScriptBlock(this, typeof(UpdatePanel), “jscript”, script,true);
Jelly said
This works! Calling a javascript function after updating updatePanel. Thank you sooo much. You have no idea how much this save me!
John said
Thanks, just saved me a lot more time trying to solve this!
Greg G said
After 2 hours of trying other unsuccessful methods I stumbled across your solution and Bam! It worked first time out of the gate. Thanks a billion.
shivam charan said
client side code:
function closeMe() {
var p = parent;
p.$(“#TB_window”).remove();
p.$(“#TB_overlay”).remove();
}
protected void btnlogin_Click(object sender, EventArgs e)
{
if (checkuser(UserName.Text, Password.Text))
{
// i want to call closeMe function here.
}
else
{
}
}
Greg said
Great stuff Zeemalik, I have run into this before and never really had time to solve it. Very much appreciated!
Tiger said
Thanks………
Scott said
Nice job. You’re approach was perfect for what I was doing.
bogdanstojanovicBogdan said
Thank you for code. Excellent and very useful. I spent more than 8 hours before I have found this. Thank you again
sadheesh said
HI,
You have solved my problem.
Thanks a lot.
sadheesh
danish Akber said
thanz dear
Carcharodon said
Thank you so much for this article!!!
...Marquito said
five years later and this post is still solving problems.
Chris said
Great – don’t know where you got this from, but you saved me a lot of headaches! Thanks.
california real estate License said
Wow, wonderful weblog format! How lengthy have you ever been blogging for?
you make running a blog look easy. The entire glance of your web site is fantastic,
as smartly as the content!