• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 689
  • Last Modified:

How to call a JavaScript function after an Updatepanel updated

I have an Updatepanel that covers 2 controls one of which is a Google map.  I need to update the data display on the map based on the what is in the other control which is a list.  In my code behind file I have a function to construct a string that draw the points on the map.  I debug the string and know that I get the map points correctly. To draw the map and the data on the page, I have a JavaScript function and I call that JavaScript function in my markup like so:

         <script type="text/javascript">
                  $(document).ready(load);
          </script>
                       
function load is defined in another JavaScript section.  The way I call the load function will just occur at the first time the page is requested and loaded.  When the Updatepanel on the page gets updated after a postback, that load function won't get call again to redraw the map.  

     How can I call that load function again after a postback for the Updatepanel or is there another way to call that load function after an initial load and after a postback?

Thank you.
0
lenguyen0366
Asked:
lenguyen0366
1 Solution
 
raaziqCommented:

<script language=javascript>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler()
{
          // Call the javascript function
}

....
</script>
0
 
lenguyen0366Author Commented:
Hi raaziq,

    Your comment gives me a hint, I did try to go with your suggestion with some changes and it shows that it works.  I write a small test program with the map centered on different coordinates and couple of Next and Previous buttons on the same Updatepanel as the map so the buttons can cause the postback and the Updatepanel will update the map again with new coordinates by calling the load function.  Here is your suggestion with my changes.

<script language=javascript>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(load);

//to draw the map
function load()
{

}

</script>

//In the markup where I call the load function to draw the map, I change to:

<script type="text/javascript">
        load();
</script>

Notice that I don't have
$(document).ready(load);
any more.  Also, in the add_endRequest handler, I call the load function directly and not going through another layer function of EndRequestHandler, although they should have the same effect.

    Thank you for your comment, it shows that this method works.

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now