Visualforce actionFunction not working when used with jQuery

Question

I'm developing a visualforce page and using jQuery in it to identify if the user has scrolled through a div to its bottom (scrolling down is assumed as a confirmation that the user has read all the contents with in that div). There is a checkbox below this div, which is disabled until the user scrolls down the div. However, the checkbox is remaining disabled even after I scroll down to the bottom of the div. Can anybody please help me here? Thanks in advance!

Following is the jQuery code I'm using:

<script src="code.jquery.com/jquery-1.11.3.min.js">
$j = jQuery.noConflict();
$j('#agreement').scroll(function() {       
    if ($j(this).scrollTop() + $j(this).innerHeight()>=$j(this)[0].scrollHeight){
        callEnableCheckbox();
    }
});
</script>

This is the div:

<div id="agreement" style="overflow:auto; text-align:left; height:500px; width:100%; border:1px solid black; padding:5px;">
<!-- Some Text -->
</div>

This is the actionFunction that activates the following checkbox:

<apex:actionFunction name="callEnableCheckbox" action="{!enableCheckbox}" oncomplete="return false;" rerender="hiddenField,confirm"/>
<apex:inputHidden value="{!disabled}" id="hiddenField"/>    
<apex:inputCheckbox id="confirm" disabled="{!disabled}" value="{!accepted}" required="true"/>

Controller methods:

public <constructor>(){
    disabled = true;
}

public PageReference enableCheckbox(){
    disabled = false;
    return null;
}

Note: It worked fine when I used the following javascript method and "onscroll" (in the div) along with the above actionFunction and controller methods:

function callApexOnScroll()
{
    callEnableCheckbox();
}

<div id="agreement" onscroll = "callApexOnScroll(); return false ;" style="overflow:auto; text-align:left; height:500px; width:100%; border:1px solid black; padding:5px;">
<!-- Some Text -->
</div>

But the problem with the above solution is that the checkbox is enabled even before the scroll bar reaches the bottom of the div. It is enabled right after the scrolling has started which is not an ideal solution as it has to be enabled only after the user has scrolled down the div completely.

Answer 1

JavaScript is case-sensitive. In one function name, you've got an uppercase C and in another you've got a lowercase c. The name attribute on the <apex:actionFunction tag is used as the name of the JavaScript function when it is rendered into the page.

Because you have <apex:actionFunction name="callEnableCheckbox" you must call this function with a lowercase c.

<script>
    $j = jQuery.noConflict();
    $j('#agreement').scroll(function() {       
        if ($j(this).scrollTop() + $j(this).innerHeight()>=$j(this)[0].scrollHeight){

            // lowercase c to match the name on the actionFunction tag
            callEnableCheckbox();
        }
        else {}
    });
</script>