I have this frontend code
<div class="bounties">
<% projects.forEach(function(project, index) { %>
<section class="box" style="margin: 1rem;">
<a href="/project/<%=project.UniqueID%>">
<article class="media" style="background: white;">
<div class="media-content">
<div class="content">
<p>
<span style="font-size: 2rem; color: #2d2d2d;margin-left: -2px;">Earn <strong
style="color: #5cb85c">$<%=project.DollarAmount.toLocaleString()%>!</strong></span>
<br>
<span><small><i class="fa-solid fa-clock" style="margin-right: 0.2rem;"></i> Listed <%= getTimePassed(project.ListedDate) %> </small> </span>
<% if(project.Status == 'open') { %>
<div class="status regular tag" style=""><p style="color:black">Open</p></div>
<% } else if(project.Status == 'claimed') { %>
<div class="status claimed tag">Claimed</div>
<% } else if(project.Status == 'closed') { %>
<div class="status closed tag">Closed</div>
<% } else if(project.Status == 'cancelled') { %>
<div class="status closed tag">Cancelled</div>
<% } else if(project.Status == 'completed') { %>
<div class="status claimed tag">Completed</div>
<% } %>
<style>
.status.regular {
font-size: 12px;
height: fit-content;
padding: 6px 10px;
border-radius: 16px;
background-color: lightblue;
font-weight: 400;
opacity: 1;
font-weight: 400;
color:black
}
.tags {
display: flex;
gap: 8px;
}
.tag {
border-radius: 16px;
background-color: #ffc6c2;
font-size: 12px;
color: #690D0D;
background-color: #690D0D;
border: 1px solid transparent;
transition: .4s border-color;
cursor: pointer;
}
.tag:hover {
border-color: #bb7676;
}
.tag,
.status,
.edit,
.delete {
padding: 8px 12px;
display: flex;
align-items: center;
justify-content: center;
}
.status.closed {
font-size: 12px;
height: fit-content;
padding: 6px 10px;
background-color: #FFCCCB;
border-radius: 16px;
}
.status.claimed {
font-size: 12px;
height: fit-content;
padding: 6px 10px;
background-color: lightgreen;
border-radius: 16px;
}
</style>
<h3> <%=project.Title%>
</h3>
</a>
<p> <%=project.Description%> </p>
<a href="/project/<%=project.UniqueID%>">
</div>
<% project.Tags.forEach(function(tag) { %>
<div class="tag"><%= tag %></div>
<% }); %>
<nav class="level is-mobile">
<div class="level-left"><small>
<button style="border-radius: 5px;"
class="button bot_right is-small bountybutton has-text-black">View More</button>
</small></div>
</nav>
</div>
</article>
</a>
</section>
<% }); %>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- Include jQuery library -->
<script>
var PAGE_SIZE = 10;
var page = 1;
var isLoading = false;
const projectContainer = document.querySelector('.bounties');
const observer = new IntersectionObserver((entries) => {
// Check if the target element is intersecting with the viewport
if (entries[0].isIntersecting && !isLoading) {
loadMoreProjects();
}
});
const lastProject = document.querySelector('.bounties section:last-child');
observer.observe(lastProject);
function loadMoreProjects() {
const nextPage = page + 1;
// Make an AJAX request to the "/loadmore" endpoint with the next page number
$.ajax({
url: '/loadmore',
method: 'GET',
data: { page: nextPage },
success: function (response) {
const projects = response.projects;
const hasMoreProjects = projects.length >= PAGE_SIZE;
const fragment = document.createDocumentFragment();
projects.forEach(function (project) {
const projectHTML = `
<section class="box" style="margin: 1rem;">
<a href="/project/${project.UniqueID}">
<article class="media" style="background: white;">
<div class="media-content">
<div class="content">
<p>
<span style="font-size: 2rem; color: #2d2d2d;margin-left: -2px;">Earn <strong style="color: #5cb85c">$${project.DollarAmount.toLocaleString()}!</strong></span>
<br>
<span><small><i class="fa-solid fa-clock" style="margin-right: 0.2rem;"></i> Listed ${getTimePassed(project.ListedDate)}</small></span>
${
project.Status === 'open'
? '<div class="status regular tag" style=""><p style="color:black">Open</p></div>'
: project.Status === 'claimed'
? '<div class="status claimed tag">Claimed</div>'
: project.Status === 'closed'
? '<div class="status closed tag">Closed</div>'
: project.Status === 'cancelled'
? '<div class="status closed tag">Cancelled</div>'
: project.Status === 'completed'
? '<div class="status claimed tag">Completed</div>'
: ''
}
<h3>${project.Title}</h3>
</p>
<p>${project.Description}</p>
<a href="/project/${project.UniqueID}">
<div class="tags">
${project.Tags.map((tag) => `<div class="tag">${tag}</div>`).join('')}
</div>
<nav class="level is-mobile">
<div class="level-left">
<small>
<button style="border-radius: 5px;" class="button bot_right is-small bountybutton has-text-black">View More</button>
</small>
</div>
</nav>
</a>
</div>
</div>
</article>
</a>
</section>
`;
const tempElement = document.createElement('div');
tempElement.innerHTML = projectHTML;
fragment.appendChild(tempElement.firstChild);
});
projectContainer.appendChild(fragment);
page = nextPage;
isLoading = false;
if (hasMoreProjects) {
observer.observe(document.querySelector('.bounties section:last-child'));
} else {
observer.disconnect();
}
},
error: function (xhr, status, error) {
console.log('Error:', error);
},
beforeSend: function () {
isLoading = true;
},
});
}
</script>
It fetches from this route
app.get('/loadmore', async function (req, res) {
console.log('Load More route accessed');
const page = req.query.page || 1;
const skip = (page - 1) * PAGE_SIZE;
const openProjects = await projectSchema
.find({ Status: 'open', PaidFor: true })
.sort({ ListedDate: -1 })
.skip(skip);
const otherProjects = await projectSchema
.find({ Status: { $ne: 'open' }, PaidFor: true })
.sort({ ListedDate: -1 })
.skip(skip);
const projects = openProjects.concat(otherProjects).slice(skip, skip + PAGE_SIZE);
res.json({ projects }); // Send the projects as a JSON object
});
When I scroll to the bottom of the page, more projects are supposed to load in everytime I reach the bottom of the rendered projects.
However, if I reach the bottom of the page, it console.logs "Load More route accessed", meaning that the route has been accessed, and the code is running. This happens sometimes only. However, even with the route being accessed, the new projects are not rendered.
How do I fix this, and also ensure new projects are rendered everytime I reach the bottom of the current projects.
I have been trying to fix this for weeks, so I appreciate your time on helping me.
from Render more containers on scroll ejs not working
No comments:
Post a Comment