My goal is that I want to sort my data if it is still ACTIVE or INACTIVE. But the result I’ve got is that if I click active it only shows the active data and when inactive it doesn’t show. I don’t have syntax errors but logical errors. I am using PHP, JQuery/AJAX.
Here is my code in HTML
<?php
include('../include/header_ps.php');
?>
<!DOCTYPE html>
<html lang="en">
<body>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header"> Table of Tools Specification
<a href="../forms/form_toolspec.php">
<button class="btn btn-primary pull-right">
<span class="fa fa-plus-circle"></span>
Add Record
</button>
</a>
</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- Status -->
<div>
<form action="GET">
<div class="form-group">
<label> Table group by Status </label>
<select name="selector_id" style="width:200px;" class="show-menu-arrow form-control" id="stats" required>
<option value="1" id="active" selected=""> ACTIVE </option>
<option value="0" id="inactive"> INACTIVE </option>
</select>
</div>
</form>
</div>
<!-- /.row -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary">
<div class="panel-heading">
Table of Tools Specification
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="table-responsive">
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th><center> Status </center></th>
</tr>
</thead>
<?php
$con->next_result();
$result = mysqli_query($con, "CALL GetToolSpecByStatus(1)"); ?>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)) { ?>
<?php echo "<tr>"; ?>
<?php echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>"; ?>
<?php echo "<td>" . $row['model_num'] . "</td>"; ?>
<?php echo "<td>" . $row['model_num_val'] . "</td>"; ?>
<?php echo "<td>" . $row['no_of_days'] . "</td>"; ?>
<td>
<center>
<p data-id="<?php echo $row['ID'];?>"
class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>" >
<?php echo ($row['status'])? 'Active' : 'Inactive'?>
</p>
</center>
</td>
<?php echo "</tr>"; ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here is my code in Javascript/Jquery
<script>
$('#dataTables').DataTable();
</script>
<!-- Need ajax -->
<script>
$("#stats").change(function() {
var val = $(this).val() == 1 ? "Active" : "Inactive"
console.log(val)
$("table tbody tr").hide()
$("table tr").find(".status_checks:contains(" + val + ")").closest("tr").show()
})
$(document).on('click', '.status_checks', function() {
var status = '1';
if ($(this).hasClass("btn-success")) {
status = '0';
}
var id = $(this).data('id');
$.ajax({
type: "POST",
url: "../forms/form_statusForspecs.php",
data: {
id: id,
status: status
},
success: function(data) {
// alert(data);
location.reload();
}
});
});
</script>
Here is the php for AJAX where the the INACTIVE data should be displayed.
<?php
include('../include/connect.php');
$user_id=$_POST['id'];
$newStatus=$_POST['status'];
$query = "UPDATE tools_spec SET status='$newStatus' WHERE ID = '$user_id'";
$result = mysqli_query($con, $query);
if($result === TRUE)
{
echo json_encode(1);
}
else
{
echo json_encode(0);
}
?>
<?php
$con->next_result();
$result = mysqli_query($con,"CALL GetToolSpecByStatus(0)"); ?>
<tbody>
<?php while ($row = mysqli_fetch_assoc($result)) { ?>
<?php echo '<tr>'; ?>
<?php echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>"; ?>
<?php echo "<td>" . $row['model_num'] . "</a></td>"; ?>
<?php echo "<td>" . $row['model_num_val'] . "</td>"; ?>
<?php echo "<td>" . $row['no_of_days'] . "</td>"; ?>
<td>
<center>
<p data-id="<?php echo $row['ID'];?>"
class="status_checks statusButton <?php echo ($row['status'])? 'btn-success': 'btn-danger'?>">
<?php echo ($row['status'])? 'Active' : 'Inactive'?>
</p>
</center>
</td>
<?php echo '<tr>'; ?>
<?php } ?>
</tbody>
Advertisement
Answer
Instead of location.reload() you can change p tag class and text inside your success function of ajax . So, if the button has class btn-success remove this class using removeClass() method and add btn-danger class using addClass() method and vice-versa.
Demo Code :
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this) //declare here
if (selector.hasClass("btn-success")) {
status = '0';
}
var id = $(this).data('id');
console.log(id + "--" + status)
/* $.ajax({
type: "POST",
url: "../forms/form_statusForspecs.php",
data: {
id: id,
status: status
},
success: function(data) {*/
//check if selector has class success (remove and add class and change text)
selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass("btn-danger"), selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass("btn-success"), selector.text("Active"))
/*}
});*/
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables">
<thead>
<tr>
<th> Tools Name </th>
<th> Model No. </th>
<th> Value </th>
<th> Number of days </th>
<th>
<center> Status </center>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href='edit_toolspec.php?ID=1' style='color:red;'> something</a></td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>
<center>
<p data-id="1" class="status_checks statusButton btn-success">Active
</p>
</center>
</td>
</tr>
<tr>
<td><a href='edit_toolspec.php?ID=2' style='color:red;'> something</a></td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>
<center>
<p data-id="2" class="status_checks statusButton btn-danger"> Inactive </p>
</center>
</td>
</tr>
<tr>
<td><a href='edit_toolspec.php?ID=3' style='color:red;'> something3</a></td>
<td>23</td>
<td>1</td>
<td>2</td>
<td>
<center>
<p data-id="3" class="status_checks statusButton btn-danger"> Inactive </p>
</center>
</td>
</tbody>
</table>