unable to auto refresh two tables in HTML - javascript

I would like to ask, why I can't able to refresh two html tables? only 1? is there something wrong with the Javascript code? I already tried to declare 2 variables and tried to create to script for each and still no luck and I tried to change the variables name to unique one but still no luck. My full code below:
<!-- SALES.HTML -->
<div class="col-sm-5 shadow">
<p>
<h3><center>Hyukies</center></h3>
<center>Catbalogan, City</center>
<center><span class="glyphicon glyphicon-time"></span> <?php include('time.php'); ?></center> <br />
<div id="transactions_left">
<?php include_once('salestable.php')?>
</div>
</p>
<div class="row">
<div class="col-sm-12"><b>
<p>
<?php include_once('sales_count.php')?>
<script>
var table = $("#salestableid");
var refresh = function() {
table.load("salestable.php", function() {
setTimeout(refresh, 1);
});
};
refresh();
var table1 = $("#sales_countid");
var refresh1 = function() {
table.load("sales_count.php", function() {
setTimeout(refresh1, 1);
});
};
refresh1();
</script>
<button type="button" class="btn btn-danger btn-md" data-toggle='modal' data-target='#cancel'>Cancel</a>
<button type="button" class="btn btn-warning btn-md" data-toggle='modal' data-target='#hold'>Hold</button>
<button type="button" class="btn btn-success btn-md pull-right" data-toggle='modal' data-target='#payment' >Payment</button>
<br /><br />
<center>Thank you and have a Nice day!</center>
</p>
</div>
</div>
</div>
<!-- End of Page SALES.HTML -->
<!-- SALESTABLE.PHP -->
<?php require_once("../includes/db_connection.php"); ?>
<table class="table table-hover" id='salestableid'>
<thead>
<tr class= "default" style="background-color: #e18728">
<th><font color = "white">Action</font></th>
<th width="200"><font color = "white">Product</th>
<th><font color = "white">Quantity</th>
<th width="75"><font color = "white">Price</th>
<th width ="90"><font color = "white">Total</th>
</tr>
</thead>
<tbody>
<tr>
<?php
$user_query = mysqli_query($connection, "SELECT saleslog.itemid, saleslog.qty, saleslog.date, saleslog.total, saleslog.id, items.`name`, items.description, items.retailprice FROM saleslog LEFT JOIN items ON items.id = saleslog.itemid")or die(mysqli_error());
while($row = mysqli_fetch_array($user_query)){
$id = $row['id'];
?>
<tr>
<td></td>
<td><?php echo $row['name']; ?></td>
<td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<?php echo $row['qty']; ?></td>
<td>&nbsp<?php echo number_format($row['retailprice'],2); ?></td>
<?php
$total = $row['qty'] * $row['retailprice'];
?>
<td><?php echo number_format($total,2); ?></td>
</tr>
<?php } ?>
</tr>
</tbody>
</table>
<!-- End of Page SALESTABLE.PHP -->
<!--SALES_COUNT.PHP -->
<?php require_once("../includes/db_connection.php"); ?>
<?php
$count_client= mysqli_query($connection, "SELECT * FROM saleslog");
$count = mysqli_num_rows($count_client);
?>
<?php
$totalsales= mysqli_query($connection, "SELECT SUM(total) AS totalpritems FROM saleslog");
while($totalperitems = mysqli_fetch_array($totalsales)){
$total_sales = $totalperitems['totalpritems'];
}
?>
<table class='table' style="border-style: dotted" id="sales_countid">
<tr class='' style="border-style: dotted">
<td width="50" >Total Items: </td>
<td width="50"align="right"><?php echo $count; ?></td>
<td width="50" >Total: </td>
<td width="50"align="right" >P <?php echo number_format($total_sales,2); ?></td>
</tr>
<tr class='' style="border-style: dotted">
<td width="50">Discount: </td>
<td width="50"align="right">0.00 </td>
<td width="50">Tax: </td>
<td width="50"align="right">0.00 </td>
</tr>
<tr style="border-style: dotted">
<td width>Total Payable: </td>
<td align="right">P <?php echo number_format($total_sales,2); ?></td>
<td></td>
<td></td>
</tr>
</table>
<!--End of Page SALES_COUNT.PHP -->


