You need hard work to get Lucky!

They are ill discoverers that think there is no land, when they can see nothing but sea.

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”);
     }
 }

AddThis Social Bookmark Button  
View zeeshan malik's LinkedIn profileView zeeshan malik’s profile
Advertisements

56 Responses to “How to call client-side Javascript function after an UpdatePanel asychronous (Ajax) request is over”

  1. 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!

  2. 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

  3. 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.

  4. 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 !

  5. 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.

  6. 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.

  7. Naveed Mazhar said

    Nice article. Keep it up.

  8. Imran Bhadelia said

    Its not working in Safari andd Google Crome, any suggesstion or any patch for this?

  9. […] https://zeemalik.wordpress.com/2007/11/27/how-to-call-client-side-javascript-function-after-an-update… […]

  10. Ola said

    Thanks, just what i needed .. me to 😉

  11. Nico said

    Very nice thanks.
    greez from Germany 😉

  12. shivakanth said

    Nice article
    Thanks

  13. 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

  14. 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

  15. 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.

  16. Vidal said

    Thanks Zeemalik … I´m still working on it .. I´ll let you know if I make it work

  17. 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?

  18. 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.

  19. BillE said

    Looks like my link disappeared. Here again in plain text.

    http://www.uploadify.com/forum/viewtopic.php?f=7&t=142

  20. Neo said

    Thanks a lot!! this is exactly what i was looking for..

  21. 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
    }

  22. 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

  23. malappuram said

    this is what i exactly needed

  24. eh. really like it 🙂

  25. Heba said

    Many Thanks, thats reaaly helped, exactly what i was looking for 🙂

  26. Lucio said

    GREAT!!!

  27. Denis said

    Many thanks , you are life saver. 🙂

  28. Mark said

    THANKS A LOT!!!

  29. Joey said

    It worked! I spent hours trying to figure this out before, thank you!

  30. Kandarp Joshi said

    hI
    ITS VERY VERY VERY NICE

    Thanks a lot!! this is exactly what i was looking for..

  31. Sandrine Ngo said

    Thanks much,i love u,u helped me alotz, u r awesome

  32. 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.

  33. 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 🙂

  34. Karan said

    Worked absolutely. Thanks.

  35. John Singh said

    This was very helpfull thanks

  36. jayesh said

    Done great job dude.
    Perfect solution and also easy to understand..

  37. 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!

  38. John said

    Thanks, just saved me a lot more time trying to solve this!

  39. 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.

  40. 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
    {

    }

    }

  41. Greg said

    Great stuff Zeemalik, I have run into this before and never really had time to solve it. Very much appreciated!

  42. Tiger said

    Thanks………

  43. Scott said

    Nice job. You’re approach was perfect for what I was doing.

  44. Thank you for code. Excellent and very useful. I spent more than 8 hours before I have found this. Thank you again

  45. sadheesh said

    HI,

    You have solved my problem.

    Thanks a lot.
    sadheesh

  46. danish Akber said

    thanz dear

  47. Carcharodon said

    Thank you so much for this article!!!

  48. five years later and this post is still solving problems.

  49. Chris said

    Great – don’t know where you got this from, but you saved me a lot of headaches! Thanks.

  50. 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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: