We Keep Coding

Display Updated table without refreshing or reloading page

I have a table which shows the list of my products and I have used jQuery to delete products without reloading the page, however the updated table doesn't show unless I refresh the page..
I have tried to hide it by using opacity, still it doesn't work..
Here is my php code
<div class="table-stats order-table ov-h">
<table id="bootstrap-data-table" class="table ">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Availability</th>
<th>Category</th>
<th>Total Ordered</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="data-table">
<?php
$stmt_1 = mysqli_prepare($link,"SELECT * FROM products");
mysqli_stmt_execute($stmt_1);
$result = mysqli_stmt_get_result($stmt_1);
while($row = mysqli_fetch_array($result)){ ?>
<div class="product">
<tr class="product">
<?php
$sql_img = "SELECT * FROM pro_images WHERE pro_id= ? LIMIT ?";
$stmt_img = mysqli_prepare($link, $sql_img);
mysqli_stmt_bind_param($stmt_img, "ii" ,$param_pro_id, $param_limit);
$param_pro_id = $row["pro_id"];
$param_limit = 1;
mysqli_stmt_execute($stmt_img);
$img_results = mysqli_stmt_get_result($stmt_img);
$image = mysqli_fetch_assoc($img_results);
?>
<td><img src="../admin/assets/img/products/<?php echo $image["pro_image"]; ?>"></td>
<td><?php echo $row["pro_name"]; ?></td>
<td><?php echo $row["pro_quantity"]; ?></td>
<?php
$sql_category = "SELECT cat_name FROM categories WHERE cat_id = ?";
$stmt_category = mysqli_prepare($link, $sql_category);
mysqli_stmt_bind_param($stmt_category, "i", $param_cat_id);
$param_cat_id = $row["pro_category"];
mysqli_stmt_execute($stmt_category);
$result_category = mysqli_stmt_get_result($stmt_category);
$category = mysqli_fetch_assoc($result_category);
?>
<td> <?php echo $category["cat_name"]; ?> </td>
<?php
$pro_ord = "SELECT COUNT(*) AS total FROM order_details WHERE pro_id = ?";
$pro_stmt = mysqli_prepare($link, $pro_ord);
mysqli_stmt_bind_param($pro_stmt ,"i", $row["pro_id"]);
mysqli_stmt_execute($pro_stmt);
$pro_res = mysqli_stmt_get_result($pro_stmt);
$pro = mysqli_fetch_array($pro_res);
?>
<td><?php echo $pro["total"]; ?></td>
<td><span class="badge badge-success"><i class="ti-pencil"></i></span>
</td>
<td>
<button class="remove badge badge-danger" onclick="delete_data(<?php echo $row["pro_id"]; ?>)"><i class="ti-trash"></i></button>
</td>
</tr>
</div>
<?php } ?>
</tbody>
</table>
</div>
And here is my JQUERY code
function delete_data(d){
    var id=d;
if (confirm("Are you sure you want to delete this product? This cannot be undone later.")) {
 $.ajax({
      type: "post",
      url: "products.php",
      data: {id:id},
      success: function(){
        $(this).parents(".product").animate("fast").animate({ opacity : "hide" }, "slow");
      }
    });
}
  }
And here is the delete code
$pro_id =$_POST['id'];
$delete = "DELETE FROM products WHERE pro_id= ?";
$results = mysqli_prepare($link, $delete);
mysqli_stmt_bind_param($results, "i", $param_pro_id);
$param_pro_id = $pro_id;
mysqli_stmt_execute($results);

You need to be more specific when you targeting the div you want to refresh, for example:
success: function(){
$("#div_id_you_want_refresh")
.load("your_entire_url" + "#div_id_you_want_refresh");
}