In your refresh code for table1, you refresh table instead.
table1.load(...) instead of table.load(...) in the code below.
var table1 = $("#sales_countid");
var refresh1 = function() {
table.load("sales_count.php", function() {
setTimeout(refresh1, 1);
});
};

Related

How do I make my dataTable sorted if the data is ACTIVE or INACTIVE using JQuery and Ajax?

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>
Here is the link of the image

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>

How to use jquery-confirm in codeigniter?

I've been trying to use jquery-confirm that is provided by https://craftpip.github.io/jquery-confirm/#ajaxloading . There's no error, but once I tried to delete an, item, the jquery pops up an alert, but when I click "okay" it doesn't delete the item..I don't know where the mistake is. Thanks for the help
This is the php code:
<div class="box">
<div class="box-body">
Input Request
<br><br>
<table id="tabelrequest" class="table table-bordered table-striped">
<thead>
<tr>
<th>No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
<th>Delete</th>
<th>Edit</th>
<th>Photo</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach($allrequest as $request)
{
$delete_url = base_url().'admin/deleterequest/'.$request->id_request;
$update_url = base_url().'admin/updaterequest/'.$request->id_request;
$add_url = base_url().'admin/datafotorequest/'.$request->id_request;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $request->item_code; ?></td>
<td><?php echo $request->description; ?></td>
<td><?php echo $request->qty; ?></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-olive btn-flat" class="delete" data-title="Are you sure you want to delete this item?" name="delete" href="<?php echo $delete_url; ?>"><i class="glyphicon glyphicon-trash"></i></a></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-teal btn-flat" name="update" href="<?php echo $update_url; ?>"><i class="glyphicon glyphicon-pencil"></i></a></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-red btn-flat" name="add" href="<?php echo $add_url; ?>"><i class="glyphicon glyphicon-camera"></i></a></td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</div>
</div>
And this is the jquery I took from jquery-confirms.js
<script>
$('#delete').confirm({
content: "",
});
$('#delete').confirm({
buttons: {
hey: function(){
location.href = this.$target.attr('href');
}
}
});
</script>

Instead of this
<td class="col-xs-1" style="text-align: center;">
<a class="btn bg-olive btn-flat" class="delete" data-title="Are you sure you want to delete this item?" name="delete" href="<?php echo $delete_url; ?>">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
I'll use (onclick="return confirm()")
<td class="col-xs-1" style="text-align: center;">
<a class="btn bg-olive btn-flat" class="delete" onclick="return confirm('Are you sure you want to delete this item?');" href="<?php echo $delete_url; ?>">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>

I think you have to use like this
<div class="box">
<div class="box-body">
Input Request
<br><br>
<table id="tabelrequest" class="table table-bordered table-striped">
<thead>
<tr>
<th>No.</th>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
<th>Delete</th>
<th>Edit</th>
<th>Photo</th>
</tr>
</thead>
<tbody>
<?php
$no = 1;
foreach($allrequest as $request)
{
$delete_url = base_url().'admin/deleterequest/'.$request->id_request;
$update_url = base_url().'admin/updaterequest/'.$request->id_request;
$add_url = base_url().'admin/datafotorequest/'.$request->id_request;
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $request->item_code; ?></td>
<td><?php echo $request->description; ?></td>
<td><?php echo $request->qty; ?></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-olive btn-flat delete" data-title="Are you sure you want to delete this item?" name="delete" href="<?php echo $delete_url; ?>"><i class="glyphicon glyphicon-trash"></i></a></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-teal btn-flat" name="update" href="<?php echo $update_url; ?>"><i class="glyphicon glyphicon-pencil"></i></a></td>
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-red btn-flat" name="add" href="<?php echo $add_url; ?>"><i class="glyphicon glyphicon-camera"></i></a></td>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</div>
</div>
<script>
$('.delete').confirm({
content: "",
});
$('.delete').confirm({
buttons: {
hey: function(){
location.href = this.$target.attr('href');
}
}
});
</script>

You need to create ajax request
HTML
<td class="col-xs-1" style="text-align: center;"><a class="btn bg-olive btn-flat" class="delete" data-title="Are you sure you want to delete this item?" name="delete" href="#" onclick="deleteRecord('<?php echo $request->id_request;?>');"><i class="glyphicon glyphicon-trash"></i></a></td>
AJAX
function deleteRecord(id)
{
jQuery.ajax({
type: "GET",
url: '/admin/deleterequest/'+id,
async: false,
success: function (data)
{
alert('success');
}
});
}

Bootstrap dataTable not working with database in Codeigniter

I am new in bootstrap and codeigniter, I don't know why dataTable not working with codeigniter.
I've tried to use it just in Bootstrap. It's working fine (pagination, data entry, sorting, and searching). But when I use it in Codeigniter with same code in my View file, it seems like datatable is not working. It does load the data, but the features (pagination, data entry, sorting, and searching) is not showing.
anybody can help me? thanks a bunches !
my old file using Bootstrap only
<table id="myTable" class="table table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>NPM</th>
<th>Kelas</th>
<th>MP</th>
<th>PK</th>
<th>Pesan</th>
</tr>
</thead>
<tbodys>
<?php $no=0 ; $sql=m ysqli_query($con, "SELECT * FROM form"); while($row=m ysqli_fetch_array($sql)){ $no++; ?>
<tr>
<td>
<?php echo $no ?>
</td>
<td>
<?php echo $row[ 'Nama'] ?>
</td>
<td>
<?php echo $row[ 'NPM'] ?>
</td>
<td>
<?php echo $row[ 'Kelas'] ?>
</td>
<td>
<?php echo $row[ 'MP'] ?>
</td>
<td>
<?php echo $row[ 'PK'] ?>
</td>
<td>
<?php echo $row[ 'Pesan'] ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
here is my View file in Codeigniter + Bootstrap
<script type="text/javascript">
jQuery(function($) {
var oTable1 =
$('#dynamic-table')
.dataTable({
bAutoWidth: false,
"aoColumns": [{
"bSortable": false
},
null, null, null, null, null, null, null, {
"bSortable": false
}
],
"aaSorting": [],
});
</script>
<table id="dynamic-table" method="post" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Tanggal Mulai</th>
<th>Tanggal Akhir</th>
<th>Alasan</th>
<th>File</th>
<th>Nopeg</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach ($hasil->result() as $row) { ?>
<tr>
<td>
<?php echo $row->no ?></td>
<td>
<?php echo $row->nama ?></td>
<td>
<?php echo $row->tglm ?></td>
<td>
<?php echo $row->tgla ?></td>
<td>
<?php echo $row->alasan ?></td>
<td>
<a class="thumbnail" href="<?php echo base_url().'uploads/'.$row->file ?>">
<img src="<?php echo base_url().'uploads/'.$row->file ?>" width="50" height="50">
</a>
</td>
<td>
<?php echo $row->nopeg; ?></td>
<td>
<button type="button" class="btn btn-pink btn-sm">Terima</button>
<button type="button" class="btn btn-info btn-sm">Tolak</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
the dataTable include in its template, before I display data from database, it working. But when I display data from database, it just a normal table

Put javascript code after end of table tag,
<table id="dynamic-table" method="post" class="table table-striped table- bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Tanggal Mulai</th>
<th>Tanggal Akhir</th>
<th>Alasan</th>
<th>File</th>
<th>Nopeg</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach ($hasil->result() as $row) { ?>
<tr>
<td>
<?php echo $row->no ?></td>
<td>
<?php echo $row->nama ?></td>
<td>
<?php echo $row->tglm ?></td>
<td>
<?php echo $row->tgla ?></td>
<td>
<?php echo $row->alasan ?></td>
<td>
<a class="thumbnail" href="<?php echo base_url().'uploads/'.$row->file ?>">
<img src="<?php echo base_url().'uploads/'.$row->file ?>" width="50" height="50">
</a>
</td>
<td>
<?php echo $row->nopeg; ?></td>
<td>
<button type="button" class="btn btn-pink btn-sm">Terima</button>
<button type="button" class="btn btn-info btn-sm">Tolak</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
jQuery(function($) {
var oTable1 =
$('#dynamic-table')
.dataTable({
bAutoWidth: false,
"aoColumns": [{
"bSortable": false
},
null, null, null, null, null, null, null, {
"bSortable": false
}
],
"aaSorting": [],
});
</script>
Try like this :)

Fatal error: Call to a member function fetch_assoc() on a non-object in /home/u161146050/public_html/application/views/test1.php on line 49

I have a problem about this thing...I have been doing this in XAMPP and nothing goes wrong..but whenever I upload it to the hosting it always display this.
Fatal error: Call to a member function fetch_assoc() on a non-object in /home/u161146050/public_html/application/views/test1.php on line 49.
I don't know why it appears in line 49, but during I was doing it in localhost it doesn't appear.
<table class="table table-condensed table-hover">
<tr>
<td class="warning" id="bold">Book Id</td>
<td class="danger" id="bold">Book Title</td>
<td class="warning" id="bold">Author</td>
<td class="danger" id="bold">Status</td>
<td class="warning" id="bold">Borrower</td>
<td class="danger" id="bold">options</td>
</tr>
<?php
include('inc/config.php');
$sql = "SELECT * FROM books";
$result = $link->query($sql);
while($row = $result->fetch_assoc()) {
?>
<tr>
<td class="warning"><?php echo $row['bookNumber']?></td>
<td class="danger"><?php echo $row['title']?></td>
<td class="warning"><?php echo $row['author']?></td>
<td class="danger"><?php echo $row['status']?></td>
<td class="warning"><?php echo $row['borrower']?></td>
<td class="danger"><form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"><div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-bookmark" aria-hidden="true"></span></button></a>
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span></button></a>
</div>
</div>
</form>
</td>
</tr>
<?php }
?>
Any help would be appreciated.

$result=mysqli_query($con,$sql);
while($row=mysqli_fetch_assoc($result);{

check-box check before delete

I have a check-box for each user and the value of the check-box is the user id
What is the best suitable JavaScript Which disables the delete a.button until have clicked the correct corresponding check-box
If button is disabled I would like to be able to use bootstraps disabled="disabled"
<div class="table-responsive" id="user">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td></td>
<td><b><a><?php echo $column_username;?></a></b></td>
<td><b><a><?php echo $column_status;?></a></b></td>
<td><b><a><?php echo $column_date_added;?></a></b></td>
<td class="text-right"><b><?php echo $column_action;?></b></td>
</tr>
</thead>
<tbody>
<?php if ($users) { ?>
<?php foreach ($users as $user) { ?>
<tr>
<td class="text-center">
<input type="checkbox" name="selected" value="<?php echo $user['user_id']; ?>" />
</td>
<td class="text-left"><?php echo $user['username']; ?></td>
<td class="text-left"><?php echo $user['status']; ?></td>
<td class="text-left"><?php echo $user['date_added']; ?></td>
<td class="text-right">
<i class="fa fa-pencil"></i> Edit User
<i class="fa fa-pencil"></i> Delete User
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>

First, all the delete buttons should be disabled when you first load the HTML. You can add the disabled='disabled' attribute to each delete button in your PHP code.
Then in JavaScript you look for a change event on the checkbox:
$("input[type='checkbox']").change(function() {
var thisRow = $(this).parents("tr");
if(this.checked) {
thisRow.find("a.btn-danger").attr("disabled", false);
} else {
thisRow.find("a.btn-danger").attr("disabled", "disabled");
}
});

Categories