在按钮上单击更新具有用户标识的行和列

Question

I built a checklist system where managers can create a list of products and employees need to be able to signoff on these products when they've completed them. Each product or material, when created, gets attached to a revision number. You can see how its layed out below.

http://i.imgur.com/MjSc4sA.jpg

So when a user clicks signoff it'll append their name there and updated the table.

Table structure:

My form looks like this (I use twig templating engine)

 {% for item in component %}

    <tr>
        <td>{{ item.wo_num_and_date }}</td>
        <td>{{ item.comp_name_and_number }}</td>
        <td>{{ item.finish_sizes }}</td>
        <td>{{ item.material }}</td>
        <td>{{ item.total_num_pieces }}</td>
        <td>{{ item.workorder_num_one }}</td>
        <td>{{ item.notes_one }}</td>
        <td id='signoff_userone'><input type='button' id='signoff_user_one' data-rowid={{ item.id }} value='Signoff' /> {{ item.signoff_user_one.firstname }} {{ item.signoff_user_one.lastname }}</td>
        <td>{{ item.workorder_num_two }}</td>
        <td>{{ item.notes_two }}</td>
        <td><input type='button' id='signoff_user_two' value='Signoff' /> {{ item.signoff_user_two.firstname }} {{ item.signoff_user_two.lastname }}</td>
        <td>{{ item.workorder_num_three }}</td>
        <td>{{ item.notes_three }}</td>
        <td><input type='button' id='signoff_user_three' value='Signoff' /> {{ item.signoff_user_three.firstname }} {{ item.signoff_user_three.lastname }}</td>
    </tr>

    {% endfor %}

data-rowid={{ item.id }}

This displays the id for that specific row. So each row has its own id.

I have a script that looks like this which I think I'll need to call if I use jQuery+AJAX to dynamically sign off and I'm using this update statement.

$sql = "UPDATE checklist_component_stock SET signoff_user_one = $user_id WHERE id = " . $row['id'];
mysqli_query($dbc3, $sql);

How would I go about doing this using jQuery+AJAX?

I was toying around and tried something like this but obviously it doesn't work and is probably very wrong.

  $('#signoff_user_one').click(function(){
        $.post('phplib/job_checklist_signoff.php', { rowid: {{ item.id }} }, function(data){
            console.log(data);
            $('#signoff_userone').append("<li>" + data.user.name + " (" + data.date + ")</li>");
        }, 'json');
    });

job_checklist_signoff.php

<?php
    require_once('../includes/config.php');

    $user = getuserinfo($loggedin_id);
    $row_id = mysqli_escape_string($dbc3, $_POST['rowid']);

    $sql = "UPDATE checklist_component_stock SET signoff_user_one = $user WHERE id = " . $row_id;
    mysqli_query($dbc3, $sql);


    $ret = array('rowid' => $row_id, 'user' => $user, 'date' => date('M d, Y'));
    echo json_encode($ret);
?>

Answer 1

// Assuming "tableElement" is the id of the table owning those rows
// This will handle clicks on any button having an id starting with "signoff_user_"
$('#tableElement').on('click', 'input[id^="signoff_user_"]', function (e) {
    var $t = $(this);
    $.ajax({
        type: "POST",
        url: "phplib/job_checklist_signoff.php",
        data: {
            rowid: $t.data('rowid')
        },
        success: function (data) {
            console.log(data);
            var list = $t.siblings('ul');
            if (!list.length) {
                list = $t.after($('<ul>')).next();
            }
            list.append("<li>" + data.user.name + " (" + data.date + ")</li>");
        },
        dataType: 'json'
    });
});

jsfiddle here without ajax call