0

I was trying to implement lazy loading without Datatable for learning purposes. So I created a table that shows 20 record's data initially and as I keep scrolling to the end of the table, every time 20 new records will be added at the end of the table. I did this by using document.addEventListener('scroll', function (event) {} in the doInint method. Now the response for the first two scroll from the server-side controller comes instantly but from the third scroll, it starts to take more and more time but if I click in any button or do any kind of user interaction like changing the tab the response comes instantly and from that moment the responses start to come instantly. I don't really get it why this is happening. Any thought? In the controller.js, I have something like this

doInit: function (component, event, helper) {
    let action = component.get('c.getRecords');

action.setParams({});

$A.enqueueAction(action, false);

action.setCallback(this, function(response){
    let responseValue = response.getReturnValue();
    component.set("v.recordList", responseValue);
}, 'SUCCESS');
document.addEventListener('scroll', function (event) {
    let el = document.getElementById('dataTable')
    if($(window).scrollTop() == $(document).height() - $(window).height()){
        console.log("Scrolled to the end");

        let amount =  component.get('v.numberOfRecords');

        component.set("v.numberOfRecords", amount + 20);
        let action = component.get('c.getRecordsOnScroll');

        action.setParams({
            x : amount + 20,
        });

        $A.enqueueAction(action, false);

        action.setCallback(this, function(response){
            let responseValue = response.getReturnValue();
            let state = response.getState();
            alert(state);
            component.set("v.recordList", responseValue);
        }, 'SUCCESS');
    }
})
 }
0
0

You can't fire Aura events while you're outside of the Aura Life Cycle. This starts when an Aura event is fired, and a controller method is called, and ends when the controller method ends. Your scroll handler is a callback function, meaning it will be called in response to a JavaScript event, not an Aura event. At this point, you are outside the Aura Life Cycle, so no Aura events will be processed, until the next time an Aura event is fired somewhere.

To fix this, simply wrap your method in $A.getCallback. This guarantees that you're in an Aura Life Cycle while responding to JavaScript events.

document.addEventListener('scroll', 
    $A.getCallback(
        function (event) {
            let el = document.getElementById('dataTable')
            if($(window).scrollTop() == $(document).height() - $(window).height()){
                console.log("Scrolled to the end");

                let amount =  component.get('v.numberOfRecords');

                component.set("v.numberOfRecords", amount + 20);
                let action = component.get('c.getRecordsOnScroll');

                action.setParams({
                    x : amount + 20,
                });

                $A.enqueueAction(action, false);

                action.setCallback(this, function(response){
                    let responseValue = response.getReturnValue();
                    let state = response.getState();
                    alert(state);
                    component.set("v.recordList", responseValue);
                }, 'SUCCESS');
            }
        }
    )
);

As an aside, did you know that lightning:datatable provides this functionality "for free" without needing to use jQuery? You may want to simply use the standard function instead of writing your own.

3
  • thank you, yes I know, I just wondered if I can do it in a hard way. Looks like I need more in-depth knowledge. Feb 26 '20 at 6:01
  • 1
    @AhmedShahriarAdnan It's definitely worth learning, it's just also good to know there's an easy path if you just Need To Get It Done Now. Just remember $A.getCallback, and you'll have far fewer problems. Also, LWC is a lot more forgiving, you might try learning that instead.
    – sfdcfox
    Feb 26 '20 at 6:12
  • thank you for the suggestion, I will give it a try. Feb 26 '20 at 6:14

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.