Removing rows with ajax Data

morissette

I am experiencing an issue where rows will not remove upon a button click when using ajax and an auto-update function. Please help:

DT init:

mainTable = $("#main_dash").DataTable({
    "language": {
        "url": "../locale/" + locale + "/LC_MESSAGES/" + "dt." + locale + ".txt",
    },
    "pagingType": "full_numbers",
    "pageLength": 10,
    "ajax": {
        "url": "ajax_tables/main_table.php",
        "type": "POST"
    },
    "columnDefs": [
        { "orderable": false, "targets": 0 }
    ],
    "columns": [
        {"data": "flagged"},
        {"data": "date"},
        {"data": "type"},
        {"data": "regarding"},
        {"data": "submitted_by"},
        {"data": "review"},
        {"data": "assign"},
    ],
    "autoWidth":false,
    "order": [[1, 'asc']],
    "deferRender": true,
    "initComplete": function() {
        setInterval(function() {
            var typing = $(".user_list:focus").val();
            if ( ! typing ) {
                mainTable.ajax.reload(null, false);
            }
        }, 10000);
    },
});

$(".inner-box-transparent").on('click', '.review_item', function() {
    var groom = $(this).parent().next().children('span:first-child').text();
    if (groom.length < 1) {
        groom = $(this).parent().children('span:first-child').text();
    }
    var name = $(this).closest('td').prev('td').prev('td').text();
    var query = "func=get_groom_info&groom_id=" + groom + '&access_level=6';
    var row = $(this).closest('tr')[0];
    var next_row = $(this).closest('tr').next().attr('id');
    next_row = $("#" + next_row).find('.review_item');
    var aid = $("#aid").text();
    $("#open_groom").text(groom);
    open_row = row;
    ajaxRequest("func=update_assigned_grooms", function(data) {
        $(".assigned_groom_number").empty().append(data);
    });
    ajaxRequest(query, function(data) {
        $("#groom_info .g_content").empty().append(data);
        $("#groom_info").show("slide", {
            direction: "left"
        }, 1000);
        var item = $("#item_id").text();
        make_edit();
        $("#flag_item").click(function() {
            var comments = $("#groom_comments").val();
            if (comments) {
                var query = "func=flag_item&groom_id=" + groom + "&reply=" + comments + "&aid=" + aid;
                ajaxRequest(query, function(data) {
                    $("#groom_info .g_content").empty().append("Groom replied to.");
                    mainTable.row(row).remove().draw();
                    dashTable.row(row).remove().draw();
                    next_row.click();
                });
            } else {
                failureMsg(_("Please enter a comment."));
            }
        });
 });

HTML:

{include="header"}
<table id="main_dash">
<thead>
<tr class="ui-widget-header">
   <th></th>
   <th>{"Date"|_}</th>
   <th>{"Type"|_}</th>
   <th>{"Regarding"|_}</th>
   <th>{"Submitted By"|_}</th>
   <th>{"Review"|_}</th>
   <th>{"Assign"|_}</th>
</tr>
</thead>
</table>
{include="footer"}

main_table.php:

<?php
require '../inc/main_class.php';
$data = $main->inet->fetch_array("select from_unixtime(g.timestamp, '%Y-%m-%d %H:%i:%s') as date2, from_unixtime(ga.response_timestamp, '%Y-%m-%d %H:%i:%s') as date, 
                                  e.fullname as regarding, gt.name as type, g.type_id,
                                  f.fullname as submitted_by, gt.color, g.groom_id, h.fullname as pushed_by, g.flagged
                                  from gg_groom as g
                                  left join employee as e on g.regarding = e.inet_id
                                  left join employee as f on g.submitted_by = f.inet_id
                                  left join gg_groom_types as gt on g.type_id = gt.type_id
                                  left join gg_groom_assignment as ga on g.groom_id = ga.groom_id
                                  left join employee as h on ga.pushed_by = h.inet_id
                                  where ga.status = 0 and g.type_id != 22 and ga.employee_id = 0
                                  group by g.groom_id order by g.timestamp asc");
$count = count($data);

foreach ( $data as &$d ) {
    $d['DT_RowId'] = $d['groom_id'];
    $d['DT_RowClass'] = 'groom-color-' . $d['type_id'];
    $d['review'] = '<button class="button button-blue review_item">Review</button>';
    $d['assign'] = '<span class="groom_id hidden">' . $d['groom_id'] . '</span><input type="text" class="user_list">';
    if ( preg_match('/1969-12-31/', $d['date'] )) {
        $d['date'] = $d['date2'];
    }
    if ( $d['flagged'] ) {
        $d['flagged'] = '<img src="images/red_flag.gif">';
    } else {
        $d['flagged'] = null;
    }
}

echo json_encode(array(
    "draw" => 1,
    "recordsTotal" => $count,
    "recordsFiltered" => 1,
    "data" => $data,
));

?>

In this example if you press the #flag_item button the row is not removed until the redraw in the initial DT reload. When the row should be removed using mainTable.row(row).remove().draw()

Please let me know what you think or how I can resolve.

morissette

Nevermind I just went w/

var row = $(this).closest('tr').attr('id');

and

$("#" + row).remove()

instead of relying on the api