You can pass this as well inside your delete_data function where this refer to current element clicked i.e : your button . Then , inside success function use this to hide your .product element.
Demo Code:
function delete_data(d, el) {
var id = d;
if (confirm("Are you sure you want to delete this product? This cannot be undone later.")) {
/* $.ajax({
type: "post",
url: "products.php",
data: {
id: id
},
success: function() {*/
//use this then remove closest product tr
$(el).closest(".product").animate("fast").animate({
opacity: "hide"
}, "slow");
/* }
});*/
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="bootstrap-data-table" class="table">
<thead>
<tr>
<th>Image</th>
<th>Name</th>
<th>Availability</th>
<th>Category</th>
<th>Total Ordered</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="data-table">
<tr class="product">
<td><img src="../admin/assets/img/products/"></td>
<td>
smwthing
</td>
<td>
1
</td>
<td>
abs
<td>
1222
</td>
<td><span class="badge badge-success"><i class="ti-pencil"></i></span>
</td>
<td>
<!--pass `this` inside fn-->
<button class="remove badge badge-danger" onclick="delete_data('1',this)"><i class="ti-trash">x</i></button>
</td>
</tr>
<tr class="product">
<td><img src="../admin/assets/img/products/"></td>
<td>
smwthing
</td>
<td>
12
</td>
<td>
abs1
<td>
12221
</td>
<td><span class="badge badge-success"><i class="ti-pencil"></i></span>
</td>
<td>
<button class="remove badge badge-danger" onclick="delete_data('2',this)"><i class="ti-trash">x</i></button>
</td>
</tr>
</tbody>
</table>

looping through a table and storing a particular cell in an array if row is checked

I currently have a table that is triggered by a drop down. Inside the table, there's a checkbox. When the check box is checked and the user clicks on the confirm button, the code should loop through the table and get the email values of all the checked rows and store them in an array. So far, it can check if the rows are checked. I've found a few ways online but its not working. Here's the table:
<?php if ($picked != null){ ;
foreach ($picked as $rows): ?>
echo base_url(); ?>employer/view/send/<?php echo $rows['username']; ?>-->
<!--form action="" method="POST"-->
<?php endforeach; ?>
<table id="view_add"
class="table dataTable table-striped table-dynamic table-hover _tm">
<thead>
<tr>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 250px;">
Applicant Name
</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1"
style="width: 200px;">
Employer
</th>
<th class="sorting" tabindex="0" rowspan="1" colspan="1"
style="width: 200px;">
Post Header
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 450px;">
Description
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 100px;">
VIEW CV
</th>
<th class="sorting_asc" tabindex="0" rowspan="1" colspan="1"
style="width: 100px;">
</th>
</tr>
</thead>
<tbody>
<?php foreach ($picked as $rows): ?>
<tr>
<td><?php echo $rows['applicantName']; ?></td>
<td><?php echo $rows['employerName']; ?></td>
<td><?php echo $rows['postingName']; ?></td>
<td><?php echo $rows['postDescription']; ?></td>
<td style="display: none;"><?php echo $rows['email']; ?></td>
<td><a id="stress" data-toggle="modal" href="#editButton"
data-full="<?php echo $rows['fullName']; ?>"
data-school="<?php echo $rows['institution']; ?>"
data-state="<?php echo $rows['state']; ?>"
data-location="<?php echo $rows['location']; ?>"
data-dob="<?php echo $rows['dob']; ?>" data-skill="<?php echo $rows['skills']; ?>"
data-sex="<?php echo $rows['sex']; ?>" data-gpa="<?php echo $rows['cgpa']; ?>"
data-call="<?php echo $rows['phone']; ?>"
data-like="<?php echo $rows['favoured']; ?>"
data-award="<?php echo $rows['awards']; ?>"
data-interest="<?php echo $rows['interests']; ?>" class="myeditButton"
>view</a></td>
<td>
<label class="switch m-r-40">
<input type="checkbox" class="switch-input"
id="<?php echo $rows['applicationKey']?>"
data-mail="<?php echo $rows['email']; ?>"
data-confirm="<?php echo $rows['applicationId']; ?>"
id="check" name="check" <?php echo $rows['status'] ? 'checked':''; ?> >
<span class="switch-label" data-on="yes" data-off="no"></span>
<span class="switch-handle"></span>
</label>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<div class="form-group">
<input type="submit" value="Confirm" id="mail" class="btn btn-primary mail">
</div>
<!--/form-->
<?php }else{ ;?>
<div class="alert alert-warning">
<h4>There are no current Applicants for this post.</h4>
</div>'
<?php } ;?>
Here's the little script I've used:
<script>
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).data("mail");
mail_list.push(mail);
var emailers = mail_list.join(",");
//SEND TO PHP
$.ajax({
type: 'post',
url: '<?php echo base_url(); ?>employer/view/send',
data: {
chosen: emailers
},
success: function( data ) {
console.log( data );
}
});
//the END
}
)
});
</script>
My JS isn't so good.
Lastly, heres the php end
else if ($param1 == 'send')
{
$src1= $_POST['chosen'];
$array = explode(",", $src1);
print_r($array);

First, you should add a way to "find" the email value of a row. So edit the html with something like that :
<td style="display: none;" class="email-value">
<?php echo $rows['email']; ?>
</td>
Now, I think there is a small error in your code, an html id is targetable by # and a class by a .. So with my changement I propose :
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).parents("tr").find(".email-value").text();
//this line search the "tr" parent of each input checkbox that's checked,
//and then finds the child "email" value of it.
mail_list.push(mail);
}
)
})
Alter solution
Add the email in data parameters of the checkbox
<input type="checkbox" class="switch-input"
id="<?php echo $rows['applicationKey']?>"
data-mail="<?php echo $rows['email']; ?>"
data-confirm="<?php echo $rows['applicationId']; ?>"
data-email="<?= $rows['email']"
id="check" name="check" <?php echo $rows['status'] ? 'checked':''; ?> >
Then, the javascript become quite simple :
$(document).on("click", "#mail", function () //<-small mistake here
{
var mail_list = [];
$( 'input[type=checkbox]:checked' ).each(
function(){
var mail = $(this).data("email");
mail_list.push(mail);
//the END
}
)
})
update : oops, it's parents*, parent can't go upper than one level...
update2 : Add an alternative version, simplified

