__doPostBack disables my jquery code?

Question

I am really struggling with a SharePoint page I am creating which contains a DataFormWebPart which pulls data and displays it in a table. The table has pagination controls like you would expect.

I have added some jQuery code to handle hover events on items in the table which works on initial page load no problem. The problem is once you click next to paginate the data my hover jquery code no longer functions after the DataFormWebPart refreshes.

In this case ajax refreshes are enabled on my web part which is the desired setting. If i turn off ajax refreshes the entire page reloads which I don't want to happen for other reasons.

$(document).ready(function () {

   rolloverHandler();
   $("td.ms-paging img").click(function () {
        alert("click")
        rolloverHandler();
   });

   function rolloverHandler() {
      $("img.ILikeItImg").hover(function () {
      $(this).attr("src", 'button.png');
   }, function () {
      $(this).attr("src",'button_small_gray.png');
   });
  }
});

The rolloeverHandler() is called on page load and I have attempted to re-apply the rollerover code to the click event of img tag in the ms-paging td. But this not working.

I have posted similar questions where my initial resolution was to disable the ajax refresh but I need to find an answer that keeps my jquery code viable after the web part refreshes under an ajax scenario.

Thanks for reading.

Answer 1

You'll have to use the Sys.WebForms.PageRequestManager.getInstance(); in order to make sure that all javascript is processed again after every change or update on the current page.

Example:

<script type="text/javascript">
var requestManager = Sys.WebForms.PageRequestManager.getInstance();
requestManager.add_beginRequest(BeginRequestHandler);
requestManager.add_endRequest(EndRequestHandler);

function BeginRequestHandler(sender, args) {
    // Add your logic here
};

function EndRequestHandler(sender, args) {
    // Add your logic here
    // This is where you trigger all the functions needed AFTER the DOM has been loaded
};
</script>

More info here

Hope this helps :)