I am having an issue that I have installed BIXOLON printer and want to print a receipt through it. Have used java script to print it but printing page size is too large.
inner Html:
<div id="divToPrint" class="invoice p-3 mb-3" style="max-height:100%">
<div class="row">
<div class="col-12">
<h4 style="text-align:center">
<img src="<?php echo base_url()?>assets/dist/img/AdminLTELogo.png" class="img-responsive" style="max-width:100px;margin:0 auto;display:block">
<br>
</h4>
</div>
</div>
<div class="row invoice-info">
<div class="col-sm-4 invoice-col">
</div>
<div class="col-sm-4 invoice-col">
</div>
<div class="col-sm-4 invoice-col">
<b>Invoice #<?php echo date('M Y').'-'.$id?></b><br>
<br>
<b>Payment:</b> <?php $amount?><br>
<b>Duration:</b> <?php echo $duration ?>
</div>
</div>
<div class="row">
<div class="col-12 table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Qty</th>
<th>Station</th>
<th>Serial</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><?php echo $stationTitle; ?> </td>
<td><?php echo$ id?></td>
<td><?php echo $amount?></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-6">
</div>
<div class="col-6">
<p class="lead">Date <?php echo date('d M Y')?></p>
<div class="table-responsive">
<table class="table">
<tr>
<th style="width:50%">Total:</th>
<td><?php $amount?></td>
</tr>
</table>
</div>
</div>
</div>
</div>
Here is my java script code:
function PrintDiv() {
var divToPrint = document.getElementById('divToPrint');
var popupWin = window.open('', '_blank', 'width=400,height=300');
popupWin.document.open();
popupWin.document.write('<html><body style="width: 58mm " onload="window.print()">' + divToPrint.innerHTML + '</html>');
popupWin.document.close();
}
Have attached an image with it too. Want to print a short receipt to limited height.
Thank You.
It's hard to tell, bcs you haven't provide the inner div html and styles.
However, try this:
<body style="width: 58mm; height: 120mm; overflow: hidden;" onload="window.print()">
Related
I have a main php page displaying dynamically generated cards through a loop. I am trying to refresh the content for certain tags, but it doesn't seem to work so far.
This is my main.php file:
<div class="col" style="width: ">
<div class="card shadow-sm h-100 border-dark rounded" style="width: 240px; background-color: #ededed">
<span class="mySpan">
<div class="container">
<input type="hidden" class="cardid" name="mycardId" value="
<?php echo $cardId ?>" id="cardid">
<div class="card-body px-0 py-0">
<table id="firstTable" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="width: 237px; table-layout: fixed;">
<thead>
<tr>
<th colspan="3" id="row1field1" name="row1field1" class="text-center py-1 px-1 fw-bold
<?php if($selectField == "EXP") echo "text-decoration-line-through" ?>" style="max-width: 237px; text-transform: uppercase; font-size: 18px;" contenteditable="true" data-name="row1field1"> <?php echo $row1field1; ?> </th>
</tr>
</thead>
</table>
<table id="row4" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="max-width: 238px; min-height: 50px; border: thin solid lightgray">
<tr>
<td name="row4field1" id="row4field1" class=" py-1" style="max-width: 104px; border-right: thin solid gray; text-transform: uppercase;" contenteditable="true">
<h6>
<strong> <?php echo $row4field1; ?> </strong>
</h6>
</td>
<td name="row4field2" id="row4field2" class=" py-1" style="max-width: 104px; text-transform: uppercase;" contenteditable="true">
<h6>
<strong> <?php echo $row4field2; ?> </strong>
</h6>
</td>
</tr>
</table>
</div>
<div>
</span>
</div>
</div>
This is what I've tried so far using javascript:
$(document).ready(function(){
setInterval(function(){
$("#row1field1").load(" #row1field1 > *");
}, 5000);
});
Unfortunately, after the refresh, all content from row1field1 is gone. I believe this could be because the IDs are not unique, but I'm using the hidden value cardId to differentiate each card. Any advice on how to properly refresh these dynamic content is greatly appreciated.
I've created a table where my data can be ACTIVE or INACTIVE and this is already working, my goal is I just want to add a function that when I clicked the button to make my data INACTIVE, it will pop up a modal and has a message. But I don't know how will I make it pop up.
I've found a similar post but it cannot be applied to mine, because what I did has a different approach and I think mine is easier for myself to understand and will or might complicate things for me if I try to use the link. Thanks in advance
Here is my code in my JQUERY
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
var id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0';
}
$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {
selector.hasClass("btn-success") ? (selector.removeClass("btn-success").addClass(
"btn-danger"),
selector.text("Inactive")) : (selector.removeClass("btn-danger").addClass(
"btn-success"),
selector.text("Active"));
// location.reload();
}
});
});
// For status Active/Inactive
function StatusChange() {
$("#dataTables").DataTable().destroy();
$("#tb_body").empty();
var status = $('#stats').val();
if (status) {
$.ajax({
type: "POST",
url: "../forms/form_statusForspecs_dtbl.php",
data: {
status: status
},
success: function(data) {
$("#dataTables").append(data);
$("#dataTables").DataTable();
}
});
}
}
// Startup
$(document).ready(function() {
$('#stats').change(function() {
$(this).val();
});
$("#stats").trigger('change');
});
#import https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
.statusButton {
color: white;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
border-radius: 20px;
white-space: nowrap;
padding: 2px 12px;
font-size: 12px;
line-height: 1.42857143;
border-radius: 4px;
user-select: none;
}
</style>
</head>
<!-- this is the modal that I want to pop up -->
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</h4>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="submit" id="submitBtn" class="btn btn-danger pull-right" data-toggle="modal" data-target="#maModal" onclick="window.location.href='#'">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<br>
<br>
<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>
<br>
<!-- Status -->
<div>
<form action="GET">
<div class="form-group">
<label> Table group by Status </label>
<select name="selector_id" onchange="StatusChange()" style="width:200px;" class="show-menu-arrow form-control" id="stats">
<!-- <option value="" disabled> Select Status </option> -->
<option value="1" selected> ACTIVE </option>
<option value="0"> 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" id="showStatus">
<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>
<tbody id="tb_body">
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my form_statusForspecs_dtbl.php AJAX call in function StatusChange()
<?php
include ("../include/connect.php");
$status = $_POST['status'];
$con->next_result();
$result = mysqli_query($con, "CALL GetToolSpecByStatus('$status')");
while ($row = mysqli_fetch_assoc($result))
{
echo '<tr>';
echo "<td><a href='edit_toolspec.php?ID=".$row['ID']."' style='color:red;'>" . $row['tools_name'] . "</a></td>";
echo '<td>'.$row['model_num'].'</td>';
echo '<td>'.$row['model_num_val'].'</td>';
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>';
}
?>
Here is my form_btnStats.php AJAX call for button to change status and will be recorded in sql database
<?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);
}
?>
As you only need to show popup when making button inactive you add code to show modal inside if(status == '1'){ and use $("#reason_for_modal").modal('show'); to show same . Also , put some condition around your ajax call so that it will execute only when status is 1 .Nextly ,if user click on deactivate button inside modal you can create one click event handler for same and pass value to ajax from there.
Demo Code :
var id;
$(document).on('click', '.status_checks', function() {
var status = '1';
var selector = $(this);
id = $(this).data('id');
if ($(this).hasClass("btn-success")) {
status = '0'; //change to 0
$("#reason_for_modal").modal('show'); //show modal
}
//enter only when status is 1
if (status == '1') {
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: status
},
success: function(data) {*/
selector.removeClass("btn-danger").addClass(
"btn-success");
selector.text("Active");
/*}
});*/
}
});
//if activate btn is click
$("#submitBtn").on("click", function() {
var reason = $("#reason").val(); //get reason..
$("#reason_for_modal").modal('hide'); //hide modal
console.log(id)
$("#reason").val("")//empty textarea
/*$.ajax({
type: "POST",
url: "../forms/form_BtnStats.php",
data: {
id: id,
status: 0,
reason:reason
},
success: function(data) {*/
//change class and text
$("p[data-id=" + id + "]").removeClass("btn-success").addClass("btn-danger")
$("p[data-id=" + id + "]").text("Inactive")
/*}
});*/
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- this is the modal that I want to pop up -->
<!-- /.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" id="showStatus">
<div class="table-responsive">
<table width="50%" 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 id="tb_body">
<tr>
<td>abc</td>
<td>14</td>
<td>1</td>
<td>5</td>
<td>
<center>
<p data-id="1" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
<tr>
<td>abc1</td>
<td>14</td>
<td>11</td>
<td>51</td>
<td>
<center>
<p data-id="2" class="status_checks statusButton btn-danger">
Inactive
</p>
</center>
</td>
</tr>
<tr>
<td>ab3</td>
<td>13</td>
<td>13</td>
<td>51</td>
<td>
<center>
<p data-id="3" class="status_checks statusButton btn-success">
Active
</p>
</center>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="reason_for_modal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<center> Confirmation </center>
</div>
<!-- Modal body -->
<div class="modal-body panel-body">
<center>
<br><br>
<p> <strong> Reason for Inactive </strong> </p>
<textarea id="reason"></textarea>
</center>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<div class="col-sm-15">
<div class="form-group">
<button type="button" id="submitBtn" class="btn btn-success pull-right"> De-Activate</button>
<button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-dismiss="modal">
<span class="fa fa-check"></span>
Close
</button>
</div>
</div>
</div>
</div>
</div>
</div>
Option 1: Simple CSS class assignment
Example: https://www.w3schools.com/w3css/w3css_modal.asp
Option 2: Use jQuery.show() / jQuery.hide()
function StatusChange() {
...
if (status == 0) {
// This should use # / id
jQuery('div.modal').show();
}
}
Option 3: Use jQuery UI dialog
Example: https://jqueryui.com/dialog/
I have a problem that will make me crazy, I've got a page that has a SideBar on the left that folds down. This sidebar, works very well when no ajax is called.
The problem occurs when an Ajax is called.
To be clearer the problem occurs with the require_once('../include/js/js.php');.
If I remove this part of the codes of the different ajax calls, the problem disappears, but I need this require once so that the array generated in the ajax is returned with the buttons provided by "DataTables.net" ( print button, copy....)
I thought I had solved the problem by removing the require_once('../include/js/js.php'); on my Ajax files, but in fact not because it removes the buttons I need .
From what I see, the require once doesn't work as I would like...
I searched for 5 hours trying everything, but I think I lack the knowledge to solve this problem...
I will show you my full code :
Main Page :
<?php
session_start();
if(isset($_SESSION["connection"]) && ($_SESSION["role"] >= 0)){
require_once("../../include/js/ShowNotif.php");
$title_page = "Historique d'un NameSpace - Beluga";
require_once("../../include/head.php");
?>
<!-- Main content -->
<div class="main-content" id="panel">
<!-- Topnav -->
<?php
require_once("../../include/navbar.php");
?>
<!-- Header -->
<!-- Header -->
<div class="header bg-primary pb-6">
<div class="container-fluid">
<div class="header-body">
<div class="row align-items-center py-4">
<div class="col-lg-6 col-7">
<h6 class="h2 text-white d-inline-block mb-0">Consultation</h6>
<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
<li class="breadcrumb-item"><i class="fas fa-home"></i></li>
<li class="breadcrumb-item">NameSpace</li>
<li class="breadcrumb-item active" aria-current="page">Liste</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- Page content -->
<div class="container-fluid mt--6">
<!-- Table -->
<div class="row">
<div class="col-md-12">
<div class="card-wrapper">
<!-- Input groups -->
<div class="card">
<!-- Card header -->
<div class="card-header bg-Default">
<h3 class="mb-0" style="color:white;">Historique d'un NameSpace</h3>
</div>
<!-- Card body -->
<div class="card-body bg-Default">
<!-- Input groups with icon -->
<div class="row">
<div class="col-md-6 mr-auto ml-auto">
<div class="form-group">
<!-- <div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-collection"></i></span>
</div>
<input class="form-control" placeholder="Code SA" type="text" name="codesa" onkeyup="checkForEnterKey(this.value);" id="codesa" value="">
</div> -->
<label for="codesa" style="color:white;">CodeSA</label>
<div class="input-group mb-3">
<input type="text" class="form-control" id="codesa" name="codesa" placeholder="Saisir le code applicatif" aria-label="Saisir le code applicatif" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" id="clicksubmitsa" onclick="SubmitSA('SearchHistoryOfNamespace();');">Valider</button>
</div>
</div>
</div>
</div>
</div>
<div id="resultatlistsa"></div>
<!-- Input groups with icon -->
</div>
<div id="resultatlistofhistory"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<?php
require_once("../../include/footer.php");
?>
</div>
</div>
<!-- Argon Scripts -->
<!-- Core -->
<?php
require_once("../../include/js/js.php");
require_once("../../include/js/historydeploymentofnamespacejs.php");
?>
</body>
</html>
<?php
}else{
header('Location: ../../connect.php');
} ?>
First Ajax call :
<?php
require_once('../include/php/AllFunction.php');
require_once('../include/js/js.php');
$codesa = strtolower($_POST['codesa']);
$fonction = $_POST['fonction'];
// SearchServicesOfANamespace(); SearchHistoryOfNamespace();
if(isset($codesa) && !empty($codesa)){
$bearer = "";
$Link = $ApiBaseLink."allhistorydeploymentnamespace";
$object = GetHTTPRequest($Link, $bearer);
if ($object != FALSE){
$NombreSA = sizeof($object);
?>
<div class="row">
<div class="col-md-8 mr-auto ml-auto">
<div class="form-group">
<label for="namespace" style="color:white;">NameSpaces</label>
<select id="namespace" name="namespace" data-toggle="select" class="form-control" onchange="<?php echo $fonction; ?>">
<!-- ShowLoadingProcess(); -->
<option selected disabled>Liste des namespaces</option>
<script>
var table = $('#datatable-buttons').DataTable();
table.destroy();
</script>
<?php
for($SA = 0; $SA < $NombreSA; $SA++){
$namespace = $object[$SA]["namespacename"];
if (strpos($namespace, $codesa) !== false) {
?>
<option value="<?= $namespace; ?>"><?= $namespace; ?></option>
<?php
}
}
?>
</select>
</div>
</div>
</div>
<?php
}else{
return http_response_code(404);
}
}
?>
After the selection, latest ajax call :
<?php
require_once('../include/php/AllFunction.php');
require_once('../include/js/js.php');
$bearer = "";
$namespace = strtolower($_POST['namespace']);
?>
<div class="row">
<div class="col">
<div class="card bg-Default">
<!-- Card header -->
<div class="card-header bg-Default">
<h3 class="mb-0" style="color:white;">Liste des services</h3>
<p class="text-sm mb-0" style="color:white;">
Voici l'ensemble de l'historique pour ce NameSpace.
</p>
</div>
<div class="table-responsive py-4">
<table class="table bg-white" id="datatable-buttons" data-turbolinks="false">
<thead class="thead-light">
<tr>
<th>NameSpace</th>
<th>Composant</th>
<th>Tag</th>
<th>Date déploiement</th>
<th>Date Création du Tag</th>
<th>Par</th>
<th>Date ajout composant</th>
</tr>
</thead>
<tfoot>
<tr>
<th>NameSpace</th>
<th>Composant</th>
<th>Tag</th>
<th>Date déploiement</th>
<th>Date Création du Tag</th>
<th>Par</th>
<th>Date ajout composant</th>
</tr>
</tfoot>
<tbody>
<?php
if(!empty($namespace)){
$Link = $ApiBaseLink."historydeployment/".$namespace;
$object = GetHTTPRequest($Link, $bearer);
if($object != FALSE){
$NombreHistoriques = sizeof($object);
if ($NombreHistoriques > 0){
for($historique = 0; $historique < $NombreHistoriques; $historique++){
$id = $object[$historique]["id"];
$servicename = $object[$historique]["servicename"];
$tagversion = $object[$historique]["tagversion"];
$datedeploiement = $object[$historique]["datedeploiement"];
$datecreationtag = $object[$historique]["datecreationtag"];
$actionby = $object[$historique]["actionby"];
$dateajout = $object[$historique]["dateajout"];
?>
<tr>
<td><span><?= $namespace ?></span></td>
<td><span><?= $servicename ?></span></td>
<td><span><?= $tagversion ?></span></td>
<td><span><?= $datedeploiement ?></span></td>
<td><span><?= $datecreationtag ?></span></td>
<td><span><?= $actionby ?></span></td>
<td><span><?= $dateajout ?></span></td>
</tr>
<?php
}
}
}else{
?>
<script>
ShowMessageNotification('error', 'Aïe ! L\'API n\'a pas répondu... ', 4000, 'top-end');
</script>
<?php
}
}else{
?>
<script>
ShowMessageNotification('error', 'Aïe ! Le NameSpace est vide... ', 4000, 'top-end');
</script>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
The JS.PHP file :
<script src="../../assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="../../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/vendor/js-cookie/js.cookie.js"></script>
<script src="../../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="../../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Optional JS -->
<script src="../../assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../assets/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="../../assets/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/jszip.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/pdfmake.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/vfs_fonts.js"></script>
<script src="../../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../../assets/vendor/chart.js/dist/Chart.extension.js"></script>
<!-- Argon JS -->
<script src="../../assets/js/argon.js?v=1.2.0"></script>
Just after loading the first Ajax, the SideBar is no longer straightenable, it freezes.
It remains stuck after the second AJAX.
The problem come from this :
VM8230:2655 Uncaught TypeError: $this.select2 is not a function
at init (<anonymous>:2655:9)
at HTMLSelectElement.<anonymous> (<anonymous>:2667:4)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at <anonymous>:2666:11
at <anonymous>:2671:3
at b (jquery.min.js:2)
at Function.globalEval (jquery.min.js:2)
at Object.dataFilter (jquery.min.js:2)
at jquery.min.js:2
But my jquery is loaded only one time
I hope someone with experience can solve this problem, it makes me crazy really.. i don't understand why a require_once can cause this..
can you help me how to print it into pdf on the table with input value.
sorry im just a student and my supervisor need this project for my output
and i cant add my materialize js and css because for body limit
and i add a add button for new Row for the table with a input that can print it to the pdf. just help me in converting to pdf and i can handle the rest of formating in pdf
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bureau of Internal Revenue</title>
</head>
<body class="scrollspy bg">
<nav>
<div class="nav-wrapper white" >
<div class="container">
<img src="img/download.png" style="width:5%; margin-top:3px; " alt="" class="responsive-image">
<a href="" style="margin-left:1%;" class="brand-logo black-text"> Bureau of Internal Revenue
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Create</li>
</ul>
</a></div>
</div>
</nav>
<div class="showcase container">
<div class="bg-showcase">
<div class="row">
<div class="col s12 m10 offset-m1 center">
<br>
<br>
<br>
<br>
<h1 class="white-text center"><b>Welcome</b></h1>
<h1 class="center white-text"><b>to</b></h1>
<h1 class="center white-text"><b>Bureau of Internal Revenue</b></h1>
</div>
</div>
</div>
</div>
<form action="">
<div class="row">
<div class="col s12 l10 offset-l1">
<div class="card">
<div class="card-content">
<div class="">
<h3><b>Index of Success Indicators</b></h3>
<table class="striped">
<thead>
<tr>
<th>Major Final Outputs</th>
<th>Performance Measures</th>
<th>Performance Targets</th>
<th>Success Indicator
<p>(Measure + Target)</p></th>
<th>Organization Outcome Sectoral Goals</th>
</tr>
</thead>
<thead>
<tr>
<th>A. Strategic Priority</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>B. Core Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
<thead>
<tr>
<th>C. Support Function</th>
</tr>
</thead>
<tbody class="line">
<tr>
<th>New Row</th>
</tr>
</tbody>
</table>
<div class="center"><input type="button" value="Create PDF" class="btn btn-black" onclick="demoFromHTML()"></div>
</div>
</div>
</div>
</div>
</div>
</form>
<footer class="page-footer grey darken-3">
<div class="container">
<div class="row">
<div class="col s12 l6">
<h4>Links</h4>
<ul>
<li>Home</li>
<li>Back to Top</li>
<li>About Developer</li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright grey darken-2">
<div class="container">Bureau of Internal Revenue © 2019</div>
</div>
</footer>
</body>
<div id="create" class="modal">
<ul class="container center" style="margin-bottom: 3%;">
<h2>Create</h2>
<li>Index of Success Indicators</li>
<br><br>
<li>Performance Monitoring and Coaching</li>
<br><br> <li>CSC Individual Development Plan</li>
<br><br> <li>Individual Performance Commitment And Review</li>
</ul>
<div class="modal-footer">
close
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
$(document).ready(function () {
// Init Sidenav
$('.button-collapse').sideNav();
// Scrollspy
$('.scrollspy').scrollSpy();
$('.modal').modal({
dismissible:true,
inDuration:300,
outDuration:200,
ready:function(modal,trigger){
console.log('Modal Open',modal,trigger);
}
});
jQuery(function(){
var counter = 1;
jQuery('a.addline').click(function(event){
event.preventDefault();
var newRow =jQuery('<tr class="number">'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter +' <th><input type="text" name="" class="center" id=""/></th>'+
counter + '<th><input type="text" name="" class="center" id=""/></th>' +
counter + '<th><button type="button" class="deletebtn" title="Remove row">X</button></th>');
counter ++;
jQuery('tbody.line').append(newRow);
});
});
function demoFromHTML(){
var pdf= new jsPDF('p','pt','letter');
source = $('#isi')[0];
specialElementHandlers={
'#bypassme':function(element,renderer){
return true
}
};
margins = {
top:80,
bottom:60,
left:40,
width:552
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width':margins.width,
'elementHanlders':specialElementHandlers
},
function(dispose){
pdf.save('testing.pdf');
}
,margins);
};
});
</script>
</body>
</html>
I have my table in my html php file inside my i want it to be set the max height and if it reach the max and want to add more it will be scrollable how is this possible? this is for my project thanks
i want this to be scrollable after 500px reached
<div class="container" style="max-height: 500px;width:600px;height:500px border:1px solid black">
<div class="panel panel-default" style= "max-height: 500px;">
<div class="panel-heading" align="center">
<img src="or.png" alt="or" style="width:200px;height:40px;">
</div>
<div class="panel-body" style= "max-height: 500px;">
<table class="table">
<tr>
<th><FONT color="CB7F16">Foodname</FONT></th>
<th><FONT color="CB7F16">Quantity</FONT></th>
<tr>
<?php
while($food=mysql_fetch_assoc($list)) {
echo"<tr>";
echo"<td><FONT color='FA9404'>".$food['food']."</FONT></td>";
echo"<td><FONT color='FA9404'>".$food['quantity']."</FONT></td>";
echo"</tr>";
}
?>
<tr>
<td colspan="2" align="center"><a class="btn" href="acceptorder.php">Accept</a></td>
</tr>
</table>
</div>
</div>
</div>
Add overflow-y:auto; to your respective div.