3

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.

  • You might have already done this, but to troubleshoot the problem further, try adding a console.log('I should enable here'); right before you call your action function. Additionally, add console.log('function complete'); as the first part of your oncomplete. This will give you a little insight into where the breakdown is occurring. – dsharrison Dec 15 '15 at 0:35
  • Why are you returning false oncomplete? – Phil B Dec 15 '15 at 1:13
  • I'm using it to avoid the full page refresh after the jQuery calls the callEnableCheckbox method. – ynl124 Dec 15 '15 at 1:35
  • Did you try those console.log statements? If so, which printed? – dsharrison Dec 15 '15 at 2:21
  • @D.S. When I checked the console log, it shows the following error: Uncaught ReferenceError: jQuery is not defined. (anonymous function) @ vfPageName:5 Here are the lines 5,6, & 7in the vf page: if ($j(this).scrollTop() + $j(this).innerHeight()>=$j(this)[0].scrollHeight){ callEnableCheckbox(); } – ynl124 Dec 15 '15 at 23:55
4

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>
  • Thanks for your reply. I have corrected it to lowercase (callEnableCheckbox) and it is still not working. – ynl124 Dec 15 '15 at 0:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.