Auto Refresh Table PHP JavaScript/jQuery - javascript

I want to refresh my table automatically when i add new row in database. I don't have any idea to create it.
<div class="row">
<div class="col-md-6">
<legend>Typy Darmowe</legend><hr>
<table class="table" id="types-free">
<thread>
<tr>
<th>ID</th>
<th>Mecz</th>
<th>Typ</th>
<th>Data Dodania</th>
<th>URL</th>
</tr>
</thread>
<tbody>
<?php foreach($types as $type) { ?>
<tr>
<td><?php echo $type->t_id; ?></td>
<td><?php echo $type->t_match; ?></td>
<td><?php echo $type->t_type; ?></td>
<td><?php echo $type->t_date; ?></td>
<td><?php echo $type->t_url; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>


You need to use AJAX calls. I see you don't have pagination. One easy way to do this is to create an AJAX call that return the count of items from table and then refresh the entire page. Get the count from back end every 1 second. Store the count in a hidden element for comparison. Refreshing the entire page will also update the count stored in hidden field
setTimeout(function(){
var request = $.ajax({
url: "countRows.php",
method: "GET"
});
request.done(function( data ) {
if($('#count').val() != data.count) {
location.reload();
}
});
}, 1000);
Getting the counter:
<?php
// countRows.php
// -- run sql 'SELECT count(id) FROM table_name
// get the count value
echo json_encode(['count' => $count]);
HTML:
<input type="hidden" id="count" value="<?php echo count($types);?>"/>
<div class="row">
<div class="col-md-6">
<legend>Typy Darmowe</legend><hr>
<table class="table" id="types-free">
<thread>
<tr>
<th>ID</th>
<th>Mecz</th>
<th>Typ</th>
<th>Data Dodania</th>
<th>URL</th>
</tr>
</thread>
<tbody>
<?php foreach($types as $type) { ?>
<tr>
<td><?php echo $type->t_id; ?></td>
<td><?php echo $type->t_match; ?></td>
<td><?php echo $type->t_type; ?></td>
<td><?php echo $type->t_date; ?></td>
<td><?php echo $type->t_url; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
If you want advanced and complex table manipulation made only on front end without refresing the entire page you can take a look at datatables

Related

datatables default column sorting

I have this table:
<table id="datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Agent</th>
<th>TWWID</th>
<th>Start Date</th>
<th>Issue</th>
<th>Comment</th>
<th>Overview</th>
<th>Action</th>
<th>TL</th>
<th>Qfinity ID</th>
<th>MSISDN</th>
</tr>
</thead>
<tbody>
<?php
//get records from database
$sql_list = "SELECT * FROM `coaching`";
$sql_list_result = $mysqli->query($sql_list);
if($sql_list_result->num_rows > 0){
while($row = $sql_list_result->fetch_assoc()){ ?>
<tr>
<td><?php echo $row['ID']; ?></td>
<td><?php echo $row['Agent']; ?></td>
<td><?php echo $row['TWWID']; ?></td>
<td><?php echo $row['Start_Date']; ?></td>
<td><?php echo $row['Issue']; ?></td>
<td><?php echo $row['Comment']; ?></td>
<td><?php echo $row['Overview']; ?></td>
<td><?php echo $row['Action']; ?></td>
<td><?php echo $row['TL']; ?></td>
<td><?php echo $row['Qfinity_ID_1']; ?></td>
<td><?php echo $row['MSISDN']; ?></td>
</tr>
<?php } }else{ ?>
<tr><td colspan="5">Nema brojeva u bazi.....</td></tr>
<?php } ?>
</tbody>
</table>
In this table i have sortable heders and first column is defoult sorted ASC, but i want the 3'rd column to be sorted by default DESC.
I include in my .php this js (//cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js)
then I add in .php this script
<script>
$(document).ready(function() {
$('#datatable').DataTable( {
"aaSorting": [[ 3, "desc" ]]
} );
} );
</script>
My table still have sort by 1'st column [ID]
how can i change default sorting?

I faced the same problem and I solved it with the following code. Please try if it can help:
<script>
$(document).ready(function() {
$('#datatable').DataTable( {
"order": [[ 3, "desc" ]]
});
});
</script>

how to insert accept/reject into db in PHP

i created an appointments table where user1 would add appointments and user2 would accept/reject the appointment. now my problem is when the accept and reject are clicked it is displayed in the table respectively but i just cant understand how to add the insert query into it so that it could be inserted into the db. i tried several methods in trying to insert the state[accept/reject] into the db but i found no success. i would request someone to pls provide me some help inn fixing the issue. Thanks.
<form method="post" action="delete.php" >
<table cellpadding="0" cellspacing="0" border="0" class="table table-condensed" id="example">
<thead>
<tr>
<th>appoinment ID</th>
<th>Date</th>
<th>time</th>
<th>teacher</th>
<th>parent</th>
<th> accept/reject </th>
<th>label</th>
</tr>
</thead>
<tbody>
<?php
$query=mysqli_query($conn, "select * from `app` left join `par` on par.par_id=app.par_id
left join `tea` on tea.tea_id=app.tea_id
ORDER BY app_id DESC");
if($query === false)
{
throw new Exception(mysql_error($conn));
}
while($row=mysqli_fetch_array($query))
{
$ann_id=$row['app_id'];
$date=$row['date'];
$msg=$row['time'];
$username = $row['username'];
$username = $row['p_username'];
?>
<tr>
<td><?php echo $row['app_id'] ?></td>
<td> <?php echo date('j/m/y',strtotime($row['date'])); ?></td>
<td><?php echo $row['time'] ?></td>
<td><?php echo $row['p_username'] ?></td>
<td><?php echo $row['username'] ?></td>
<td>
reject
accept
</td>
<td>
<div class="chgtext">PENDING</div>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</form>

One way is to pass the ID via query string (GET). So you would update the appointment if the appropriate query string key-pairs are given.
Personally, I believe you should not mix querying while outputting. Do the database stuff at the top first and leave the outputting at the bottom.
Note: I am not too familiar with mysqli_ but it would be something like this:
<?php
// accept or reject appointment with ID
if (isset($_GET['state'], $_GET['app_id'])) {
$stmt = mysqli_prepare($conn, "UPDATE app SET state = ? WHERE app_id = ?");
mysqli_stmt_bind_param($stmt, "sd", $_GET['state'], $_GET['app_id']);
mysqli_stmt_execute($stmt);
mysqli_stmt_close($stmt);
}
// query appointments
$query = mysqli_query($conn, "
SELECT * FROM app
LEFT JOIN par ON par.par_id = app.par_id
LEFT JOIN tea on tea.tea_id = app.tea_id
ORDER BY app_id DESC
");
?>
<form method="post" action="delete.php" >
<table cellpadding="0" cellspacing="0" border="0" class="table table-condensed" id="example">
<thead>
<tr>
<th>appoinment ID</th>
<th>Date</th>
<th>time</th>
<th>teacher</th>
<th>parent</th>
<th>accept/reject</th>
<th>label</th>
</tr>
</thead>
<tbody>
<?php while($row = mysqli_fetch_array($query)) : ?>
<tr>
<td><?= $row['app_id'] ?></td>
<td><?= date('j/m/y', strtotime($row['date'])) ?></td>
<td><?= $row['time'] ?></td>
<td><?= $row['p_username'] ?></td>
<td><?= $row['username'] ?></td>
<td>
<!-- upon clicking a link, it will redirect to the same page with a query string -->
reject
accept
</td>
<td>
<div class="chgtext">PENDING</div>
</td>
</tr>
<?php endwhile ?>
</tbody>
</table>
</form>

Bootstrap Modal & MySQL Query using PHP

I am trying to have mysql data displayed on a bootstrap modal and for some reason it is only pulling the ID of the first link that is clicked and not the ID for the row specified on the link clicked to display said modal. (hope that makes sense).
The link to be clicked:
<a data-toggle="modal" data-target="#leadModal" href="?id=<?php echo $id; ?>"><?php echo $f; echo ' '; echo $l; ?></a>
Here is the code that surrounds the link:
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Email Address</th>
<th>Primary Phone</th>
<th>Date Created</th>
<th>Arrival Date</th>
<th>Departure Date</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>E-Mail Address</th>
<th>Primary Phone</th>
<th>Date Created</th>
<th>Arrival Date</th>
<th>Departure Date</th>
</tr>
</tfoot>
<tbody>
<?php
$agent = $userRow['userName'];
$query = "SELECT * FROM leads WHERE status='Follow-Up' && agent='$agent'";
$result = mysql_query($query) or die(mysql_error());
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
$f = $line['first'];
$l = $line['last'];
$e = $line['email'];
$p1 = $line['PrimePhone1'];
$p2 = $line['PrimePhone2'];
$p3 = $line['PrimePhone3'];
$a = $line['arrival'];
$d = $line['departure'];
$ag = $line['agent'];
$id = $line['id'];
$dc = $line['datecreated'];
$es = $line['emailsent'];
?>
<tr>
<td><a data-toggle="modal" data-target="#leadModal" href="?id=<?php echo $id; ?>"><?php echo $f; echo ' '; echo $l; ?></a></td>
<td><?php echo $e; ?></td>
<td><?php echo $p1; echo '-'; echo $p2; echo'-'; echo $p3; ?></td>
<td><?php echo $dc; ?></td>
<td><?php echo $a; ?></td>
<td><?php echo $d; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
And here is what I have for code to display the data in the modal:
<!-- Lead Modal-->
<div class="modal fade" id="leadModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header"><?php
$id = $_GET["id"];
$query = "SELECT * FROM leads WHERE id=$id";
$result = mysql_query($query);
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) { ?>
<h5 class="modal-title" id="exampleModalLabel"><?php echo $line['first']; ?> <?php echo $line['last']; ?>'s Existing Lead</h5><?php } ?>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"><?php
$id = $_GET["id"];
$query = "SELECT * FROM leads WHERE id=$id";
$result = mysql_query($query) or die(mysql_error());
while ($line = mysql_fetch_array($result, MYSQL_ASSOC)) {
?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td>
<table width="750" border="2" align="center" cellpadding="1" cellspacing="0" class="table">
<tr>
<td>Original Agent:</td>
<td><?php echo $line['agent']; ?></td>
</tr>
<?php if ($line['upagent'] == ''){ } else { ?> <tr>
<td>Last Updated By:</td>
<td><?php echo $line['upagent']; ?></td>
</tr><?php } ?>
<tr>
<td width="186">First Name:</td>
<td width="552">
<?php echo $line['first']; ?></td>
</tr>
<?php if ($line['last'] == ''){ } else { ?> <tr>
<td>Last Name:</td>
<td><?php echo $line['last']; ?></td>
</tr><?php } ?>
<?php if ($line['email'] == ''){ } else { ?><tr>
<td>E-Mail Address:</td>
<td><?php echo $line['email']; ?></td>
</tr><?php } ?>
<tr>
<td>Primary Phone:</td>
<td><?php echo $line['PrimePhone1']; echo '-'; echo $line['PrimePhone2']; echo '-'; echo $line['PrimePhone3']; ?></td>
</tr>
<?php if ($line['AltPhone1'] == '' || $line['AltPhone2'] == '' || $line['AltPhone3'] == '') { } else { ?>
<tr>
<td>Alternate Phone:</td>
<td><?php echo $line['AltPhone1']; echo '-'; echo $line['AltPhone2']; echo '-'; echo $line['AltPhone3']; ?></td>
</tr>
<?php } ?>
<tr>
<td>Lead Created:</td>
<td><?php echo $line['datecreated']; ?></td>
</tr>
<?php if($line['emailsent'] == 1){ ?> <tr>
<td>Follow-Up Email Sent:</td>
<td><?php echo $line['followupsent']; ?></td>
</tr>
<?php } ?>
<tr>
<td>Arrival Date:</td>
<td><?php echo $line['arrival']; ?></td>
</tr>
<tr>
<td>Departure Date:</td>
<td><?php echo $line['departure']; ?></td>
</tr>
<?php if ($line['adults'] == ''){ } else { ?>
<tr>
<td>Adults:</td>
<td><?php echo $line['adults']; ?></td>
</tr><?php } ?>
<?php if ($line['child'] == ''){ } else { ?>
<tr>
<td>Children:</td>
<td><?php echo $line['child']; ?></td>
</tr>
<?php } ?>
<?php if ($line['area'] == ''){ } else { ?>
<tr>
<td>Requested Area:</td>
<td><?php echo $line['area']; ?></td>
</tr>
<?php } ?>
<?php if ($line['budget'] == ''){ } else { ?>
<tr>
<td>Budget:</td>
<td><?php echo $line['budget']; ?></td>
</tr>
<?php } ?>
<?php if ($line['suggested'] == ''){ } else { ?>
<tr>
<td>Suggested Properties:</td>
<td><?php echo $line['suggested']; ?></td>
</tr>
<?php } ?>
<?php if ($line['discount'] == ''){ } else { ?>
<tr>
<td>Discount Offered:</td>
<td><?php echo $line['discount']; ?></td>
</tr>
<?php } ?>
<?php if ($line['promo'] == ''){ } else { ?>
<tr>
<td>Promo Code:</td>
<td><?php echo $line['promo']; ?></td>
</tr>
<?php } ?>
<tr>
<td>Lead Status:</td>
<td><?php echo $line['status']; ?></td>
</tr>
<?php if ($line['notes'] == ''){ } else { ?>
<tr>
<td height="85">Additional Notes:</td>
<td><?php echo $line['notes']; ?></td>
</tr>
<?php } ?>
<?php if ($line['resnum'] == ''){ } else { ?>
<tr>
<td>Reservation Number:</td>
<td><?php echo $line['resnum']; ?></td>
</tr><?php } } ?>
</table>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
<a class="btn btn-primary" href="#">Button</a>
</div>
</div>
</div>
</div>
Any help is greatly appreciated.
Thanks,
Scott

What you're asking cannot be done in the current design. Your answer will be in looping your db results to create several modals (messy) or using AJAX to retrieve the modal data based on the link ID. A good example is in the answer here: Using Jquery Ajax to retrieve data from Mysql

What is different between inside table and outside table html tag when using javascript to calculate some value?

How to access Class in table element to calculate its value
NOTES: If I don't put input element into table->tbody->tr->td It will work with javascript below And If I put input element into table it will work for me (if I don't used table).
So What is wrong when I put input element into tbody inside of table tag?
Here is HML tag
<?php echo form_open(base_url('invoice/add'));?>
<table class="table table-condensed">
<thead>
<tr>
<td><strong>No</strong></td>
<td><strong>DESCRIPTION</strong></td>
<td><strong>Type</strong></td>
<td><strong>QUANTITY</strong></td>
<td><strong>UNIT PRICE</strong></td>
<td><strong>AMOUNT (USD)</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td width="30px">1</td>
<td width="auto"><?php echo form_textarea('descr',set_value('descr',''),'class="descriptoin my-form-control"')?></td>
<td><?php echo form_dropdown('type',$type,'',' class="type form-control" placeholder="type"')?></td>
<td><?php echo form_input('quant',set_value('quant',' '),'class="qty"')?></td>
<td><?php echo form_input('unit_p',set_value('unit_p',' '),'class="unit"')?></td>
<td><?php echo form_input('amount',set_value('amount',' '),'class="amount" readonly')?>$</td>
</tr>
<tr>
<td></td>
<td><?php echo form_textarea('descr',set_value('descr1',''),'class="descriptoin my-form-control"')?></td>
<td></td>
<td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
</tr>
<tr>
<td></td>
<td><?php echo form_textarea('descr',set_value('descr2',''),'class="descriptoin my-form-control"')?></td>
<td></td>
<td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
</tr>
<tr>
<td></td>
<td><?php echo form_textarea('descr',set_value('descr3',''),'class="descriptoin my-form-control"')?></td>
<td></td>
<td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
</tr>
<tr>
<td></td>
<td><?php echo form_textarea('descr',set_value('descr4',''),'class="descriptoin my-form-control"')?></td>
<td></td>
<td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
</tr>
<tr>
<td></td>
<td><?php echo form_textarea('descr',set_value('descr5',''),'class="descriptoin my-form-control"')?></td>
<td></td>
<td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td>
<td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Total</td>
<td><?php echo form_input('total',set_value('total',''),'class="result" readonly ')?>$</td>
</tr></tbody>
</table>
<?php echo form_close();?>
And Here is My Javascript to calculate all quant and unit and amount of unit*quant and I used variable to sum all amount as Result = amount+amount(n)
But it doesn't work when I used input element into tbody inside of table like above.
<script type="text/javascript">
$(function () {
$('.unit,.qty').on('change', function () {
var unit = $(this).hasClass('unit') ? $(this).val() : $(this).siblings('.unit').val();
var qty = $(this).hasClass('qty') ? $(this).val() : $(this).siblings('.qty').val();
unit = unit || 0;
qty = qty || 0;
var val = unit >= 1 && qty >= 1 ? parseFloat(unit * qty) : 0;
$(this).siblings('.amount').val(val);
var total = 0;
var update = false;
$('.amount').each(function () {
val = parseFloat($(this).val()) | 0;
total = val ? (parseFloat(total + val)) : total;
});
$('.result').val(total);
});
});
</script>
Here is my images result
Sorry It might too bad because much for html code But I have to do with this code
Please help.

Please check your code, where you are using siblings...
$(this).siblings('.amount').val(val); // there is no any sibling
$(this).parent().siblings('.amount').val(val) // try this.

How i can get value of specific cell if row is checked?

I have an HTML table. I need to get specific cell value if column is checked! For each row I have a checkBox.
<table id="tabellaOrdinaFarmaci" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Codice Farmaco</th>
<th>Nome Farmaco</th>
<th>Quantità </th>
<th>Quantità di alert</th>
<th>Stato</th>
<th>Quantità da ordinare</th>
<th></th>
</tr>
</thead>
</thead>
<tbody>
<?php
foreach ($query as $row):
$quantitaDaOrdinare = $row->alert - $row->quantita;
if ($quantitaDaOrdinare > 0) {
?>
<tr id="<?php echo $row->aic; ?>" >
<td ><?php echo $row->aic; ?></td>
<td name="nomeFarmac"o><?php echo $row->denominazione ?></td>
<td><?php echo $row->quantita; ?></td>
<td><?php echo $row->alert; ?></td>
<td><?php echo $row->stato; ?></td>
<td>
<input type="text" class="form-control auto" name="codiceFarmaco" value="<?php echo $quantitaDaOrdinare ?>"/>
</td>
<td> <label>
<input type="checkbox" name="checkBox" value="<?php echo$row->aic; ?> ">
</label></td>
</tr>
<?php
} else {
}
endforeach;
?>
</tbody>
I need (using javascript or jquery) to get, if a button is clicked, every value of cell that have name="nomeFarmaco" for every row that is checked! I try to call this function whe
function getValue(){
var nome = $('input[name="checkBox"]:checked').map(function() {
return $(this).parent().parent().parent().find('name="nomeFarmaco').val();
}).get();
return nome;}
but nome is an empty array! any ideas? thanks in advance!

You can put a custom attribute for the check box and set the value in this attribute.
Like this :
<input type="checkbox" name="checkBox" value="<?php echo$row->aic; ?> " customattr="<?php echo $row->denominazione ?>">
And you javascript function will be :
function getValue(){
var nome = $('input[name="checkBox"]:checked').attr('customattr');
return nome;
}

I think this is typo?
<td name="nomeFarmac"o><?php echo $row->denominazione ?></td>
Change it to:
<td name="nomeFarmaco"><?php echo $row->denominazione ?></td>
And you are targetting a <td> and .val() won't work. Should be .text()
var name = [];
$('input[name="checkBox"]').click(function(){
if($(this).is(':checked')) {
name.push($(this).parent().parent().siblings('td[name="nomeFarmaco"]').text());
} else {
var index = name.indexOf(name);
name.splice(index, 1);
}
console.log(name);
});

Categories