Issue with Ionic 2's infinite scroll not triggering method on second scroll attempt

I utilized the ion-tab element to showcase a page (inboxitem) which encompasses ion-list and makes use of ion-infinite-scroll.

The following code snippet resides in inboxitem.html

<ion-content class="inbox can-swipe-list">
    <ion-list>
        <ion-list-header>
            <ion-select [(ngModel)]="selectedOption" [selectOptions]="filterOptionSettings" (ngModelChange)="getFilteredList()">
                <ion-option value="{{option.value}}" *ngFor="let option of listInboxFilterOptions; let i=index" [selected]="i==0">{{option.name}}</ion-option>
            </ion-select>
        </ion-list-header>

        <ion-item-sliding *ngFor="let list of inboxList; let j=index">
            <ion-item class="listWithReason" tappable (click)="ViewPopupDetails(j)">
                <h2>
                    <span>{{list.fullname | filterpipes:'manipulatename'}}<br /><small>{{list.leavename}}</small></span>
                    <div> <ion-icon md="md-calendar" ios="md-calendar"></ion-icon> {{list.fromdate}}{{list.todate!=null ? " to ":" " }}{{list.todate}}</div>
                </h2>
                <p *ngIf="list.reason!=''">{{list.reason}}</p>
            </ion-item>

            <ion-item-options side="right" *ngIf="list.empphone=='' || list.empphone==null">
                <button ion-button color="grey" class="no-phone">No phone</button>
            </ion-item-options>
        </ion-item-sliding>

         <ion-item class="item-empty-row" *ngIf="!inboxList.length > 0">
            {{noRecordsFound}}
        </ion-item>
    </ion-list>

    <ion-infinite-scroll *ngIf="infiniteLoading" (ionInfinite)="loadInboxList(false)" distance="1%">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

ISSUE

  1. Initially, 20 records get loaded.
  2. Upon scrolling, another set of 20 records load.
  3. However, upon further scroll, only a spinning animation appears with no additional records loading. It seems that during the second scroll, the loadInboxList method isn't triggered at all. Hence, it indicates that there's nothing wrong within the loadInboxList method since it doesn't get called on the second scroll.

My ionic and cordova versions

Ionic Framework: 3.5.0
Ionic App Scripts: 1.3.9
Angular Core: 4.1.3
Angular Compiler CLI: 4.1.3
Node: 6.10.3

Any assistance provided will be greatly acknowledged

javascriptangulartypescriptionic2

Answer №1

Don't forget to include infiniteScroll.complete(); in your loadInboxList() function.

If you happen to use infiniteScroll.enable(false) in your code, it will halt scrolling until re-enabled.

UPDATE

I also realized that you need to pass the event in your (ionInfinite) method like this:

(ionInfinite)="loadInboxList($event)"

In your .ts file, make sure to include:

