Auto refresh index page without dropping form input

This commit is contained in:
Laura Hausmann 2023-05-20 00:57:00 +02:00
parent ce319914e6
commit dfbece632c
Signed by: zotan
GPG key ID: D044E84C5BE01605

View file

@ -26,6 +26,40 @@
>
}
@section Scripts {
<script>
$(() => {
setInterval(() => {
fetch("/").then(res => {
res.text().then(text => {
let dummyDOM = $('<div></div>');
dummyDOM.html(text);
let newTableContents = $('#users>', dummyDOM);
$('#users').html(newTableContents);
})
});
}, 1000);
});
function liveSearch() {
let cards = document.getElementsByClassName("user-card-container")
let search_query = document.getElementById("searchbox").value;
for (var i = 0; i < cards.length; i++) {
// If the text is within the card...
if(cards[i].innerText.toLowerCase()
// ...and the text matches the search query...
.includes(search_query.toLowerCase())) {
// ...remove the `.is-hidden` class.
cards[i].classList.remove("is-hidden");
} else {
// Otherwise, add the class.
cards[i].classList.add("is-hidden");
}
}
}
</script>
}
<!-- Modal dialog for adding a user -->
<div class="modal fade" id="add_user_modal" tabindex="-1" aria-labelledby="add_user_modal_label" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
@ -48,26 +82,7 @@
</div>
</div>
<script>
function liveSearch() {
let cards = document.getElementsByClassName("user-card-container")
let search_query = document.getElementById("searchbox").value;
for (var i = 0; i < cards.length; i++) {
// If the text is within the card...
if(cards[i].innerText.toLowerCase()
// ...and the text matches the search query...
.includes(search_query.toLowerCase())) {
// ...remove the `.is-hidden` class.
cards[i].classList.remove("is-hidden");
} else {
// Otherwise, add the class.
cards[i].classList.add("is-hidden");
}
}
}
</script>
<div class="row row-cols-auto justify-content-start g-0">
<div class="row row-cols-auto justify-content-start g-0" id="users">
@foreach (var user in db.Users.OrderBy(p => p.Nickname.ToLower())) {
<div class="col user-card-container" id="user_@user.Id">
<a href="/EditUser/@user.Id">