dynamic page loading
This commit is contained in:
parent
a86b370f69
commit
12b32b6600
1 changed files with 30 additions and 3 deletions
|
@ -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>
|
||||
|
|
Loading…
Add table
Reference in a new issue