Solved

How to call a JavaScript function after an Updatepanel updated

Posted on 2010-08-27
2
676 Views
Last Modified: 2013-11-11
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
Comment
Question by:lenguyen0366
2 Comments
 
LVL 3

Accepted Solution

by:
raaziq earned 500 total points
ID: 33543858

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

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

....
</script>
0
 

Author Closing Comment

by:lenguyen0366
ID: 33553346
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

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We o…
A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

778 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question