0

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);            
        });
        
    });
}());
h4v3st
  • 17
  • 5

0 Answers0