1

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.

Community
  • 1
  • 1
Joseph Mok
  • 97
  • 4
  • 12
  • Can you post more relevant code please? There isn't any PHP, the table sorting isn't present either – ctwheels Jun 18 '15 at 13:06
  • @ctwheels I've added the HTMLfor the entire table and also the PHP that receives the post variable. The table sorting is done with the jquery code block. – Joseph Mok Jun 18 '15 at 14:38
  • FYI, the jquery sorting came from this (second answer by Nick Grealy): http://stackoverflow.com/questions/3160277/jquery-table-sort – Joseph Mok Jun 18 '15 at 14:47

0 Answers0