How can I hide the table row after its checkbox has been selected and the user hits submit

Question

I have a table with a checkbox at the top to select all, and individual checkboxes on each row for the user to select. Currently the PHP works so that after each row has been selected and the delete(submit) button is pressed, it updates the DB accordingly. How ever the user can only see that this row has been deleted once they refresh the page. I would like to use some jQuery to hide whatever table row the user has selected, after they hit the submit button.

I've tried using variations of

$('#delete_message').closest('tr').hide();

But I can't seem to get that to work properly. The HTML is straight forward

<form name="bulk_action_form" action="' . $_SERVER['REQUEST_URI'] . '" method="post" onSubmit="return delete_confirm();"/>
<table class="table table-hover">
  <thead>
    <tr>
      <th class="col-md-1"><input type="checkbox" name="select_all" id="select_all" value=""></th>
      <th class="col-md-3">From</th>
      <th class="col-md-4">Subject</th>
      <th class="col-md-4">Date</th>
   </tr>
 </thead>
<tbody class="checkbox-group" data-toggle="toggle-checkbox">
  <tr>
    <td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
    <td>Person 1</td>
    <td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 1</a></td>
    <td>2015-11-09 15:34:25</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
    <td>Person 2</td>
    <td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 2</a></td>
    <td>2015-11-09 15:34:25</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checked_id[]" class="checkbox" value="51"></td>
    <td>Person 3</td>
    <td><a data-toggle="modal" data-target="#fullMessageModal51">Test Subject 3</a></td>
    <td>2015-11-09 15:34:25</td>
 </tr>
</tbody>
</table>


 <input type="submit" class="btn btn-danger" name="bulk_delete_submit" id="delete_message" value="Delete">
</form>

How can I make sure that it hides whatever table row is selected, and if all are selected how can I hide all of them.

You help is greatly appreciated!

Thanks

Edit: The PHP I am using to update the DB after the form submit

include_once('dbConfig.php');
 if(isset($_POST['bulk_delete_submit'])){
  $idArr = $_POST['checked_id'];
    foreach($idArr as $id){
    mysqli_query($conn,"UPDATE message SET publish='n' WHERE id=".$id);
  }
}

Answer 1

Your jQuery needs to find all the checked inputs inside the .checkbox-group and then find the closest tr to hide it. Like here:

$("#delete_message").click(function(){
    $(".checkbox-group input:checked").closest("tr").hide();
});

For your select all/deselect all, you need to again look in the .checkbox-group and find all the checkbox controls and update them with the checked value of the #select_all checkbox.

$("#select_all").click(function(){
    $(".checkbox-group input:checkbox").prop("checked", this.checked);
});

To submit your form via ajax without refreshing the page (and having the rows pop back) you need to apply an id to your form of bulk_action_form and then utilize the following jQuery:

$("#bulk_action_form").submit(function(e){
    e.preventDefault();
    $.ajax({
      type: "POST",
      url: $(this).attr("action"),
      data: $(this).serialize(),
      success: function(response) {
          // Consider doing something here (like a saved message).
          console.log(response);
      }
   });
});

Working jsfiddle here: http://jsfiddle.net/9qmxfc0n/4/

If you still receive the rows coming back then you have an issue with your PHP script.

Answer 2

I hope I understand correctly.

So you want to hide rows which are checked, on button click? Here's how you can do it JSFiddle:

//this is how you can select all rows
$('#select_all').on('click', function(){
    if(this.checked == true)
    {
        $('.table tbody .checkbox').each(function(){
            this.checked = true;
        });
    }
    else{
        $('.table tbody .checkbox').each(function(){
            this.checked = false;
        });
    }
});

$('#delete_message').on('click', function(){
    $('.table tbody').find('input:checkbox:checked').closest('tr').hide();
}) 

But if you want these rows to be hidden after refresh, you should create IDs for rows, then handle them in your PHP code. So, when you reload page, you would get those values, and hide rows with those IDs (or whatever you use).

Answer 3

Assuming you have a form then prevent then default and submit after.

 $('#delete_message').click(function(e)
         e.preventDefault();
         $('.checkbox:checked').closest('tr').hide();          
         $(this).closest('form').submit();
    });

If your using Ajax however put this in your success function.