How to call function based on scroll bar click? - php

Question

I am having the Div with scroll bar.When User clicks the scroll bar I need to call the function based on the scroll bar click.How can I make a call?
I am using Jquery in the client and using the PHP in the server side.
I know how to make ajax calls and etc.Only think is I need to make this call when scroll bar is clicked in that div.
Is it possible to make the ID for the scroll bar in that div.

Answer 1

You can bind to the scroll event, it's not fired when the user clicks the scroll-bar but it is fired when the scroll-bar moves for any reason:
//wait for document.ready to fire, meaning the DOM is ready to be manipulated
$(function () {
//bind an event handler to the `scroll` event for your div element
$('#my-scroll-div').on('scroll.test-scroll', function () {
//you can do your AJAX call in here, I would set a flag to only allow it to run once, because the `scroll` event fires A LOT when scrolling occurs
});
});
Note that .on() is new in jQuery 1.7 and in this case is the same as using .bind().
To set a flag like I suggest above:
$(function () {
var AJAX_flag = true;
$('#my-scroll-div').on('scroll.test-scroll', function () {
if (AJAX_flag === true) {
AJAX_flag = false;
$(this).off('scroll.test-scroll');
$.ajax({...});
}
});
});
Update
The best solution to adding event handlers to dynamically created elements is to bind to them before adding them to the DOM:
function scroll_func () {
var AJAX_flag = true;
$(this).on('scroll.test-scroll', function () {
if (AJAX_flag === true) {
AJAX_flag = false;
$(this).off('scroll.test-scroll');//unbind the event handler since we're done with it
$.ajax({...});
}
});
}
$.ajax({
...
success : function (data) {
//note that this selector will have to change to find the proper elements for you, if you are unsure how to select, start by seeing what data is by doing a `console.log(data);`
$(data).find('#my-scroll-div').on('scroll', scroll_func).appendTo('#container-element');
}
});