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?

1. I am using Jquery in the client and using the PHP in the server side.
2. 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');
    }
});