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."'";
}
?>
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
In your HTML Button to have a onClick event like this onclick="buttonSubtract1('<?php if(isset($val['itm_code'])){echo $val['itm_code'];}?>')"(You can fetch the itm_code from your db).Then Write your AJAX for Request and Response. And You need to Pass the itm_code through var x. e.g for like this xmlhttp.open("POST", "ajax/get_items.php?val=" +x, true);
In AJAX file
$item_cat = $_SESSION['item_cat']; // get a category from session
$iname=$_GET['val']; //get the value from main php file
if(!key_exists($item_cat)
{
$_SESSION['main'][$iname] = "1";
}
else
{
$_SESSION['main'][$item_cat][$iname]++;
}
echo "<pre>";
print_r($_SESSION['main']);
echo "</pre>";
EDIT 1
function buttonSubtract1(x)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.location.assign('items.php');
}
}
xmlhttp.open("POST", "ajax/get_items.php?val=" +x, true);
xmlhttp.send();
}
Working example
demo.php
<?php
$query = 'SELECT id, sku, 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['id'];
$sku = $row['sku'];
$qty = $row['stock'];
$data = "";
$data .= "<tr>";
$data .= "<td>{$sku}</td>";
$data .= "<td>{$qty}</td>";
$data .= "<td>
<a class='btn btn-warning' href='inventory.php?source=edit_inventory&id={$id}'><span class='glyphicon glyphicon-minus'></span></a>
<a class='btn btn-success' href='inventory.php?source=edit_inventory&id={$id}'><span class='glyphicon glyphicon-plus'></span></a>
</td>";
echo $a;
exit;
}
}?>
AJAX:
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<table >
<tr>
<th>Id</th>
<th>Sku</th>
<th>Qty</th>
</tr>
<tbody id="mytable">
</tbody>
</table>
<button id="clickme">Click</button>
<script>
$(document).ready(function(){
$("#clickme").click(function() {
$.ajax({
url:"demo.php",
type:"GET",
beforeSend:function() {
$("#mytable").empty();
},
success:function(response){
$("#mytable").append(response);
}, error:function(err) {
console.log(err);
}
})
});
});