Continuous scrolling generates new pagination links as I continue to scroll

Thanks to the helpful comment from lharby on my previous post, I finally figured out how to implement Infinite Scrolling.
Big thank you!
The only issue now is that the script starts generating a new pagination link after scrolling past 15 posts (which is my set posts-per-page limit for Tumblr)
For example: assets.txmblr.com =======> assets.txmblr.com /page/(2;3;4;...)
Thank you for your assistance!

Here's the code snippet (line 210 -> line 225)

        <script>
window.onload = function() {
var elem = document.getElementById('content');
let infScroll = new InfiniteScroll(elem, {
path: '.pagination__next',
append: '.post'
});
}
</script>
</head>

<body>
{block:NextPage}
<a href="{NextPage}" class="pagination__next"></a>
{/block:NextPage}

Answer №1

Exciting update! I successfully downloaded the complete zip package from this source:

Within lines 1340 to 1343, you will find the code snippet responsible for updating the URL.

// Don't forget to update the URL
proto.onPageLoadHistory = function( response, path ) {
  this.setHistory( response.title, path );
};

If you decide to omit this section of code, it may result in the webpage no longer refreshing the URL.

Remember, after downloading the file, make necessary modifications and then choose to either host it or integrate it into your theme. If incorporating it into the theme, ensure to minify it beforehand.

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

The ConsoleCapture does not capture every console error for Sentry

Running into an issue capturing console errors with Sentry in a Next.js app. The problem arises from an error within a library that is inaccessible to us, specifically related to WebSocket "WebSocket is already in CLOSING or CLOSED state" This error is c ...

Unable to set a value for the variable

const readline = require('readline'); let favoriteFood; const rl = readline.createInterface(process.stdin, process.stdout); rl.question('What is your favorite food?', function(answer) { console.log('Oh, so your favorite food is &a ...

Manually validate inputs in Angular

I've encountered an issue with the bootstrap datepicker. When I click on the date icon, the date and time automatically populate in the input field. However, the input remains invalid because I haven't directly interacted with it. Has anyone else ...

Ways to showcase information from an angular service

I'm struggling with displaying data from a service in my HTML view using AngularJS. My goal is to show a list of submitted forms called Occurrences in the view. When clicking on a list item, I want to be able to view all the data fields submitted thro ...

Exploring the World of GiantBomb APIs

I have successfully created an account and obtained my API key. I am looking to implement a basic search functionality on my webpage, where users can enter a search query and click a button to display the game title and image. You can find more informatio ...

What measures can be taken to prohibit a user from accessing a client-side HTML file using express?

I am currently developing a task management application called "todolist." In my node.js code, I utilize express and grant it access to my directory named Client: var app = express(); app.use(express.static(__dirname + "/Client")); The contents of my Cl ...

Removing a Django object via AJAX or JavaScript with a confirmation prompt

Greetings! I am looking to implement a feature in Django where I can delete an object using AJAX or JavaScript with a confirmation message upon clicking the delete button. However, I am struggling to complete the AJAX request. Here is the code in views.py ...

React TypeScript with ForwardRef feature is causing an error: Property 'ref' is not found in type 'IntrinsicAttributes'

After spending a considerable amount of time grappling with typings and forwardRefs in React and TypeScript, I am really hoping someone can help clarify things for me. I am currently working on a DataList component that consists of three main parts: A Co ...

What is the method for defining the maximum selectable month in mtz.monthpicker?

(edited) Currently, I am utilizing the jquery.mtz.monthpicker plugin along with jquery. My goal is to limit the selection of future months, but it appears that there are no options similar to 'maxDate' like in jquery.ui.datepicker. $('inp ...

What is the best way to eliminate the background color from one span after selecting a different one?

I created a span element that changes its background color when clicked, but I want the background color to switch to the newly clicked span while removing it from the previously clicked one. Can someone help me achieve this? CSS list-sty ...

If you try to wrap an object with an anonymous function, you'll receive an error message

Consider the following straightforward example. (function() { var message = { display: function() { alert('hello'); } }; })(); When trying to implement message.display(); An error is triggered stating ReferenceError: message ...

What is the best way to update placeholders in Angular 8+?

I have a collection of items: a = ['apple', 'mango', 'grape', 'papaya', 'banana', 'cucumber']. An input element is present with a placeholder stating select from fruits (the array elements should ...

"Encountering a 400 Error While Attempting to Edit Requests in NodeJS/A

Currently, I am building an application using Ionic/Angular with a NodeJS backend. Within this project, I have created an update form that allows users to modify or delete a specific row. While the deletion function is working fine, I am facing some challe ...

Exploring the process of web scraping from dynamic websites using C#

I am attempting to extract data from using HtmlAgilityPack. The website is dynamic in nature, displaying content after the page has fully loaded. Currently, my code retrieves the HTML of the loading bar using this method, but encounters a TargetInvocation ...

Error: User cannot be used as a constructor

When attempting to register a user using a Node.js app and MongoDB, I encountered the following error message: const utente = new Utente({ ||||| TypeError: Utente is not a constructor This is my model file, utente.js: const mongoose = require("mongoose") ...

Angular tutorial: Organizing data by date only

This is my first time building an Angular app. I am fetching JSON data from an API using a factory service to get football match fixtures. My goal is to group these fixtures by date while disregarding the time component. The date string in the JSON is fo ...

Incorporate a new visual element with a texture in three.js

I'm struggling to apply a texture to a mesh and keep getting this error message: [.WebGLRenderingContext]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1 It's frustrating not understanding ...

The error message "Unable to push property in an undefined array" is displayed when attempting to push a property into

I'm struggling to debug the error message TypeError: Cannot read property 'push' of undefined. The following code snippet is what's causing the problem: const parent_lead_contact = this.props.parentLeads?.filter((lead) => lead. ...

How to Implement Force Unmount in Vue 3 When Deactivated

I've developed a VUE app that makes use of the keep-alive method in the router. There are multiple pages that should only be loaded once, but certain specific pages need to be reloaded every time they are activated. <template> <router-view ...

Add the contents of `$scope.data` into a JSON object using

I am trying to update a JSON file with data entered in form elements, but I seem to be encountering some issues. <html ng-app="example"> <div ng-controller="ListController"> <form name="myform" ng-submit="addThis()"> ...