I’m working on building an endless scroll feature for my WordPress site by loading content from other pages. However, I’m running into issues with my jQuery implementation.
Currently, when I try to fetch content from another page, it just displays the URL string instead of actually loading the page content. I think I’m missing something important about how to properly retrieve and insert external content.
Here’s what I have so far:
jQuery(document).ready(function($) {
console.log('Script loaded');
$('#main-content').append('http://example.com/mysite/page2/ #main-content');
console.log('Content should be loaded');
});
Can anyone help me understand what I’m doing wrong? I need to actually fetch the HTML content from the external page, not just append the URL as text.
yeah, i see what’s happening - you’re treating append() like it automatically grabs content, but that’s not how it works. append() just adds stuff that already exists, it won’t make HTTP requests for you. made this same mistake when i was learning AJAX in wordpress.
You’re using append() wrong. You need load() instead - it’s made for grabbing external content with AJAX. Right now you’re just dumping the URL as text into the DOM.
Try this:
jQuery(document).ready(function($) {
$('#main-content').load('http://example.com/mysite/page2/ #main-content');
});
load() makes the HTTP request, grabs the element you want, and drops it into your container. Watch out for same-origin policy if you’re loading from another domain. For endless scroll, wrap this in a function and fire it when users hit the bottom.
The problem is simple - append() doesn’t make any network requests. It just takes your string and drops it in as literal text. I made the same mistake when I first built endless scroll for WordPress, thinking jQuery methods did more than they actually do.
You need to fetch the content first, then process it. I’ve found fetch() with modern JS works best:
jQuery(document).ready(function($) {
fetch('http://example.com/mysite/page2/')
.then(response => response.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const content = doc.querySelector('#main-content');
$('#main-content').append(content.innerHTML);
})
.catch(error => console.error('Load failed:', error));
});
This gives you better error handling and works across all browsers. For real endless scroll, you’ll also need to track page numbers and detect when users scroll down to trigger the next load.
Your main problem is thinking append() makes HTTP requests - it doesn’t. Append() just inserts existing content into the DOM. When you pass it a URL string, it literally dumps that text onto your page.
I built similar functionality for a client’s news site last year and made the same mistake. Here’s what actually works - use jQuery’s get() with proper DOM manipulation:
jQuery(document).ready(function($) {
$.get('http://example.com/mysite/page2/', function(data) {
var extractedContent = $(data).find('#main-content').html();
$('#main-content').append(extractedContent);
}).fail(function(xhr, status, error) {
console.error('Content fetch failed: ' + error);
});
});
The difference: get() actually fetches the page HTML, then you extract what you need before appending. For endless scroll, wrap this in a function that increments page numbers and triggers on scroll events near the bottom.
The load() method works but gets messy when you need more control. I hit the same issue building infinite scroll for our company blog.
Use $.get() instead so you can handle the response:
jQuery(document).ready(function($) {
$.get('http://example.com/mysite/page2/')
.done(function(data) {
var content = $(data).find('#main-content').html();
$('#main-content').append(content);
})
.fail(function() {
console.log('Failed to load content');
});
});
You get error handling and can process data before inserting it. Managing all this jQuery AJAX stuff manually becomes a nightmare at scale though.
I automated the whole endless scroll workflow using Latenode. It handles content fetching, processes HTML, and manages rate limiting automatically. Way cleaner than wrestling with jQuery edge cases.
Check it out: https://latenode.com
You’re mixing up append() with actual AJAX calls. append() just dumps whatever string you give it as literal text - it doesn’t make any requests. I ran into this same issue building lazy loading for portfolio sites.
Use $.ajax() instead for proper control:
jQuery(document).ready(function($) {
$.ajax({
url: 'http://example.com/mysite/page2/',
type: 'GET',
success: function(response) {
var newContent = $(response).find('#main-content').html();
$('#main-content').append(newContent);
},
error: function() {
console.log('Request failed');
}
});
});
This way you control headers, data processing, and error handling. For endless scroll, track your page numbers and fire this on scroll events. Just debounce the scroll handler so you don’t spam requests.
Your code’s trying to use append() like it fetches content, but it doesn’t. append() just adds text or HTML that’s already in memory - it won’t make web requests.
I used to handle all these jQuery AJAX calls for endless scroll manually, but it gets messy quick. You’re juggling loading states, error handling, duplicate requests, and rate limiting. Plus debugging sucks when users report problems.
I don’t wrestle with jQuery methods anymore - I automate the whole content loading workflow now. Set up scroll triggers, configure what content to fetch and where it goes, add error handling and loading indicators. The endless scroll system runs itself without custom JavaScript.
Built several WordPress sites with infinite scroll this way and it’s way cleaner than managing AJAX calls manually. No more debugging jQuery edge cases or dealing with cross origin headaches.
Latenode handles all the content fetching and DOM stuff automatically: https://latenode.com