I have a table with checkboxes in the first cell of each row where users can select which row to delete. The selected check boxes are passed as an array via post method to another page to process the row deleting. Here's a sample table:
<a href="javascript:void(0)">
<div class="button category_button">
Remove Selected
</div>
</a>
<table id="table_dump">
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="sort">ID <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
<th scope="col" class="sort">Public <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
<th scope="col" class="sort">Last Modified <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
<th scope="col" class="sort">Modified By <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
<th scope="col" class="sort">Name <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
<th scope="col" class="sort">Total Videos <a href="javascript:void(0)"><i class="fa fa-sort"></i></a></th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<form class="category_bulkremove" method="post" action="category_bulkremove.php">
<tr class="light">
<td><input type="checkbox" class="category_check" name="bulk_remove[]" value="1" /></td>
<td>1</td>
<td>Yes</td>
<td><!--1433745120-->June 08, 2015 2:32 PM</td>
<td>Joseph Mok</td>
<td>beauty</td>
<td>87</td>
<td><a href="category_edit.php?category_id=1">View</a></td>
</tr>
<tr class="dark">
<td><input type="checkbox" class="category_check" name="bulk_remove[]" value="2" /></td>
<td>2</td>
<td>Yes</td>
<td><!--1433737543-->June 08, 2015 12:25 PM</td>
<td>Joseph Mok</td>
<td>fashion</td>
<td>23</td>
<td><a href="category_edit.php?category_id=2">View</a></td>
</tr>
<tr class="light">
<td><input type="checkbox" class="category_check" name="bulk_remove[]" value="3" /></td>
<td>3</td>
<td>Yes</td>
<td><!--1433737544-->June 08, 2015 12:25 PM</td>
<td>Joseph Mok</td>
<td>fitness</td>
<td>11</td>
<td><a href="category_edit.php?category_id=3">View</a></td>
</tr>
</form>
<script>
$(document).ready(function(){
// Update these 3 variables for each table
var button = '.category_button';
var checkbox = '.category_check';
var form = '.category_bulkremove';
var checked = checkbox + ':checked';
$(button).hide();
$(checkbox).click(function() {
if ( $(checked).length > 0) {
$(button).show();
} else {
$(button).hide();
}
});
$(button).click(function(){
var removeConfirm = confirm("Are you sure you want to remove the selected items? This cannot be undone. If you want to hide the items on the website, simply set \"Public\" to \"No\"");
if (removeConfirm){
$(form).submit();
}
});
});
</script>
</tbody>
</table>
And here's the php that processes the row deleting:
if($_POST['bulk_remove']!='') {
$bulk_remove = $_POST['bulk_remove'];
// For loop for each checked item
for($i=0; $i < count($bulk_remove); $i++){
$remove_id = strip_tags(mysql_real_escape_string($bulk_remove[$i]));
// Check if id exists
$sql = mysql_query("
SELECT
*
FROM
category_index
WHERE
id='$remove_id' AND
remove='0'
");
$exist = mysql_num_rows($sql);
if($exist==1) {
// Update table to set remove to 1 for id
$update=mysql_query("
UPDATE
category_index
SET
active='0',
remove='1'
WHERE
id='$remove_id'
") or die (mysql_error());
}
else {
$error_message = 'An item you tried to remove does not exist.';
$error = TRUE;
}
}
}
else {
$error = TRUE;
$error_message = 'Seems like some data went missing. Please try again.';
}
The row deleting works fine with this set up. However, I am also using the following jQuery to re-order the entire table when the user clicks on the table head:
$('th.sort').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() }
The re-ordering works fine as well. But the problem comes when I try to delete rows after I've re-ordered the table. The post variable array is not passed to the next page. But I tested with a get method and the URL for the processing page does not contain any variables. However, if I add a hidden field to the form with a basic string as the value, the hidden field value arrives at the processing page but the array remains missing. Can anyone help me with this? Thanks in advance!
Edit: Here's a simplified demo of my problem: http://www.josephmok.me/_test/sort_table.php
If you check a few of the checkboxes and click "Submit", it will return the array. But if you click on the table headers to sort and then check the boxes and submit, the posted array are not sent.