loadInboxList(infiniteScroll){
     ...your code 
     infiniteScroll.complete()
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing a function a specific number of times in Jquery

I have a query regarding JQuery related to randomly placing divs on a webpage. The issue I'm facing is that it currently does this indefinitely. Is there a way to make it run for a specific duration and then stop? $(document).ready(function () { ...

javascriptjquerycss

Using JQuery to make an AJAX request with URL Rest path parameters

Currently, I have a REST service located at /users/{userId}/orders/{orderId} and I am looking to make a call to it using JQuery. Instead of simply concatenating the IDs like this: $.get( 'users/' + 1234 + '/orders/' + 9876, fu ...

javascriptjqueryajaxresturl

Exploring the process of iterating through JSON data using JSON.parse

After making a request to my Django server for data, I utilized JSON.parse to convert the data into a JSON object. My goal is to iterate through each attribute of the object's field and execute the function createDiv on each one. function load_blog( ...

javascriptjsonajaxapidjango-models

Here's a unique rewritten version: "Achieving a looping carousel with autoplay in Angular 2+ using with

Could someone provide recommendations for an image carousel that is compatible with angular 8? I would also like to know how to customize the images inside the carousel specifically for small devices. Thank you in advance! ...

jqueryhtmlangularnpmnpm-package

The React.js Mui Collapse component exclusively triggers animation during the transition while closing, without any animation when expanding

Whenever I implement the Collapse component from Mui library in my projects, I face an issue where the transition animation only works when closing the component (when in={false}). However, when opening the component, there is a delay before the animation ...

javascriptreactjsmaterial-ui

Ways to properly execute ngOnDestroy() in Angular?

I have implemented a child component with a timer that sends an API call to the server every 2 seconds. I want this call to continue as long as the user remains on the page, even if they navigate away from the page but leave the parent component window ope ...

angularrxjsobservable

How come this isn't growing the way I had hoped for?

Currently, I am working on a small jQuery script that is designed to fetch and print a specific month from a PHP file. Here is my code snippet: var count = 0; $(".nextMonth").click( function(event) { event.preventDefault(); count++; $("#r ...

phpjavascriptjqueryajaxget

What strategies can I use to reduce duplication in my HTML and JavaScript code?

Struggling with messy HTML and JS code? If you're using Bootstrap-3 and jQuery-1.11.0, dealing with dropdowns might be tricky. Especially when it comes to switching icons based on the dropdown state and ensuring only one dropdown is open at a time. Is ...

javascriptjqueryhtmltwitter-bootstrapdry

To address the issue of input values not persisting in a Selenium iframe element, I am implementing a custom JavaScript event to

Attempting to initiate a JavaScript 'change' event on an element within an iframe. The following is the code snippet I have been using: // accessing the iframe window var iframeDoc = document.getElementsByTagName("iframe")[0].contentWin ...

javascriptseleniumiframe

Is there a way to extract the timestamp in JavaScript from a string that includes the name of the timezone database?

Given the string: "2022/05/01 03:10:00", I am seeking to create a Date object with Chile's UTC offset. The challenge lies in the fact that due to Daylight saving time (DST), the offset changes twice annually. How can I obtain that Date obj ...

javascriptnode.jsdatetimezone-offset

Aliases for NPM packages and TypeScript declaration files

I am in need of two separate versions of a package, and fortunately with npm 6.9.0 I can easily accomplish that now. My dilemma is this: the package comes with type definitions. However, when I create an alias for this package and refer to it using the al ...

typescriptnpmalias

Discovering the object and its parent within a series of nested arrays

Is there a way to locate an object and its parent object within a nested array of unknown size using either lodash or native JavaScript? The structure of the array could resemble something like this: name: 'Submodule122'</p> I have been ...

javascripttypescriptlodash

Utilizing the Vuetify pagination feature in your project

I am in need of some guidance regarding the configuration of vuetify pagination. I have a card component that I loop through, but I also want to implement pagination around it. Any insights on where to start would be greatly appreciated? <v-pagination ...

javascriptvue.jsvuetify.js

Implementing a color change for icons in React upon onClick event

export default function Post({post}) { const [like,setLike] = useState(post.like) const [islike,setIslike] = useState(false) const handler=()=>{ setLike(islike? like-1:like+1 ) setIslike(!islike) } return ( <> <div classNam ...

javascriptcssreactjsmaterial-ui

What are the methods to ascertain whether an HTML element possesses a pseudo element?

Is there a method to identify whether an HTML element has a pseudo element (::before / ::after) applied to it without invoking the function: window.getComputedStyle(element, ":before/:after"); MODIFIED: the response is NEGATIVE The issue with getCompute ...

javascripthtmlcsspseudo-element

Angular module not found: Solving the "Cannot find module" issue

Currently, I am in the process of developing an angular 7 application and I have limited knowledge about it. Could someone please assist me in understanding why it is unable to locate the component.ts files? These files do exist in the paths mentioned by t ...

angular

Loading textures locally using three.js is functioning properly, however, remote loading is not functioning as

I have customized an official example for the Loader object to showcase a specific issue. My goal is to generate a mesh with a texture map that loads before creating the geometry. Currently, I am facing a problem where local files load properly, but remote ...

javascriptimageasynchronousthree.jstextures

What is the best way to save the data received from createApi into the Redux store?

Currently, I am faced with the challenge of storing user data (such as name, email, etc.) obtained through the createApi function into Redux store. However, I'm unsure of the best practice to achieve this. In my userApi.js file: export const userApi ...

javascriptreactjsreduxredux-toolkitrtk-query

Tips for integrating Apache Solr with Cassandra without using DataStax Enterprise (DSE)

Embarking on a new project, I find myself utilizing Cassandra as the chosen DBMS, with Apache Solr serving as the search engine and Node.js powering the server scripting language. While I am well-versed in Node.js, Cassandra and Solr are unfamiliar territ ...

javascriptnode.jssolrcassandra

Token does not function properly on Fetch request sent to PHP script

I have a pair of files: one is revealing a session token, while the other is responding to a javascript fetch. The first file goes like this: <?php session_start(); unset($_SESSION['sessionToken']); $_SESSION['sessionToken'] = vsprin ...

javascriptphpajaxfetch