CODEWITHSUNDEEP
phpjquerymysqlajax
MikeOscarEcho
MikeOscarEcho

Reputation: 546

On button click update row and column with user id

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. Imgur

https://i.sstatic.net/bPqQI.jpg

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

Table structure:

Imgur

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);
?>

Upvotes: 0

Views: 765

Answers (2)

Stphane
Stphane

Reputation: 3456

// 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

Upvotes: 1

user2699477
user2699477

Reputation: 

$.ajax({

    url: "phplib/job_checklist_signoff.php",
    type: "POST",
    data: "rowid={{item.id}}"

}).done(function(response){

       console.log(response);

});

Now all you have to do is make sure that back there in "phplib/job_checklist_signoff.php" you actually handle the $_POST['rowid'] into the query, not the $row.

And after the MySQL statement gets back to you with the report, it'd be nice to print whatever you want according to the failure/success of the UPDATE statement. Everything you print/echo in the php file will be passed on into JS through that response variable which I logged into the console. You could make use of that and notify the user of his action.

Upvotes: 0

Related Questions