dynamic page loading

This commit is contained in:
admin 2024-06-09 21:59:29 +02:00
parent dae80c0684
commit d057915e66

View file

@ -56,7 +56,7 @@
</select>
<button class="results-save" name="t" value="text">Apply settings</button>
</form>
<div class="results">
<div class="results" id="results">
{{if .Results}}
{{range .Results}}
<div class="result_item">
@ -70,7 +70,7 @@
<div class="no-results">No results found for '{{ .Query }}'. Try different keywords.</div>
{{end}}
</div>
<div class="prev-next prev-img">
<div class="prev-next prev-img" id="prev-next">
<form action="/search" method="get">
<input type="hidden" name="q" value="{{ .Query }}">
<input type="hidden" name="t" value="text">
@ -83,8 +83,35 @@
</form>
</div>
<script>
// Check if JavaScript is enabled and modify the DOM accordingly
document.getElementById('content').classList.remove('js-enabled');
document.addEventListener("DOMContentLoaded", function() {
if (document.getElementById('prev-next')) {
document.getElementById('prev-next').style.display = 'none';
let page = {{ .Page }};
const query = "{{ .Query }}";
function loadResults(newPage) {
fetch(`/search?q=${encodeURIComponent(query)}&t=text&p=${newPage}`)
.then(response => response.text())
.then(data => {
const parser = new DOMParser();
const doc = parser.parseFromString(data, 'text/html');
const newResults = doc.getElementById('results').innerHTML;
document.getElementById('results').innerHTML += newResults;
page = newPage;
})
.catch(error => console.error('Error loading results:', error));
}
window.addEventListener('scroll', () => {
if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
loadResults(page + 1);
}
});
}
});
</script>
</body>
</html>