<script type="text/javascript">
$(document).on("click", ".mail", function ()
{
var emailList = [];
var selectedRows = $( 'table._tm' ).find( 'tbody' ) // select table body and
.find( 'tr' ) // select all rows that has
.has( 'input[type=checkbox]:checked' ) // checked checkbox element
selectedRows.each(function(idx, elem) {
var email = jQuery(elem).find('input[type="checkbox"]').data("mail");
emailList.push(email);
});
console.log( 'elem:', emailList );
} );

This should be quite easy try something like this:
var emailList = [];
selectedRows.forEach(function(idx, elem) {
var email = jQuery(elem).data("mail");
emailList.push(email);
});

MDL Checkbox Function MaterialCheckbox.check() doesn't work on ajax content

I am working with MDL Checkbox where i need to delete all values at once. As i did some research and looks like old method is deprecated : Deprecations for MDL Data Table Checkbox and mdl-data-table--selectable can't be used anymore.
HTML Code:
<div class="load_customer">
<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--7-col-phone">
<thead>
<tr>
<th>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" id="table-header" for="table-input">
<input type="checkbox" id="table-input" class="mdl-checkbox__input" />
</label>
</th>
<th>Sr. No</th>
<th>Name</th>
<th>Gender</th>
<th>Date of Birth</th>
<th>Anniversary</th>
<th>Address</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<?php
$i=1;
$select = $pdo->query("SELECT * FROM `accounts` ORDER BY `id` DESC");
while($fetch = $select->fetch()){
?>
<tr>
<td>
<label class="mdl-checkbox child_checkbox mdl-js-checkbox mdl-js-ripple-effect mdl-data-table__select" data="<?php echo $fetch['id'];?>" for="row[<?php echo $i;?>]">
<input type="checkbox" id="row[<?php echo $i;?>]" class="mdl-checkbox__input" />
</label>
</td>
<td><?php echo $i;?></td>
<td><?php echo $fetch['name'];?> </td>
<td><?php echo $fetch['gender'];?></td>
<td><?php echo $fetch['dob'];?></td>
<td><?php echo $fetch['anniversary'];?></td>
<td><?php echo $fetch['address'];?></td>
<td><?php echo $fetch['phone'];?></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
</div>
So after adding it manually it works fine until i load table with ajax. Then it all stops working. I am able to check main checkbox #table-header, but function which checks all checkboxes (MaterialCheckbox.check()) does not works anymore. I checked console & there are no errors in console.
Javascript Code
var arr = [];
$(document).on("click","#table-header input",function() {
var all_elements = document.querySelectorAll('.child_checkbox');
for(var i=0, n=all_elements.length; i<n; i++){
var element = all_elements[i];
if($('#table-header input').is(":checked")) {
element.MaterialCheckbox.check();
var ids = element.getAttribute("data");
arr.push(ids);
}
else {
element.MaterialCheckbox.uncheck();
var removeItem = element.getAttribute("data");
arr = $.grep(arr, function(value) {
return value != removeItem;
});
}
}
});
I am using componentHandler.upgradeAllRegistered() and Checkbox is working fine, but it does not loop through all checkboxes.
$.post("load_customer.php",function(data){
$(".load_customer").html(data);
componentHandler.upgradeAllRegistered();
});
Please help me with this.Thanks.

Set value of HTML element from javascript

I am using session variable to keep track of items in the cart. I generate a table using loop to display contents of the cart. The code for table is as follow:
<?php
$count=0;
$grandTotal=0;
foreach($_SESSION['cart'] AS $product) {
$table=$product['table'];
$id=$product['id'];
$Name=$product['name'];
$qty=$product['quantity'];
$price=$product['price'];
$total=$qty*$price;
$grandTotal +=$total;
?>
<tr>
<td class="cart_product">
<img src=<?php $i=2; echo "images/".$table."/".$id.".jpg"?> height="150" width="150">
</td>
<td class="cart_description">
<h4><?php echo $Name?></h4>
<p><?php echo "Web ID: ".$id?></p>
</td>
<td class="cart_price">
<p><?php echo $price?></p>
</td>
<td class="cart_quantity">
<div class="cart_quantity_button">
<a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" id="increment"> + </a>
<input class="cart_quantity_input" type="text" name="quantity" id="qty" value="<?php echo $qty?>" autocomplete="off" size="2">
<!-- <p class="cart_quantity_input" name="qunatity" id="qty"><?php echo $qty?></p>-->
<a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decrement" > - </a>
</div>
</td>
<td class="cart_total">
<p class="cart_total_price"><?php echo $total ?></p>
</td>
<td class="cart_delete">
<a class="cart_quantity_delete" href="addToCart.php?table=men&action=del&id=<?php echo $id ?>"><i class="fa fa-times"></i></a>
</td>
</tr>
<?php
}
$tax=0.15*$grandTotal;
?>
I am having problem with + and - buttons within a tags. I want to increment or decrement value in input field named quantity. But since i am generating table in a loop i do not know the id of each field. I want to do something like this:
<script>
$(document).ready(function () {
$("#increment").click(function () {
var oldval=document.getElementById("qty").value;
var newval=parseInt(oldval);
document.getElementById("qty").value=newval++;
});
});
</script>
But this method always increments first quantity field in the table. How do i get ids of other quantity fields in the table?

Dont use ids inside loop.Just use class for that>check the snippet for a smaple demo
$(document).ready(function () {
$(".increment").click(function () {
var oldval = $(this).prev('.qty').val();
var newval = parseInt(oldval)+ 1;
$(this).prev('.qty').val(newval);
});
$(".decrement").click(function () {
var oldval = $(this).next('.qty').val();
var newval = parseInt(oldval) - 1;
$(this).next('.qty').val(newval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> <tr>
<td>sl No</td>
<td>name</td>
<td>Dept</td>
<td>dummy</td>
<td>dummy</td>
<td>dummy</td>
</tr>
<tr>
<td>1</td>
<td>name</td>
<td>
</td>
<td>name</td>
<td>name</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td>name</td>
<td>Dept</td>
<td>name</td>
<td> <button class="decrement"> - </button>
<input type="text" class="qty" value="1"/>
<button class="increment">+ </button>
</td>
<td>name</td>
</tr>
<tr>
<td>3</td>
<td>name</td>
<td>name</td>
<td>name</td>
<td>name</td>
<td>name</td>
</tr>
</table>

There are 2 solutions to this problem:
When generating table using php, assign unique id to each row's <a> and <input>, such as #increment_id8878 and #input_id8878. Then when #increment or #decrement button is clicked, operate <input> with corresponding id.
Operate <input> element with jQuery's relative selector.
For example:
$('.increment').click(function() {
var inputEle = $(this).siblings('input');
var originVal = inputEle.val();
inputEle.val(parseInt(originVal) + 1);
});
A jsfiddle is made for the 2nd solution.
BTW, duplicate id should be avoided in HTML code.

Don't use same id for multiple elements instead use class like below
<a class="cart_quantity_up" href="addToCart.php?table=<?php echo $table ?>&action=inc&id=<?php echo $id ?>" class="increment">
same is case of decrement button user class
<a class="cart_quantity_down" href="addToCart.php?table=men&action=dec&id=<?php echo $id ?>" name="decrement" class="decrement"> - </a>
You can bind click event to these anchors and change the quantity in input inside same parent div
$(function(){
$('.increment').on('click', function(){
var $parent = $(this).closest('.cart_quantity_button');
var $input = $parent.find('.cart_quantity_input');
var value = $input.val();
value = parseInt(value)+1;
$input.val(value);
});
$('.decrement').on('click', function(){
var $parent = $(this).closest('.cart_quantity_button');
var $input = $parent.find('.cart_quantity_input');
var value = $input.val();
value = parseInt(value)-1;
$input.val(value);
});
});

Save updated values to database and show them in html table

I have a table like the following:
<script>
$("#edit").hide(); // Hide the edit table first
$("#update").click(function() {
$("#edit").toggle();
$("#shown").toggle();
// If we are going from edit table to shown table
if($("#shown").is(":visible")) {
var vouchertype = $('input[name="vouchertype[]"]').map(function(){return $(this).val();}).get();
var mode= $('select[name="mode[]"]').map(function(){return $(this).val();}).get();
// Then add it to the shown table
var baseurl='<?php echo base_url()."index.php/account/insert_voucher";?>';
$.ajax({
type: "POST",
url: baseurl,
data: $('#edit *').serialize() ,
cache: false,
success: function(html) {
alert(html);
}
});
$(this).val("Edit");
}
else $(this).val("Update");
});
</script>
<table width="62%" height="70" border="1" cellpadding="0" cellspacing="0" class="tbl_grid" id="shown">
<?php if(count($voucher_info) > 0 ){ ?>
<tr class="bgcolor_02">
<td width="22%" height="25" align="center" class="admin" >S.no</td>
<td width="37%" align="center" class="admin">Voucher Type</td>
<td width="37%" align="center" class="admin">Voucher Mode</td>
</tr>
<?php
$rownum = 1;
foreach ($voucher_info as $eachrecord){
$zibracolor = ($rownum%2==0)?"even":"odd";
?>
<tr align="center" class="narmal">
<td height="25"><?php echo $eachrecord->voucher_id; ?></td>
<td><?php echo $eachrecord->voucher_type; ?></td>
<td><?php echo ucwords($eachrecord->voucher_mode); ?></td>
</tr>
<?php }
}
else {
echo "<tr class='bgcolor_02'>";
echo "<td align='center'><strong>No records found</strong></td>";
echo "</tr>";
}
?>
</table>
<table width="62%" height="70" border="1" cellpadding="0" cellspacing="0"
id="edit">
<?php if(count($voucher_info) > 0 ){ ?>
<tr class="bgcolor_02">
<td width="27%" align="center" class="admin" >S.no</td>
<td width="37%" align="center" class="admin" >Voucher Type</td>
<td width="47%" align="center" class="admin" >Voucher Mode</td>
<!-- <td width="41%" align="center" class="narmal"> <strong>Actions</strong></td>-->
</tr>
<?php
$rownum = 1;
foreach ($voucher_info as $eachrecord){
$zibracolor = ($rownum%2==0)?"even":"odd";
?>
<tr align="center" class="narmal">
<td height="25"><?php echo $eachrecord->voucher_id ; ?><input type="hidden" name="voucher_id[]" value="<?php echo $eachrecord->voucher_id; ?>" /></td>
<td><input name="vouchertype[]" type="text" value="<?php echo $eachrecord->voucher_type; ?>" /></td>
<td><select name="mode[]" >
<option value="paidin" <?php if($eachrecord->voucher_mode=='paidin') { ?> selected="selected" <?php } ?>>Paid In</option>
<option value="paidout" <?php if($eachrecord->voucher_mode=='paidout') { ?> selected="selected" <?php } ?>>Paid Out</option>
</select></td>
</tr>
<?php } }
else {
echo "<tr class='bgcolor_02'>";
echo "<td align='center'><strong>No records found</strong></td>";
echo "</tr>";
}
?>
</table>
</td>
</tr>
<input id="update" type="submit" name="submit" value="Edit"/
In first table I am displaying values from database. But when user click on edit button below the table, Then that table values should be editable for user. I have succeeded in making editable fields but again when user click on submit then updated values are not displaying in first table. I know it's possible with jQuery or JavaScript. When I alert(newsales), the alert is undefined.

An easy way to handle this would be have two separate tables, and toggle between them when you edit a table. So for example we have a table that shows our normal data called shown and one with the input and select for a user to enter data called edit. These tables will share the same button, and when clicked it will toggle between the tables, making it look like it's switching between edit and show mode. This way we can just copy the values from the edit table to the text in the shown table. Here is an example:
$("#edit").hide(); // Hide the edit table first
$("#update").click(function() {
$("#edit").toggle();
$("#shown").toggle();
// If we are going from edit table to shown table
if($("#shown").is(":visible")) {
// Get the data from the edit table
var newSales = $("#edit tr:nth-child(1) td input[name='vouchertype']").val();
var newPay = $("#edit tr:nth-child(1) td select[name='mode']").val();
var newTax = $("#edit tr:nth-child(2) td select[name='tax']").val();
// Then add it to the shown table
$("#shown tr:nth-child(1) td:nth-child(2)").text(newSales);
$("#shown tr:nth-child(1) td:nth-child(3)").text(newPay);
$("#shown tr:nth-child(2) td:nth-child(1)").text(newTax);
$(this).val("Edit");
}
else $(this).val("Update");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="shown">
<tr>
<td>Sr no</td><td>Sales</td><td>Paid in</td>
</tr>
<tr><td>Taxed</td></tr>
</table>
<table id="edit">
<tr>
<td>Sr no</td><td><input type="text" name="vouchertype" value="Sales" /></td>
<td>
<select name="mode">
<option value="paidin">Paidin</option>
<option value="paidout">Paidout</option>
</select>
</td>
</tr>
<tr>
<td>
<select name="tax">
<option value="Taxed">Taxed</option>
<option value="Not Taxed">Not Taxed</option>
</select>
</td>
</tr>
</table>
<input id="update" type="submit" name="submit" value="Edit"/>
Notice: This is an answer to the original question, which is quite different then the new question added in as an edit.