javascript - How to listen to event of confirm button of jquery.tabledit?

Question

I have an html table with jquery.tabledit. It has an edit button and a delete button. When click on delete, it shows a confirm button. I want the table to be updated when the confirm button is clicked (when the row is deleted). As of right now, the delete option works, but the results are only displayed if I manually refresh the page.

Please refer to this answer for Demo Code.

This solution was adapted from a working example for the save button:

        // When click on confirm, page reloads
        $(document).on("click", ".tabledit-confirm-button", function () {
            // Reload the table
            $('#editable_table').DataTable();
            // Reload the Page
            window.location.reload(false);
        })

I have also try this

    // When click on confirm, page reloads
    $(document).on("click", ".tabledit-confirm-button", function () {

        // Reload page after 0.5 seconds
        $(document).ready(function () {
            setTimeout(function () {
                alert('Reloading Table');
                location.reload(true);
            }, 500);
        });
    })

The issue seems to be the button never gets recognized as clicked. alert('Reloading Table'); never showed up.

$('#editable_table').Tabledit({
  //some codes...
  columns: {
    identifier: [0, "user_id"],
    editable: [
      [1, 'first_name'],
      [2, 'last_name'],
      [3, 'email'],

    ]
  },
  hideIdentifier: true,
  autoFocus: true,
  saveButton: true,

  restoreButton: false,
  onSuccess: function(data, textStatus, jqXHR) {
    var htmlString = "<?php echo 'User information has been updated'; ?>";
    alert(htmlString);

    // custom action buttons
    if (data.action === 'delete') {
      $('#' + data.id).remove();
    }
  }


});

$(document).on("click", ".tabledit-edit-button", function() {
  //get closest tr and then find slectbox and disable same
  $(this).closest("tr").find("[name=selectbox]").removeAttr('disabled')

  $(this).closest("tr").find("[name*=roles_checkbox] , .dropdown-toggle ").removeAttr('disabled') //remove attr from button as well
  $(this).closest("tr").find(".dropdown-toggle").removeClass('disabled') //remove disable class from button
})
$('.roles_checkbox').multiselect({
  includeSelectAllOption: true,
  nonSelectedText: '--Select Role--',
  buttonWidth: '150px'
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/css/bootstrap-multiselect.css" integrity="sha512-DJ1SGx61zfspL2OycyUiXuLtxNqA3GxsXNinUX3AnvnwxbZ+YQxBARtX8G/zHvWRG9aFZz+C7HxcWMB0+heo3w==" crossorigin="anonymous"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.16/js/bootstrap-multiselect.min.js" integrity="sha512-ljeReA8Eplz6P7m1hwWa+XdPmhawNmo9I0/qyZANCCFvZ845anQE+35TuZl9+velym0TKanM2DXVLxSJLLpQWw==" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.tabledit.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<table class="table table-bordered" id="editable_table">
  <thead class="thead-dark">
    <tr>
      <th>user_id</th>
      <th>first_name</th>
      <th>last_name</th>
      <th>email</th>
      <th>Approved</th>
      <th>Something</th>
      <th class="tabledit-toolbar-column"></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        Something..
      </td>
      <td>
        Something..1
      </td>
      <td>
        [email protected]
      </td>
      <td>
        <form method='POST'>
          <select disabled name='selectbox' onchange='this.form.submit()'>
            <option value='Approved' selected>Approved</option>
            <option value='Disapproved'>Disapproved</option>
          </select>
        </form>
      </td>

      <!--User Roles-->
      <td>
        <form method='POST'>
          <select disabled class='roles_checkbox' multiple='multiple' name="roles_checkbox[]" onchange='this.form.submit()'>
            <option value="1">Option 1</option>
            <option value="2" selected="selected">Option 2</option>

            <option value="3" selected="selected">Option 3</option>
            <option value="4">Option 4</option>
          </select>

        </form>
      </td>
    </tr>
    <tr>
      <td>
        2
      </td>
      <td>
        Something..
      </td>
      <td>
        Something..2
      </td>
      <td>
        [email protected]
      </td>
      <td>
        <form method='POST'>
          <select disabled name='selectbox' onchange='this.form.submit()'>
            <option value='Approved' selected>Approved</option>
            <option value='Disapproved'>Disapproved</option>
          </select>
        </form>
      </td>

      <!--User Roles-->
      <td>
        <form method='POST'>
          <select disabled class='roles_checkbox' multiple='multiple' name="roles_checkbox[]" onchange='this.form.submit()'>
            <option value="1">Option 1</option>
            <option value="2" selected="selected">Option 2</option>
            <!-- Option 3 will be selected in advance ... -->
            <option value="3" selected="selected">Option 3</option>
            <option value="4">Option 4</option>
          </select>

        </form>
      </td>
    </tr>
  </tbody>
</table>

question from:https://stackoverflow.com/questions/66053080/how-to-listen-to-event-of-confirm-button-of-jquery-tabledit

Answer 1

Waitting for answers