cpt-crunchy cpt-crunchy - 2 months ago 6
Ajax Question

change cell value on button click

I have a table with the following.

Table parts_stock
*--------------------*
| id | sku | stock |
| 1 | 101 | 2 |
| 2 | 102 | 3 |
*--------------------*


This is my code so far, i'm sure there are many ways to achieve this but ideally I want the qty value to change based on which button is clicked on without the page being refreshed (AJAX probably).

<tbody>
<?php

$query = 'SELECT stock_id, sku, in_stock ';
$query .= 'FROM parts_stock';
confirmQuery($query);
$select_skus = mysqli_query($connection, $query);
$num = mysqli_num_rows($select_skus);
if($num>0) {

while($row = mysqli_fetch_assoc($select_skus)) {
$id = $row['stock_id'];
$sku = $row['sku'];
$qty = $row['in_stock'];


echo "<tr>";
echo "<td>".$sku."</td>";
echo "<td>".$qty."</td>";
echo "<td>
<a href='' onclick='rem_qty()' id='minus' name='minus' class='btn btn-warning'><span class='glyphicon glyphicon-minus'></span></a>
<a href='' onclick='add_qty()' id='plus' name='plus' class='btn btn-success'><span class='glyphicon glyphicon-plus'></span></a>
</td>";
</td>";
}
}?>
</tbody>


ajax_search.js

<script>
function rem_qty(){
$.ajax({
type: "POST",
url: "update_qty.php",
data: {id_m: stock_id}
});
}

function add_qty(){
$.ajax({
type: "POST",
url: "update_qty.php",
data: 'id_p: stock_id'
});
}

</script>


update_qty.php file

<?php
if (isset($_POST['id_m'])) {
$r = $_POST['id_m'];
echo $r;
$cur_inv = "SELECT in_stock FROM parts_stock WHERE stock_id = '".$r."'";
$cur_query = mysqli_query($connection, $cur_inv);
while ($row = mysqli_fetch_assoc($cur_query)) {
$rem_stock = $row['in_stock'];
$rem_stock -= 1;
}
$inv_update = "UPDATE parts_stock SET in_stock = '".$rem_stock."' WHERE stock_id = '".$value."'";
$inv_query = mysqli_query($connection, $inv_update);
}
if (isset($_POST['id_p'])) {
$a = $_POST['id_p'];
echo $a;
$cur_inv = "SELECT in_stock FROM parts_stock WHERE stock_id = '".$a."'";
$cur_query = mysqli_query($connection, $cur_inv);
while ($row = mysqli_fetch_assoc($cur_query)) {
$add_stock = $row['in_stock'];
$add_stock -= 1;
}
$inv_update = "UPDATE parts_stock SET in_stock = '".$add_stock."' WHERE stock_id = '".$value."'";
}
?>

Answer

A simple and complete solution: just change mysqli_connect config in both page

index.php

<?php
    $connection = mysqli_connect("localhost", "root", "", "dbname"); //change dbname 

    $query = 'SELECT id, sku, stock FROM parts_stock';
    //confirmQuery($query);
    $select_skus = mysqli_query($connection, $query);
    $num = mysqli_num_rows($select_skus);
?>
<table>
    <tr>
        <th>Sku</th>
        <th>Stock</th>
        <th>Action</th>
    </tr>

    <?php if($num>0){
        while($row = mysqli_fetch_assoc($select_skus)) {
            $id   = $row['id'];    
            $sku  = $row['sku'];
            $qty  = $row['stock'];

            echo "<tr>";
            echo "<td>".$sku."</td>";
            echo "<td class='stock-{$id}'>".$qty."</td>";
            echo "<td>
                <a class='btn btn-warning' onclick='add_qty({$id})' href='#'><span class='glyphicon glyphicon-minus'>Value Add</span></a>
                <a class='btn btn-success' onclick='rem_qty({$id})' href='#'><span class='glyphicon glyphicon-plus'>Value Deduct</span></a>
              </td>";
            echo "</tr>" ;
        }
    }?>
</table>

<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
<script type="text/javascript">
    function add_qty(id){
        $.ajax({
            type: "POST",
            url: 'update_qty.php', //Relative or absolute path to response.php file
            data: {id:id, type:'add'},
            dataType: "json",
            success: function (data) {
                console.log(data);
                if(data.success){
                    //successfully added
                    $(".stock-"+id).html(data.data.stock);
                    alert(data.msg);
                }
            }
        });
    }

    function rem_qty(id){
        $.ajax({
            type: "POST",
            url: 'update_qty.php', //Relative or absolute path to response.php file
            data: {id:id, type:'rem'},
            dataType: "json",
            success: function (data) {
                console.log(data);
                if(data.success){
                    //successfully added
                    $(".stock-"+id).html(data.data.stock);
                    alert(data.msg);
                }
            }
        });
    }
</script>

update_qty.php

<?php
    $connection = mysqli_connect("localhost", "root", "", "dbname"); ////change dbname 

    header('Content-Type: application/json');
    $success = false;  $msg ="";
    if (isset($_POST['id'])) {
        $id = $_POST['id'];
        $cur_inv = "SELECT * FROM parts_stock WHERE id ={$id}";
        $cur_query = mysqli_query($connection, $cur_inv);
        if(mysqli_num_rows($cur_query)>0){ //if id is exist in database
            if($_POST['type']=="add"){
                $inv_update = "UPDATE parts_stock SET stock = (stock+1) WHERE id = {$id}"; //increase your stock dynamically
            }elseif($_POST['type']=="rem"){
                $inv_update = "UPDATE parts_stock SET stock = (stock-1) WHERE id = {$id}"; //increase your stock dynamically
            }

            $inv_query = mysqli_query($connection, $inv_update);
            if($inv_query){ //If sucess
                $msg = "Successfully Updated"; 
                $success = true;
            }else{ //if failed
                $msg = "Failed to Update";
            }
        }else{
            $msg="Id is not found.";
        }

        $last_inv = "SELECT * FROM parts_stock WHERE id ={$id}";
        $last_query = mysqli_query($connection, $last_inv);
        $row = mysqli_fetch_assoc($last_query);
        echo json_encode(array('success'=>$success, 'msg'=>$msg, 'data'=>$row));
    }
?>

No need extra js file just index.php and update_qty.php