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.
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.