Saturday, March 24, 2012

Execute a JavaScript on AJAX Update

I tried submitting this once, but it did not show so I will try again.

I have a page with multiple UpdatePanels on it and when one of those panels is updated I want to fire a javascript to track the action. For exapmple I have a Slideshow panel, a panel containing paged comments, and a panel that allows someone to add a comment. If they click the next button on the slideshow panel I want to execute a Javascript command like "TrackAction('photoView')" when the panel updates with the new photo or if they add a comment and it is validated by the server I want to execute a Javascript command like "TrackAction('commentAdded')".

Atlas used to reload the scripts in the head everytime a panel was updated so I culd modify them before they were executed, but it appears that was "fixed" in MS AJAX. Any ideas on how to accomplish this?

You could use the events exposed in the client library class called PageRequestManager.

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

Basically, after the response comes back from the server from an async postback you can see all the panels that are updated, created, or deleted. You can then take action based on that. The last example on this page:http://ajax.asp.net/docs/tutorials/UpdatePanelClientScripting.aspx has a animation example that shows how to base a simple animation on what button was clicked on a page and using the pageLoaded event of the PageRequestManager.


Thanks. I think I may be able to modify that to work. It may be tricky because some panels cause other panels to update (like the "Add Comment" would also refresh the "Comment List" panel, but I think it may work. It would be nice to be able to do it from the code behind to be sure of exactly what just happened, but you have to work with what you are given.

No comments:

Post a Comment