I am trying to reload a table content at a click of a button but it's not working properly. The table content gets reloaded but the buttons on my '.revoke-user' are not clickable after the first table reload.
I am basically trying to open a modal confirmation, delete the user and reload the table content. The modal will auto close in 3 seconds and that's where I am trying to do the table reload.
Here is my code:
html:
<table id="access" class="table table-striped table-responsive">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Username</th>
<th scope="col">Role</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
{% for user in project['access'] %}
<tr>
<th scope="row">{{loop.index}}</th>
<td class="user-id-access">{{user}}</td>
<td>{{role}}</td>
<td><button type="button" class="btn btn-danger revoke-user">Revoke access</button></td>
</tr>
{% endfor %}
</tbody>
</table>
JS:
(function() {
$('.revoke-user').click(function(){
$('#modalRevoke').modal('show');
var modalMessage = modalRevoke.querySelector('.modal-body p');
var row = $(this).closest("tr"); // Find the row
var selectedRow = row.find(".user-id-access").text(); // Find the text
modalMessage.textContent = "Are you sure you want to revoke/remove the user "+selectedRow+" ?";
btnRevoke.addEventListener('click', e => {
// some code here
// Auto close modal after 3 seconds
setTimeout(function(){
$('#modalRevoke').modal('toggle');
// Reload access table
$("#access").load(location.href+" #access>*","");
}, 3000);
});
});
}());