This might be a simple question but have kept me busy for the best part of a hour.
I have the following script which generates all active reservations, in the table reservations
require("../includes/connect.php");
function dispAllReservations(){
$i= 1;
global $db;
$date = date('Y-m-d');
$sql ="SELECT * FROM
reservations WHERE pickup_date > '$date'";
$statement = $db->prepare($sql);
$statement->execute();
$bookings = $statement->fetchAll();
$statement->closeCursor();
echo'<table cellpadding="0" cellspacing="0" class=
"table-responsive gzblog-table" id="gzhotel-booking-booking-id">
<thead>
<tr>
<th class="date-th">Reservation ID</th>
<th class="title-th">Car Group</th>
<th>Pickup Date</th>
<th>Return Date</th>
<th>Customer</th>
<th>Email</th>
<th>Amount</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>';
foreach($bookings as $booking){
if($i%2 == 0){
$class = 'odd';
}
else{
$class = 'even';
}
echo' <tr class='.$class.'>';
echo'<td>'.$booking['res_id'].'</td>';
echo'<td>'.$booking['car_group'].'</td>';
echo'<td>'.$booking['pickup_date'].'</td>';
echo'<td>'.$booking['return_date'].'</td>';
echo'<td>'.$booking['renter_name'].'</td>';
echo'<td>'.$booking['email'].'</td>';
echo'<td>AMOUNT HERE</td>';
echo'<td><a class="btn btn-primary btn-sm fancybox" href="#email">
<span class="glyphicon glyphicon-envelope"></span></a>
</td>';
echo'<td><a class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-pencil"></span></a>
</td>';
echo'<td><a class="btn btn-danger btn-sm icon-delete">
<span class="glyphicon glyphicon-trash"></span></a>
</td>';
echo'</tr>';
}//foreach
echo'</tbody>';
echo'</table>';
}//function
The output of the script generates the following
My Problem / Question
When delete button is clicked -- I need to ensure the correct reservation is deleted, same with the edit button, if edit button is clicked I need to ensure the correct user is edited.
What I need to do
I'm guessing I would need to find a way to append the corresponding value for each user in the loop to the element.
I was thinking of a textbox setting display none and then echoing the value inside the value attribute, but that didn't work...
I'm really stuck here any advise would be appreciated
NOTE: All emails are fictional
Try this:
<a class="btn btn-primary btn-sm fancybox" href="#email" onclick="onDelete(your-id)">
<span class="glyphicon glyphicon-trash"></span>
</a>
<a class="btn btn-primary btn-sm fancybox" href="#email" onclick="onEdit(your-id)">
<span class="glyphicon glyphicon-pencil"></span>
</a>
Create this function:
<script>
//Delete function
function onDelete(id){
$.ajax({
// do someting
});
}
// Edit function
function onEdit(id){
$.ajax({
// do someting
});
}
</script>
You did not tell us at all how do you want to edit/delete you reservations, but based on the tags you used you can take this approach...
1) In your PHP script generate data attributes on rows or cells, like this:
<tr data-id="put_reservation_id_here">
2) And then use jQuery to hook actions to various elements in the table:
$('#gzhotel-booking-booking-id').on('click', '.icon-delete', function() {
var reservationId = $(this).closest('tr').data('id');
// now you have reservation ID and do whichever AJAX call with it
});
You can use data attributes in your html and then get the data attribute value using javascript.
Example:
In your button:
<a class="btn btn-danger btn-sm icon-delete" data-id="your_Id"><span class="glyphicon glyphicon-trash"></span></a>
Replace your_Id with the correct id.
Then using javascript on your onClick event:
$(this).data('id');
This will retrieve the id that you need to handle the action.
Hope this helps.
Related
I'm experiencing a problem when loading the data from my database, the data is somewhat large enough to cause a delay.
I tried to add this in my code, but still not enough.
.fixed-table {
table-layout: fixed;
}
I stumbled upon this guide. https://patdavid.net/2019/02/displaying-a-big-html-table/. So i tried to implement it, unfortunately my loading time is still the same.
With this line, how will I approach this
I set the table to display: none; initially and once the document was ready I set it back to display: table; (relying on JavaScript to do this).
This is my table script
/* FOR CORPORATE DATA TABLE START */
function format ( dataSource ) {
var html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;" class="fixed-table table table-bordered">';
for (var key in dataSource){
html += '<tr>'+
'<td>' + key +'</td>'+
'<td>' + dataSource[key] +'</td>'+
'</tr>';
} return html += '</table>'; }
var earnings_amendment_table = $('#earnings_amendment').DataTable({});
// Add event listener for opening and closing details
$('#earnings_amendment').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = earnings_amendment_table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(format({
'Particulars : ' : tr.data('key-1'),
'Account Type : ' : tr.data('key-2'),
'Date Due : ' : tr.data('key-3')
})).show();
tr.addClass('shown');
} });
/* FOR CORPORATE DATA TABLE END */
This is the table
<div class="box-body">
<table id="earnings_amendment" class="fixed-table table table-bordered">
<thead>
<th></th>
<th>Reference ID.</th>
<th>Reference No.</th>
<th>Employee Name</th>
<th>Account Title</th>
<th>Amount</th>
<th>Activity</th>
<th>Posted By</th>
<th>Validated By</th>
<th>Noted By</th>
<th>Tools</th>
</thead>
<tbody>
<?php
$sql = "
select earningsamendment.particulars,earningsamendment.accounttype,earningsamendment.datedue,
employeemasterfile.lastname,employeemasterfile.firstname,employeemasterfile.middlename,
referenceno, accounttitle, max(credit) as credit, max(debit) as debit, max(referenceid) as referenceid, earningsamendment.employeeidno,
earningsamendment.postedby, approvedby, notedby
from earningsamendment
left join employeemasterfile on earningsamendment.employeeidno= employeemasterfile.employeeidno
WHERE earningsamendment.accounttitle='$accounttitle' AND
YEAR(earningsamendment.dateposted)='$year'
group by referenceno, earningsamendment.employeeidno, accounttitle, earningsamendment.postedby, approvedby,
notedby,employeemasterfile.lastname,employeemasterfile.firstname,employeemasterfile.middlename,
earningsamendment.particulars,earningsamendment.accounttype,earningsamendment.datedue
";
$query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
echo "
<tr data-key-1='".$row['particulars']."' data-key-2='".$row['accounttype']."' data-key-3='".$row['datedue']."'>
<td class='details-control'></td>
<td>".$row['referenceid']."</td>
<td>".$row['referenceno']."</td>
<td>".$row['lastname']." ".$row['middlename']." ".$row['firstname']."</td>
<td>".$row['accounttitle']."</td>
<td>".$row['credit']."</td>
<td>".(($row['debit']==$row['credit']) ? 'PAID' : 'FOR TAKE UP' )."</td>
<td>".$row['postedby']."</td>
<td>".$row['approvedby']."</td>
<td>".$row['notedby']."</td>
<td>
<button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['referenceid']."'><i class='fa fa-edit'></i> Preview</button>
<button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['referenceid']."'><i class='fa fa-trash'></i> Delete</button>
" ?>
<?php if (empty($row['approvedby'])) { echo " <button class='btn btn-warning btn-sm approve btn-flat' data-id='".$row['referenceid']."'><i class='fa fa-check-square-o'></i> Approve</button> "; } ?>
<?php if (empty($row['notedby'])) { echo " <button class='btn btn-primary btn-sm note btn-flat' data-id='".$row['referenceid']."'><i class='fa fa-arrow-circle-right'></i> Note</button> "; } ?>
<?php "</td>
</tr>
";
}
?>
</tbody>
</table>
</div>
The total data being loaded is around 300,000-500,000. It's taking so long for it to load. up to 60-70 seconds. Is there a way for us to reduce this time? Is the structure of my table/query wrong, is there any possible solution to reduce this delay?
I tried to use clusterize.js, but I can't seem to be able to implement it.
ADDENDUM: Is there a way for this to be implemented into SQL SERVER 2012?https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/server_processing.php
I'm planning to do this via Server-Side, but I'm worried that I may change all the tables that I did.
It would be best to use pagination and filtering to make the table usable.
use data tables jQuery plug-in, it can handle displaying large data in the table representation with less time
Reference :: https://datatables.net/
I personally used it.
When I am trying to display large chunk of data from mysql using normal table references, it used to take lot of time to load
Using datatables jQuery plug-in solved the issue
I have a table, its is data displayed using foreach. one column have 3 icons, by default they are hidden. And also have checkbox. icons and checkbox are in every row. Now when select any checkbox, icons of all rows are appearing. Instead I want only one row icons should be displayed on selecting checkbox. Can somebody help please. thanks in advance. here is the code.
in view
<?php $sn= $this->uri->segment(4); foreach($companies as $company){ $sn++;?>
<tr class="parent" style="font-size:11px;color:#3D4061;border-bottom:1px solid #3d406136">
<td><input type="checkbox" class="text-center check_data mt-2" onchange="changevalue()"></td>
<td class="text-center" style=""><h6><?php echo $sn; ?></h6></td>
<td class="text-center" style=""><h6><?php echo $company->company_name; ?></h6></td>
<td class="text-center" style=""><h6><?php echo $company->contact_no; ?></h6></td>
<?php if($company->activation_status == 1){?>
<td class="text-center" style=""><h6 class="text-success font-weight-bold" style="font-size:13px">Active</h6></td>
<?php } ?>
<?php if($company->activation_status == 0){?>
<td class="text-center" style=""><h6 class="text-danger font-weight-bold" style="font-size:13px">Inactive</h6></td>
<?php } ?>
<td class="text-center" style="">
<div class="status">
<i class="fa fa-edit"></i>
<?php if($company->activation_status == 0){?>
<i class="fa fa-dot-circle-o"></i>
<?php }else{ ?>
<i class="fa fa-exclamation-triangle"></i>
<?php } ?>
<i class="fa fa-trash-alt"></i>
</div>
</td>
<td ><i class="fa fa-chevron-down down" ></i></td>
</tr>
and script is
<script>
$('.status').hide();
function changevalue(){
if($(".check_data").is(":checked"))
$('.status').show();
else
$(".status").hide();
$('.cchild').hide();
}
</script>
you can also use .parent() and .find() methods to get specific row like that:
<input type="checkbox" function="changevalue(this)">
and your javacript must be like that:
function changevalue(elem){
if($(elem).is(":checked"))
$(elem).parent().parent().find('.status').show();
else
$(elem).parent().parent().find('.status').hide();
}
This code can be simplified but it's a good starting example to understand parent-child usage of html elements. At this example first .parent() goes to <td> of checkbox element and second .parent() goes to <tr> element then it searches for .status class in it then hides it.
and you can simplfy it like that:
function changevalue(elem){
if($(elem).is(":checked"))
$(elem).parents("tr").find('.status').show();
else
$(elem).parents("tr").find('.status').hide();
}
function changevalue() {
var $this = $(this),
$status = $this.parents("tr").find(".status");
if ($this.is(":checked")) {
$status.show();
} else {
$status.hide();
}
}
You can give dynamic Ids to every checkbox and status div. Use your record's id may be companyId to create Ids like
<input type="checkbox" id="checkbox_('<?php echo $company->id; ?>')>
I don't know the syntax for php.
and then you can pass the current companyId in onchange="changevalue(companyId)"
and then your code will be like this
function changevalue(companyId){
if($("#checkbox" + companyId).is(":checked"))
$('#status' + companyId).show();
else
$("#status" + companyId).hide();
}
I am currently developing an ecommerce system and I am already in the part of ordering module. I am using the shopping cart of Codeigniter and it is my first to do it.
Done in a part of add to cart but having problem in remove single item in cart session. When I clicked the Remove, everything in my cart will be remove.
Question: How can I remove a single item in my cart?
View
<?php foreach ($this->cart->contents() as $items): ?>
<tr>
<td><?= $items['name']?></td>
<td><?= $items['qty']?></td>
<td style="text-align:center"><span>₱<?= $this->cart->format_number($items['price'])?></span></td>
<td style="text-align:center"><span>₱<?= $items['subtotal']?></span></td>
<td><button class="btn btn-primary btn-sm"><i class="fa fa-times" aria-hidden="true"><?= $this->cart->remove($items['rowid'])?>REMOVE</i></button></td>
</tr>
<?php endforeach; ?>
Controller
public function remove_cart($rowid)
{
$removed_cart = array(
'rowid' => $rowid,
'qty' => 0
);
$this->cart->update($removed_cart);
}
}
An easy way to remove a row by clicking a button is using JQuery
This is my solution :
HTML , PHP :
<table>
<tr>
<td><!--your PHP code--></td>
<td><!--your PHP code--></td>
<td><span>₱<!--your PHP code--></span></td>
<td><button class="remove">REMOVE</button></td>
</tr>
<tr>
<td><!--your PHP code--></td>
<td><!--your PHP code--></td>
<td><span>₱<!--your PHP code--></span></td>
<td><button class="remove">REMOVE</button></td>
</tr>
</table>
JQuery:
$(document).ready(function(){
$('.remove').click(function(){
$(this).closest('tr').remove();
})
});
that is the link to the example :
http://tpcg.io/J0Uv2H
This code removes the cart items
<td><button class="btn btn-primary btn-sm"><i class="fa fa-times" aria-hidden="true"><?= $this->cart->remove($items['rowid'])?>REMOVE</i></button></td>
this part
<?= $this->cart->remove($items['rowid'])?>
Here it gets removed
remove the code and you can try like this.
<td>
<a href="<?= base_url().'user/remove_cart/'.$items['rowid']; ?>">
<button class="btn btn-primary btn-sm"><i class="fa fa-times" aria-hidden="true">REMOVE</i></button>
</a>
You should not use Shopping cart class from Codeigniter. It has been deprecated.
You should implement your own. We are using Codeigniter for our custom ecommerce app, and i can tell you that using makes much more sense. I have never seen any point in using Codeigniter shoping cart class.
It is nothing more than wrapper around Session.
Try like this one:
function remove($id) {
if ($id === "all"){
$this->cart->destroy();
}
else{
// Destroy selected rowid in session.
$data = array(
'rowid' => $this->input->post('id'),
'qty' => 0
);
$this->cart->update($data);
}
$this->load->view('users/cart_function');
}
check $rowid has a value.
I have a javascript function to call this result in a div innerhtml. How to alert 'Alert Function' when button on click?
$html.='<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th width="5%">#</th>
<th>Title</th>
<th>Action</th>
</tr>
</thead>
<tbody>';
$c=1;
foreach($titles AS $item){
$html.='<tr>
<td>'.$c.'</td>
<td>'.urldecode($item->title_content).'</td>
<td><button type="button" class="btn btn-danger" onclick="alert(\'**Alert Function**\')">Delete</button></td>
</tr>';
$c++;
}
$html.='</tbody>
</table>';
echo $html;
Thanks
Since this is PHP, you can directly insert onClick() event like this:
<td><button type="button" id="deleteButton" class="btn btn-danger" onclick="alertFunction()">Delete</button></td>
And then in JavaScript file:
function alertFunction()
{
alert('My custom text');
}
Let me know if that solves your problem and if I understood your question correctly.
If this onClick() is written in JavaScript itself, then remove that part and add additional line in JavaScript script:
document.getElementById("deleteButton").addEventListener("click", alertFunction);
Create a separate function to handle onclick event. This will be helpful in future if you want to pass any argument
<td><button type="button" class="btn btn-danger" onclick="clickButton()">Delete</button></td>
Somewhere in your code inside script tag create a function call clickButton()
function clickButton(){
alert('Alert Function')
}
I have a table where user can add data in it and I also have input field and save link. In my save link, if I click it.. I assign value to input field before it will go to other page. But when it go to the other page and I echo the value of inputfield, I got empty as in null value.
here's my code:
for table:
<table class="table " id="memberTB">
<thead>
<tr>
<th >First Name</th>
<th >Middle Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr id="first">
<td><span class="edit"></span></td>
<td><span class="edit"></span></td>
<td><span class="edit"></span></td>
</tr>
</tbody>
<button type="button" class="btn btn-link" id="addrow">
<span class="fa fa-plus"> Add new row</span>
</button>
</table>
<input type="text" name="list" id="list"/>
<br>
<a class="btn" id="savebtn">Save</button>
Reset
and for js:
$('#savebtn').click(function() {
var cells = 3; //number of collumns
var arraylist = []
var x=0;
$('tbody tr',$('#memberTB')).each(function(){
var cell_text = '';
for(var i = 0 ; i < cells ; i++){
if(i==2){
cell_text =cell_text+$(this).find('td').eq(i).text()+":";
}else{
cell_text =cell_text+$(this).find('td').eq(i).text()+",";
}
}
arraylist.push(cell_text);
});
document.getElementById("list").value =arraylist;
document.getElementById("savebtn").href="<?php echo site_url('test/save');?>";
}
I got nothing when I echo it in the test.php in the save(), like this:
echo $this->input->post('list');
You are simply redirecting the page. So you will not get any value from post. If you want to get the value by post method you need to submit the value with a form.
<form id='save_form' method="post" action="<?php echo site_url('test/save');?>">
//add your html codes
//<table ..... and others
<a class="btn" href="#" id="savebtn">Save</button> //add # to href for save button
</form>
Now your js
$('#savebtn').click(function() {
//js codes that you wrote
//just replace the following line
//document.getElementById("savebtn").href="<?php echo site_url('test/save');?>";
$('#save_form').submit();
}