maintaining jquery click function in update panel through PageRequestManager RSS

• • Reply
  

  cweiz32

  Member

  1 Points

  14 Posts

  maintaining jquery click function in update panel through PageRequestManager

  May 02, 2010 02:12 PM|LINK

  I'm sort of new to jQuery and I have a bit of a dilemna with a function I'm trying to register on a button click event.  The problem lies within an UpdatePanel.  I want to scroll to a particular set of results after I click a filter button.  You can register what I want to accomplish by doing this:

  $("#AssessmentItemFilter1_continuemultiple").click(function() {
       goToByScroll('#tableResults');
  });
  
  
  function goToByScroll(element) {
       var el = $.browser.opera ? $("html") : $("html, body");
       el.animate({ scrollTop: $(element).offset().top }, 'slow');
  }

  
  That works great without an updatepanel, but on the page I am working with, the UpdatePanel is necessary, so I added the typical workaround for jQuery by integrating the jQuery logic with the endRequest function on the PageRequestManager:

          $(document).ready(function() {
              $("#AssessmentItemFilter1_continuemultiple").click(function() {
                  var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
                  pgRegMgr.add_endRequest(EndHandler);
              });
          });
  
          function EndHandler() {
                  goToByScroll('#tableResults');
          }

  
   Doing that gets the function registered but the scroll happens now on every partial postback because the function itself gets assigned through the endhandler and not the actual assignment to the filter click event. 

  My question is how do I get that to work to allow the click to be the only event that fires that scroll while using that endRequest functionality?  It doesn't seem to work if I do this because it doesn't work the first time you click the filter button:

          $(document).ready(function() {
              $("#AssessmentItemFilter1_continuemultiple").click(function() {
                  var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
                  pgRegMgr.add_endRequest(EndHandler);
              });
          });
  
          function EndHandler() {
              $("#AssessmentItemFilter1_continuemultiple").click(function() {
                  goToByScroll('#tableResults');
              });
          }

  I'm probably doing something out of sequence there so any help would be appreciated. 
  

  • Moved by mbanavige on May 15, 2010 12:13 AM
• • Reply
  

  tpeczek

  Contributor

  2112 Points

  260 Posts

  Re: maintaining jquery click function in update panel through PageRequestManager

  May 02, 2010 06:22 PM|LINK

  Because I don't know the exact build and logic of your page, I can't promise you that this will help, but it's worth trying. Instead of using the endRquest, try this:

  $("#AssessmentItemFilter1_continuemultiple").live('click', function() {
       goToByScroll('#tableResults');
  });
  
  
  function goToByScroll(element) {
       var el = $.browser.opera ? $("html") : $("html, body");
       el.animate({ scrollTop: $(element).offset().top }, 'slow');
  }

  Note that this require jQuery 1.3. 

  Please indicate "Mark as Answer" if a post has answered the question.
  Yet another developer blog <-- visit my blog
• • Reply
  

  bruce (sqlwo...

  All-Star

  37616 Points

  5574 Posts

  Re: maintaining jquery click function in update panel through PageRequestManager

  May 02, 2010 11:07 PM|LINK

  first is the the element you are attaching the click to in the update panel? if so you need to rebind the click handler in the endHandler (so it will work on a click). you should also unbind the old handler or you will have a memory leak (the browser can not release the element because of a reference to it).

  second is the results in the update panel? if so you need to scroll in the endhandler after its rendered. you will need a flag (the Sys.Weforms class is not well designed for this case).

  
  

  bruce (sqlwork.com)
• • Reply
  

  cweiz32

  Member

  1 Points

  14 Posts

  Re: maintaining jquery click function in update panel through PageRequestManager

  May 03, 2010 12:10 AM|LINK

  tpeczek

  Because I don't know the exact build and logic of your page, I can't promise you that this will help, but it's worth trying. Instead of using the endRquest, try this:

  <div class="dp-highlighter"><div class="bar"><div class="tools">view plaincopy to clipboardprint?</div></div>

  1. $("#AssessmentItemFilter1_continuemultiple").live('click', function() {  
  2.      goToByScroll('#tableResults');  
  3. });  
  4.   
  5. function goToByScroll(element) {  
  6.      var el = $.browser.opera ? $("html") : $("html, body");  
  7.      el.animate({ scrollTop: $(element).offset().top }, 'slow');  
  8. }  

  </div>

  $("#AssessmentItemFilter1_continuemultiple").live('click', function() {
       goToByScroll('#tableResults');
  });
  
  
  function goToByScroll(element) {
       var el = $.browser.opera ? $("html") : $("html, body");
       el.animate({ scrollTop: $(element).offset().top }, 'slow');
  }

  Note that this require jQuery 1.3. 

  
  

  
  

  I actually tried that as well with the live function.  In my scenario, it worked after the second click (the first click did not scroll at all) and scrolled before the partial postback to populate the list.  It needs to scroll after the postback is complete.  I'm using jQuery 1.4.  

  
  

  • Edited by cweiz32 on May 03, 2010 12:11 AM
• • Reply
  

  cweiz32

  Member

  1 Points

  14 Posts

  Re: maintaining jquery click function in update panel through PageRequestManager

  May 03, 2010 12:38 AM|LINK

  bruce (sqlwork.com)

  first is the the element you are attaching the click to in the update panel? if so you need to rebind the click handler in the endHandler (so it will work on a click). you should also unbind the old handler or you will have a memory leak (the browser can not release the element because of a reference to it).

  second is the results in the update panel? if so you need to scroll in the endhandler after its rendered. you will need a flag (the Sys.Weforms class is not well designed for this case).

  
  

  Yes everything is taking place in the update panel.  The button and the results are inside of the panel.  I'm not sure I exactly follow you on what your suggesting though based on my level of understanding of the whole process.  Would you be willing to share an example or a source for what you are referring to?  I tried the following, but I think I'm just doing it all wrong and I have no idea how to work the flag you mentioned to check rendering.

  $(document).ready(function() {
              $("#AssessmentItemFilter1_continuemultiple").click(function() {
                  goToByScroll('#tableResults');
              });
              var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();
              pgRegMgr.add_endRequest(EndHandler);
          });
  
  
          function EndHandler() {
              var handler = function() {
                  goToByScroll('#tableResults');
              }
              $('#AssessmentItemFilter1_continuemultiple').unbind('click', handler);
              $("#AssessmentItemFilter1_continuemultiple").click(function() {
                  goToByScroll('#tableResults');
              });
          }