Aim: I am struggling with a button that triggers a function to fetch more items from my Mongoose DataBase and display them in a table row dynamically. I am using the get method to retrieve data from the server side. Despite referring to advice from this post, I am still facing difficulties in rendering the desired output.
Code on the Client Side:
<main role="main">
<div class="container-fluid ">
<div class="card-columns" id="test" value="<%=deals%>">
<tbody>
<tr id="content"><% include partials/row.html %></tr>
</tbody>
</div>
</div>
<div class="container" style="max-width: 25rem; text-align: center;">
<a id="8-reload" class="btn more" onclick="loadMore(8)"></a>
</div>
<script >
const loadMore = async function(x){
const response = await fetch(`/${x}`);
if (!response.ok)
throw oops;
const data =await response.text();
console.log(data);
console.log($("#content"));
await document.getElementById('content').insertAdjacentHTML('beforeend',data);
}
</script>
Server Side JS Request:
app.get(`/:count`, (req, res) => {
const count = parseInt(req.params.count);
database.find({}, (err, found) => {
if (!err){
res.render("more",{items:found},(err,html)=>{
if(!err){
res.send(html);
}else{
console.log(err);
}
});
} else {
console.log(err);
}
}).skip(count).limit(25);
});
Upon executing the function, nothing happens and the browser console displays a long string of HTML. The target element for appending shows as follows:
jQuery.fn.init {} proto: Object(0)
No errors are reported on the server console. Can anyone point out what I might be overlooking?
UPDATE: As a test, I tried appending the content elsewhere and surprisingly, I am able to append HTML, but the full content is not being added. It only includes the opening and closing tags of the entire HTML template, without the content in between. This seems odd.