Implementing 'Load more...' in Rails for infinite scrolling instead of traditional pagination

I currently have a collection of items and have been utilizing the will_paginate gem. However, I am interested in implementing a "load more..." feature at the end of the list. Is there a straightforward way to achieve this with will_paginate, or should I explore alternative methods?

Based on my understanding, it may be a more efficient approach as it eliminates the need for a SQL count query on the database records. Additionally, it seems unnecessary to access details beyond the initial pages when dealing with numerous pages.

javascriptruby-on-railsajax

Answer №1

Explore how websites like Twitter and Brightkite have implemented their "Load More" buttons from a javascript perspective. It's important to incorporate a pagination feature in your Rails application, though it doesn't necessarily have to be as intricate as will_paginate. Consider something similar to the following snippet in your controller:

# assuming 10 records per page
Record.find(:all, :conditions => {:offset => params[:page] * 10, :limit => 10})

When making an AJAX request for additional records, ensure that you send back the correct "page" number and increment it each time the load more button is clicked.

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

What are the steps to perform typecasting in nodejs?

Struggling with converting string values to numbers and encountering an error. const express=require('express'); const bodyParser=require('body-parser'); const app=express(); app.use(bodyParser.urlencoded({extended:true})); app.get(&qu ...

javascriptnode.jsexpressweb-development-server

Eliminate unnecessary words from the sentence

I wrote a sentence but it got split at every space. The data is displayed like this: const escapeRE = new RegExp(/([/\?""])/g); const myDatas = data.map(des => des.Sentence.toLowerCase().replace(escapeRE, '').split(' ')); [ [ ...

javascriptjsonregexreactjsstop-words

Contrasting Router.push and location.assign: Exploring the variances between

One thing I've noticed in my React app is that when I use Router.push('/') from `import Router from 'next/router', the page I am navigating to doesn't fully refresh. This causes some loading spinners whose states I want to be ...

javascriptreactjsnext.js

Guide to receiving dynamic argument variables in jQuery using $.get

I am currently working on developing an Ajax function call. In this function, the argument q will be dynamically defined, and the $.get method will return either true or false based on the data received from the Ajax call. <a href="any.php" class ...

javascriptjqueryajax

What is the process for adding to a highly nested array in mongoose?

Here is the Model I am working with: const MessagesSchema = mongoose.Schema({ //for individual message text: { type: String, required: true } }, { timestamps : true }) const MessagesCollectionSch ...

javascriptnode.jsmongodbmongoosemongodb-query

Using a button click to toggle the vue-ctk-date-time-picker in VueJS

Currently, I am utilizing the Vue component - https://github.com/chronotruck/vue-ctk-date-time-picker within my own component. However, I am encountering an issue where I would like to maintain the component's original functionality while having a but ...

javascriptvue.jsdatetimenpm

Is there a way for me to determine if something is hidden?

My goal is to have selector B toggle when selector A is clicked or when clicking outside of selector B. This part is working fine. However, I'm struggling with preventing selector B from toggling back unless selector A is specifically clicked - not w ...

javascripthtmljquerycssfrontend

Tips for dynamically retrieving a CSS file for an HTML page

With multiple html pages containing the same navbar, I made the decision to place the navbar in its own file called navbar.html and use ajax with jquery.get() to dynamically load it onto each page. This prevents redundant code across all pages. Currently, ...

htmlcssajax

What is the best way to create a new row at a specific index in an ng-repeat loop?

My Goal: I am aiming to insert a new row of ul after every 2 elements in my ng-repeat loop. For example: <ul class="col-sm-2"> <li><p>Automobile & Motorcycle</p></li> ...

javascripthtmlangularjs

What is the best way to set values for columns in jqGrid?

I am currently using jqGrid in conjunction with CodeIgniter 2.1.0. I am facing a challenge regarding how to set a value for a specific column based on a particular event. For example, when entering quantity and rate values in the respective columns, I wan ...

javascriptcodeigniterjqueryjqgrid

Using React js to transform objects into arrays for useState

Hey there! I'm currently working on a webshop demo project for my portfolio. I've encountered an issue while trying to fetch data from commerce.js. The data is in the form of objects, which are causing problems when I try to map them. I've a ...

javascriptreactjs

AngularJS directive that allows for either a click action to be passed or a ui-router state change to

I have a button (an a tag) that is displayed in multiple locations on my website. It is labeled "View Demo", and sometimes it directs to a demo page using an ui-sref: <a class="btn btn-primary" ui-sref="hamburger-push" target="_blank"> View Demo ...

javascriptangularjsangularjs-directiveangular-ui-router

loading a codeigniter page via AJAX calls

Currently, I am delving into the realm of AJAX using jQuery. To kick things off, I decided to utilize a code snippet from w3school, which performed admirably. Afterwards, I proceeded to incorporate the code into a view page within the Codeigniter framewor ...

jqueryajaxcodeigniter

Populate Vue 3 Element-plus Virtualized Table with actual data

As a newcomer to frontend development, I am currently working on integrating Element-plus Virtualized Table with actual data. Here is the basic structure of the example: const generateColumns = (length = 10, prefix = 'column-', props?: any) => ...

javascriptarraysvue.jselement-plus

Provide the flow type parameter to the React component

Is there a way to generate flow type in an external component without duplicating types when using it within another component? For instance: import {ExternalComponent} from '@npm-component/another-component'; type CurrentComponentType = {| d ...

javascriptreactjsgenericsflowtypedefinition

What is the process of decoding a URL in JavaScript?

Is there a better method to decode this URL in order to use it with JavaScript? URL: https://www.example.com/post.php?v=1&text=it's-me&20hello%0Aworld%0A At present, any occurrence of ' in the URL is causing an error and blank lines ar ...

javascriptphphtmlutf-8

Guide to implementing CSS3 transitions with prefixes using JavaScript

Is there a way to apply CSS styles using JavaScript when I don't have access to the CSS file? #fade div { -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; -ms-transition: opacity 1s; transition: ...

javascriptcss

Should the use of readFileSync() during the initialization of a Node.js web application be avoided?

I have a Node app that serves web pages with static HTML-snippet files included conditionally. I am considering implementing a cache map for these snippets by adding the following code to my Express's app.js file: var cache = Object.create(null); cac ...

javascriptnode.jsexpress

Resolving peer dependency conflict during npm installation

When attempting to run npm install @react-navigation/native @react-navigation/native-stack, I encountered the following errors: npm WARN ERESOLVE overriding peer dependency npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While ...

javascriptnode.jsreact-nativenpmpeer-dependencies

Unable to accept the link ID in the modal

Presently, I am facing an issue with a modal that links a product with a customer and involves product discount calculations. The customer is automatically selected using the modal id, and the product is chosen through select options with a while loop. T ...

javascriptphphtmlmysql