I'm have a page where I can view the purchase history of sales
When I click on view full details this is what I get
The problem is when I click print full details this is what I get, I only want to print the window that pops up when I click on view full details
How do I print only the View Full Details window part?
Here's my code:
<!-- History -->
<div class="modal fade" id="detail<?php echo $hrow['salesid']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title" id="myModalLabel">Purchase Full Details</h4></center>
</div>
<div class="modal-body">
<?php
$sales=mysqli_query($conn,"select * from sales where salesid='".$hrow['salesid']."'");
$srow=mysqli_fetch_array($sales);
?>
<div class="container-fluid">
<div class="row">x
<div class="col-lg-12">
<p class="pull-right">Date: <?php echo date("F d, Y", strtotime($srow['sales_date'])); ?></p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<label>
<button onclick="printsales()">Print Full details</button>
<script>
function printsales() {
window.print();
}
</script>
</label>
<table width="100%" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Product Name</th>
<th>Price</th>
<th>Purchase Qty</th>
<th>SubTotal</th>
</tr>
</thead>
<tbody>
<?php
$total=0;
$pd=mysqli_query($conn,"select * from sales_detail left join product on product.productid=sales_detail.productid where salesid='".$hrow['salesid']."'");
while($pdrow=mysqli_fetch_array($pd)){
?>
<tr>
<td><?php echo ucwords($pdrow['product_name']); ?></td>
<td align="right"><?php echo number_format($pdrow['product_price'],2); ?></td>
<td><?php echo $pdrow['sales_qty']; ?></td>
<td align="right">
<?php
$subtotal=$pdrow['product_price']*$pdrow['sales_qty'];
echo number_format($subtotal,2);
$total+=$subtotal;
?>
</td>
</tr>
<?php
}
?>
<tr>
<td align="right" colspan="3"><strong>Total</strong></td>
<td align="right"><strong><?php echo number_format($total,2); ?></strong></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
</div>
</div>
</div>
</div>
You just need to insert simple javascript code to print whole page. And by clicking on Click here to Print you can get print window.
<script type="text/javascript">
function PrintElem(elem,title)
{
Popup($(elem).html(),title);
}
function Popup(data,title)
{
var mywindow = window.open('', '_blank','width=1000,height=700');
mywindow.document.write('<html><head><title>'+title+'</title></head>');
mywindow.document.write('<body onload="window.print()">');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
return true;
}
</script>
Click here to Print
Add an ID to elements you want to hide, for example:
<div id="dontprint"> This will be hidden on print mode </div>
<div> This will be shown on print mode </div>
Then, using CSS hide those elements you don't want to print. Adding a code like this at the end of your code.
<style>
#media print {
div#dontprint{
display: none;
}
}
</style>
Related
I am trying to populate a list of players into a table within a bootstrap modal. Currently I have button that sends the event_id to the controller; the controller then sends a query to the model and I pass the data to a view. However I would like the modal to load within the original view. I am guessing I need some ajax to get this to work however I am having some trouble getting it to work. Hoping someone can point me in the right direction or have another route for me to go.
Here is the code I currently am using.
Controller:
function event_users($event_id)
{
$this->load->model('email_model');
$data['darkteam'] = $this->event_model->dark_team_list($event_id);
$data['lightteam'] = $this->event_model->light_team_list($event_id);
$data['darkgoalie'] = $this->event_model->dark_goalie_list($event_id);
$data['lightgoalie'] = $this->event_model->light_goalie_list($event_id);
$data['event_data'] = $this->email_model->get_location_date($event_id);
$this->load->view('templates/header');
$this->load->view('event/player_list', $data);
}
View:
<td><a href="<?php echo base_url(); ?>event/event_users/<?php echo $e->id; ?>Player List</td>
Modal View (player_list.php):
<script type="text/javascript">
$(window).load(function(){
$('#user_event_modal').modal('show');
});
</script>
<?php foreach ($event_data as $ed): ?>
<?php $location = $ed->location; ?>
<?php $date = $ed->date; ?>
<?php endforeach; ?>
<!--User Event List-->
<div class="modal fade" id="user_event_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="location.href='<?php echo base_url();?>event'"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading"><strong><?php echo $location . " - " . date("l, F jS # g:ia",strtotime($date)); ?></h4></strong>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<table class="table table-striped table-condensed table-bordered table-list events-list-table">
<thead>
<tr>
<strong>Dark Team</strong>
</tr>
</thead>
<tbody>
<?php if (!empty($darkteam)): ?>
<?php foreach ($darkteam as $row): ?>
<tr>
<td><div style="float: left; text-align: left;"><?php echo ($row->first_name) . " " . ($row->last_name); ?></div><div style="float: right; text-align: right;">
<?php if ($this->ion_auth->is_admin()) : ?>
<button onclick="location.href='<?php echo base_url();?>event/switch_team/<?php echo ($row->user_id . "/" . $row->event_id); ?>' " class="btn btn-primary right-block btn-xs" data-dismiss="modal"><i class="fa fa-arrow-right"></i></button>
<?php elseif ($row->user_id == $this->session->userdata('user_id')) :?>
<button onclick="location.href='<?php echo base_url();?>event/switch_team/<?php echo ($row->user_id . "/" . $row->event_id); ?>' " class="btn btn-primary right-block btn-xs" data-dismiss="modal"><i class="fa fa-arrow-right"></i></button>
<?php else: ?>
<?php endif; ?>
</div></td>
</tr>
<?php endforeach; ?>
<?php else: ?>
<tr>
<td class="bg-info" colspan="6">No users currently registered.</td>
</tr>
<?php endif; ?>
Yes, use ajax to empty and then append content to the modal:
<!--replace <a></a> tag with element so jquery can target-->
<td id="update_event">Player List</td>
<!--add an id to the table so ajax can update on success-->
<table id="updateable"class="table table-striped table-condensed table-bordered table-list events-list-table">
Now for the ajax:
//we can use a click event listener
$('#update_event").on("click", "td", function(){
var id = '<?php echo $e->id;?>';
$.ajax({
url: '/event/event_users/'+ id +'',
success: function(results){
$(#updateable).empty(); //first empty table
}) $(#updateable).html(//append data to table)
})
I have my data displayed in table, and the way to edit and delete the data is in bootstrap modal. I'll just showing my delete modal. I used CodeIgniter 2.2.6:
My table:
<table class="table table-striped table-bordered table-hover">
<thead class="text-center">
<th class="text-center">No.</th>
<th class="text-center">Major Code</th>
<th class="text-center">Major Name</th>
<th class="text-center">Option</th>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($select_major as $row): ?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $row->cd_major; ?></td>
<td><?php echo $row->name_major; ?></td>
<td align=center>
<!-- DELETE BUTTON -->
<a
class="btn btn-danger btn-xs"
role="button"
data-toggle="modal"
data-target="#modal-delete"
href="<?php
$cd_major = $row->cd_major;
$name_major = $row->name_major;
?>">
<i class="fa fa-fw fa-trash"></i> Delete
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
My Modal:
<!-- MODAL DELETE DATA -->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="<?php echo base_url('major'); ?>">
<input type="hidden" name="id_major" value="<?php echo (isset($id_major) ? $id_major : ''); ?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- MODAL TITLE -->
<h4 class="modal-title"><i class="fa fa-fw fa-trash"></i> Delete Data</h4>
</div>
<!-- FORM -->
<div class="modal-body">
<p>Are you sure to delete this major? <b><?php echo $name_major; ?></b> ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-danger" name="delete" value="Yes, delete" />
</div>
</form>
</div><!--/ .modal-content -->
</div><!--/ .modal-dialog -->
</div><!--/ .modal -->
But when I try to delete the selected data, it always ordering to delete the last data. What should I do to fix it?
In your case you would add code something like below:
Your new table:
<table class="table table-striped table-bordered table-hover">
<thead class="text-center">
<th class="text-center">No.</th>
<th class="text-center">Major Code</th>
<th class="text-center">Major Name</th>
<th class="text-center">Option</th>
</thead>
<tbody>
<?php $no = 1; ?>
<?php foreach ($select_major as $row): ?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $row->cd_major; ?></td>
<td><?php echo $row->name_major; ?></td>
<td align=center>
<!-- DELETE BUTTON -->
<a
class="btn btn-danger btn-xs"
role="button"
data-toggle="modal"
data-target="#modal-delete"
href="<?php
$cd_major = $row->cd_major;
$name_major = $row->name_major;
?>" onclick=deleteRecord(<?php $row->cd_major?>)>
<i class="fa fa-fw fa-trash"></i> Delete
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<script>
function deleteRecord(id){
document.getElementById("id_major").value = id;
}
</script>
Your new modal:
<!-- MODAL DELETE DATA -->
<div class="modal fade" id="modal-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<form class="form-horizontal" method="POST" action="<?php echo base_url('major'); ?>">
<input type="hidden" name="id_major" id="id_major" value="<?php echo (isset($id_major) ? $id_major : ''); ?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!-- MODAL TITLE -->
<h4 class="modal-title"><i class="fa fa-fw fa-trash"></i> Delete Data</h4>
</div>
<!-- FORM -->
<div class="modal-body">
<p>Are you sure to delete this major? <b><?php echo $name_major; ?></b> ini?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-danger" name="delete" value="Yes, delete" />
</div>
</form>
</div><!--/ .modal-content -->
</div><!--/ .modal-dialog -->
</div><!--/ .modal -->
Please use the code which i have given you, it should work now.
I assume cd_major is the id of the row which you want to delete, if not, you can replace the field name in the function which we have added to <a> tag in onclick event.
Thanks
<table class="table table-bordered">
<tr>
<th>Model Code</th>
<th>Size</th>
<th>Type</th>
<th>Price</th>
<th>Specs</th>
</tr>
<?php
while($row = $result->fetch_assoc()){
$f1=$row['model_code'];
$f2=$row['size'];
$f3=$row['type'];
$f4=$row['price'];
$f5=$row['specs'];
?>
<tr>
<td><?php echo $f1 ?></td>
<td><?php echo $f2 ?></td>
<td><?php echo $f3 ?></td>
<td><?php echo $f4 ?></td>
<td>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">SPECS</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title text-center" id="myModalLabel"><?php echo $f1 ?></h4>
</div>
<div class="modal-body">
<div class="froala-view">
<?php echo $f5 ?>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php
} //while ends here
?>
</table>
I am trying to fetch data from my database.other section is ok. But which is inside the modal of bootstrap is not able to fetch new data. It only fetching the first data of the table.
What should i do?
I need a help here.
I have an application - it queries some data from MySQL and present it in table (index.php file). Every row is a single customer record.
What I want to do is, when I click on the row, it opens customer record (customer.php file).
I tried the following code - when I click on the row, modal with remote page(customer.php only flashes, and then customer.php is loaded normally. I dont know why... does any body have an idea?
<table class="table table-hover container table-responsive">
<caption>Vyhledaní zákazníci</caption>
<thead>
<tr>
<th>Jméno</th>
<th>Příjmení</th>
<th>Email</th>
<th>Telefon</th>
<th>Adresa</th>
<th>Město</th>
<th>Akce</th>
</tr>
</thead>
<tbody>
<?php
while ($results = mysql_fetch_array($customers)) { ?>
<tr class="clickableRow active" href="customer.php?customerId=<?php echo $results['id'], '&search=', Input::get('search'); ?>" data-toggle="modal" data-target="#customerModal">
<td><?php echo $results['first_name']; ?> </td>
<td><?php echo $results['last_name']; ?> </td>
<td><?php echo $results['email']; ?> </td>
<td><?php echo $results['telephone']; ?> </td>
<td><?php echo $results['street']; ?> </td>
<td><?php echo $results['city']; ?> </td>
<td>Seznam zakázek
Nová zakázka
</tr>
<?php
} ?>
</tbody>
</table>
And modal:
<!-- Modal -->
<div class="modal fade" id="customerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Karta zákazníka</h4>
</div>
<div class="modal-body"><div class="te"></div></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
I want to show more info about the file from the database using modal instead adding more columns to the table, and also instead of opening new page.
here is my code
<table id="file" class="table table-bordered table-striped table-hover">
<?php
$result = mysql_query("SELECT * FROM files")
?>
<thead>
<tr>
<th>ID <i class="fa fa-sort"></i></th>
<th>Name <i class="fa fa-sort"></i></th>
<th>Size <i class="fa fa-sort"></i></th>
<th>Delete </th>
</tr>
</thead>
<tbody>
<?php
while($row = mysql_fetch_array( $result )) {
?>
<tr class="record">
<td><?php echo $row['id'];?></td>
<td><?php echo $row['name']; ?> </td>
<td><?php echo $row['size']; ?> </td>
<td><div align="center"></div></td>
<td><div align="center"></div></td>
</tr>
<?php
}
?>
</tbody>
</table>
Thanks in advance.
If there any other way place say it.
You can replace the following data-target and modal ID with PHP, if that is what you mean.
<!--This calls the modal by data-target ID -->
<a data-toggle="modal" data-target="#myModal">This link calls the modal</a>
<!--modal content-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<!-- your content goes here -->
</div>
<div class="modal-footer">
<center><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button></center>
</div>
</div>