Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer 1

up vote 2 down vote accepted

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 :)

share|improve this answer
    
I have never heard of this but very glad for your assistance. Where did you reference this from? I would like to read more about it. Thanks again this has saved me! –  ChiliYago Jun 29 '12 at 17:27
    
Just simply google "PageRequestManager" and you'll get loads of reading material on the subject :) Glad I could help. –  Daniel Ziga Jun 29 '12 at 19:36
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.