angular print printing a second blank page - javascript

I'm trying to print an content of my html page.
I'm using this angularPrint but the problem im having is that in the page preview i'm getting to pages. the first one has content and the second one is a blank page. I'm trying to get rid of the blank page.
this is my html
<div id="invoice" print-section="" print-only="">
<div class="invoice">
<div class="invoice-company">{{user.store.name}}</div>
<div class="invoice-header">
<div class="invoice-from"><small>from</small>
<address class="m-t-5 m-b-5"><strong>{{user.store.name}}.</strong><br/>{{user.store.address.street}}<br/>{{user.store.address.city}}, {{user.store.address.zipCode}}<br/>Phone: {{user.store.phone}}</address>
</div>
<div class="invoice-date">
<div class="date m-t-5">{{saleDate | date:'MM/dd/yyyy'}}</div>
<div class="invoice-detail"># {{saleId}}<br/>Cashier {{user.firstName}}</div>
</div>
</div>
<div class="invoice-content">
<div class="table-responsive">
<table class="table table-invoice">
<thead>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in sale.items">
<td>{{item.name}} {{item.size}}</td>
<td>{{item.price | currency}}</td>
</tr>
<tr ng-repeat="discount in sale.discounts">
<td>{{discount.name}}</td>
<td>- {{discount.price | currency}}</td>
</tr>
</tbody>
</table>
</div>
<div class="invoice-price">
<div class="invoice-price-left">
<div class="invoice-price-row">
<div class="sub-price"><small>SUBTOTAL</small>{{sale.subtotal | currency}}</div>
<div class="sub-price"><i class="fa fa-plus"></i></div>
<div class="sub-price"><small>TAX</small>{{sale.tax}}</div>
</div>
</div>
<div class="invoice-price-right"><small>TOTAL</small>{{sale.total | currency}}</div>
</div>
</div>
<div class="invoice-footer text-muted">
<p class="text-center m-b-5">Thank you for coming.<br/>We hope you'll visit again.</p>
</div>
</div>
</div>
this is the directive that trigger the print action
<button type="button" print-btn="">Print</button>
I want a solution it doesn't matter if I have to use plain javascript/jQuery or no directive at all. I just to be able to populate an invoice and print it.
Thank you in advance.

you could add
#invoice:last-child {
page-break-after: auto;
}
to remove the last page
Note: Not supported in IE

Related

How can customize my HTML if it is inside a JS

here's my profile.js
profileContainer.innerHTML =
`
<div class="col-md-12">
<section class="jumbotron my-5">
<h3 class="text-center">First Name: ${data.firstName}</h3>
<h3 class="text-center">Last Name: ${data.lastName}</h3>
<h3 class="text-center">Email: ${data.email}</h3>
<h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
<h3 class="mt-5">Class History</h3>
<table class="table">
<thead>
<tr>
<th> Course Name </th>
<th> Enrolled On </th>
<th> Status </th>
</tr>
</thead>
<tbody id="coursesContainer"></tbody>
</table>
</section>
</div>
`
and this is my profile.html
<main class="container my-5">
<div id="profileContainer" class="row">
<div class="col-md-12">
<section class="jumbotron text-center my-5">
<h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User
Details...</h2>
</section>
</div>
</div>
<!-- end row -->
</main>
This is the expected output:
profile
I tried changing the background color of the profile from gray to another color, but targeting the profileContainer through style.css only changes color of the outer border.. please help
if you want to update the whole page i.e overwrite the whole html code you need to add a button that initiates the page update event or you wont see any user interaction .
under tag add a button
<main class="container my-5">
<div id="profileContainer" class="row">
<div class="col-md-12">
<section class="jumbotron text-center my-5">
<h2 class="my-5"><span class="spinner-border text-primary"></span> Fetching User
Details...</h2>
<button onclick="myfunction()">click me</button>
</section>
</div>
</div>
<!-- end row -->
</main>
your JS code should be updated as
function myfunction() {
document.getElementById("profileContainer").innerHTML="<div class="col-md-12">
<section class="jumbotron my-5">
<h3 class="text-center">First Name: ${data.firstName}</h3>
<h3 class="text-center">Last Name: ${data.lastName}</h3>
<h3 class="text-center">Email: ${data.email}</h3>
<h3 class="text-center">Contact Number: ${data.mobileNo}</h3>
<h3 class="mt-5">Class History</h3>
<table class="table">
<thead>
<tr>
<th> Course Name </th>
<th> Enrolled On </th>
<th> Status </th>
</tr>
</thead>
<tbody id="coursesContainer"></tbody>
</table>
</section>
</div>" ; }
You can target classes or IDs specified within JS the same way you would any other HTML. Depending on the specific element on the page you're trying to style, you could try targeting .jumbotron
Without seeing what CSS already exists to know what elements styling is currently being applied to (i.e., which class the gray background and border radius are actually tied to), it's hard to provide specifics.
What basically we do is that we provide an id or class to the element. Try to do that and then code the css in the stylesheet. This is the easy and foremost way to get out of this rid.
You can select the HTML element that you want to change by giving it an ID and select by using the JavaScript property which is getelementbyid, and changing its inner HTML by using the innerhtml property.

How to give additional width to the div inside <tr> tag of a table?

I am trying to implement a table in my page. One of the values is rendering too big which looks odd in table cell. Is there any way I can utilize additional width of another <td> for a particular div (I don't want to use colspan for td). SO to achieve this I need to extend the width of that particular DIV. giving a div a width and display absolute property is a bad idea! What else should I do?
MY html-
<table>
<tr>
<th style="width:105px;">
<strong>Sr NO.</strong>
</th>
<th style="width:65px;">
<strong>Type</strong>
</th>
<th style="width:165px;">
<strong>Classification</strong>
</th>
<th style="width:80px;">
<strong>Book No</strong>
</th>
<th>
<strong>Agency</strong>
</th>
<th>
<strong>Date</strong>
</th>
</tr>
<tr ng-repeat="request in msc.minutesData">
<td>
<div class="minutes-subject-container">
<div class="p-t-xs">
{{request.id}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-subject" style="width:105px">
<label>subject</label>
<div class="minutes-info--subject">
<span>
{{request.subject}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.type}}
</div>
</td>
<td>
<div class="minutes-desc-container">
<div class="p-t-xs">
{{request.classification}}
</div>
<div class="flex-container">
<div class="minutes-info--subrow-desc" style="width:165px">
<label>Description</label>
<div class="minutes-info--descriptiopn">
<span>
{{request.description}}
</span>
</div>
</div>
</div>
</div>
</td>
<td>
<div class="p-t-xs">
{{request.bookNo}}
</div>
</td>
<td>
<div class="p-t-xs">
{{request.agency}}
</div>
</td>
<td style="width:110px;">
<div class="minutes-info">
<div class="minutes-info--firstrow">
<div>
<span class="minutes-spanrow">
{{request.date | date: "EEE, d MMM yyyy"}}</span>
</div>
</div>
<div class="flex-container">
<div class="minutes-info--secondrow">
<span class="link-to" ng-click="msc.geturlData(request)">
<img src="img/Doc-Viewer-icon.svg" title="التقرير">
</span>
</div>
</div>
</div>
</td>
</tr>
</table>
Attaching screenshot of my table view to get more insight of my issue. Could someone help me to get solution approach?
Giving width to a container in pixels is a bad idea. It makes it totally absolute and the width won't adjust in different resolutions. You can use percentage. And for your specific problem, you can use try to calculate the percentage that should be applied based on the content. Then using binding allot the percentage width to the containers.

Embed angular.js app in resizable div

I'm using angular.js to paginate a list of data on my website (found the code at http://www.angularcode.com/angularjs-datagrid-paging-sorting-filter-using-php-and-mysql/). The user can decide, how many rows of data he wants to display on a single page. Because of that, the table is constantly resizing. Is there a possibility to embed the app into a dynamically resizing div in order to properly append a footer-div at the bottom of the website?
Here is the code of the app:
<div id="app-container" ng-app="myApp" ng-app lang="en">
<div ng-controller="customersCrtl">
<div class="col-md-10 col-md-offset-1">
<div class="row">
<div class="col-md-2">PageSize:
<select ng-model="entryLimit" class="form-control">
<option>25</option>
<option>50</option>
<option>100</option>
<option>500</option>
</select>
</div>
<div class="col-md-3 col-md-offset-7">Filter:
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
</div>
<div id="url-amount" class="col-md-3 col-md-offset-9">
<h5>Filtered {{ filtered.length }} of {{ totalItems}} total URLs</h5>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" ng-show="filteredItems > 0">
<table class="table table-striped table-bordered">
<thead>
<th>URL <a ng-click="sort_by('url');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Status Code <a ng-click="sort_by('statuscode');"><i class="glyphicon glyphicon-sort"></i></a></th>
<th>Category <a ng-click="sort_by('statuscategory');"><i class="glyphicon glyphicon-sort"></i></a></th>
</thead>
<tbody>
<tr ng-repeat="data in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
<td>{{data.url}}</td>
<td>{{data.statuscode}}</td>
<td>{{data.statuscategory}}</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12" ng-show="filteredItems == 0">
<div class="col-md-12">
<h4>No URLs found</h4>
</div>
</div>
<div class="col-md-12" ng-show="filteredItems > 0">
<div pagination="" page="currentPage" max-size="10" on-select-page="setPage(page)" boundary-links="true" total-items="filteredItems" items-per-page="entryLimit" class="pagination-small" previous-text="«" next-text="»"></div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
and the styles:
#footer {
width: 100%;
height: 200px;
background-color: black;
}
The footer div overlaps the angular.js app instead of beeing appended below.

Angularjs is not loading second time

I am using angularjs in my application. I have a problem with this code, this code generate data first time. But when I come back to that page from other location it give only expression written in jsp page
Below is my app.js
var app = angular.module("myModule",[]);
app.controller(
"ReportController",
function ($scope,$http) {
$http({
method: 'POST',
url: 'mypage_body.do',
data: 'action=fetchdata',
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(response) {
$scope.questions = response;
});
}
);
angular.element(document).ready(function (){
angular.bootstrap(document,['myModule']);
});
It gives expression when I reload the page from other location
like this
{{question.title}}
{{cell.f}}{{cell.f}}
{{row.h}} {{row.v}} {{row.v}}
I analyzed that page is not loading again. Means document.ready is not calling again on that page. Could anyone please help how to call again the module written in app.js without using document.ready.
Any help would be appreciated.
Thanks in advance.
<script type="text/javascript" src="/campustoolshighered/css/js/angular-1.2.26.min.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/js/adhocreport/app.js"></script>
<script type="text/javascript" src="/campustoolshighered/css/uiframework/js/bootstrap.js"></script>
<div ng-controller="ReportController">
<div class="row" ng-repeat="question in questions">
<div class="col-md-12">
<div class="module">
<div class="heading">
<h2>{{question.title}}</h2>
<div class="module-options">
<span tabindex="3" class="icon-settings pop" title="Edit" data-toggle="tooltip" data-popoverid="#icon-setting"><span class="sr-only">Widget settings</span></span>
</div>
</div>
<div class="module-content" >
<div class="row">
<div class="col-md-12">
<div class="table-wrap">
<table class="table table-striped">
<thead>
<tr>
<th scope="col" role="columnheader" ng-repeat="header in question.dataTable.cols" >{{header.label}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in question.dataTable.rows">
<td ng-repeat="cell in row.cells"><a ng-if="cell.link" href="{{cell.link}}" tabindex="3">{{cell.f}}</a><span ng-if="!cell.link">{{cell.f}}</span></td>
</tr>
</tbody>
</table>
</div>
<ul ng-show="question.aggregateTable">
<li ng-repeat="row in question.aggregateTable.rows">
<strong>{{row.h}} </strong>
<a ng-if="row.link" href="{{row.link}}" tabindex="3">{{row.v}}</a>
<span ng-if="!row.link">{{row.v}}</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And if I do not bootstrap my code manually on document.ready page does not load angular js not even first time.

ng-repeat won't work in modal

So I'm trying to get a modal to ng-repeat an array of objects and it won't show up at all.
I'm not quite sure what I'm doing wrong but hoping for help as to getting the ng-repeat to work!
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
<h4>Transfer Funds</h4>
</div>
<br />
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<table class="table">
<thead>
<tr>
<th class="text-center">
eGift Cards
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="trans in gctrans.Items | filter: cardSearch">
<td class="text-center">
<strong>{{getCustomerName(trans)}}</strong>
<strong>{{getCustomerCardNumber(trans)}}</strong>
<small>{{getCustomerPhone(trans) | tel}}<br /></small>
<small> {{getCustomerEmail(trans)}}<br /></small>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<br />
<div class="modal-footer">
<button class="btn btn-primary" ng-click="confirmTransfer(trans)">Next</button>
</div>
</div>
the two most likely things that would be causing this are model not existing in scope and filter causing unexpected behavior. The first to try would be seeing if the gctrans.Items is available in the scope of the modal. Try adding {{gctrans}} in the modal and see if any data is there, like:
<div class="col-md-12">
raw data: {{gctrans}}
<table class="table">
second, if there is data try removing the filter:
<tr ng-repeat="trans in gctrans.Items">
and one more thing to try, if the data is good and the filter is not unexpectedly removing items, you might not be selecting anything inside of the repeat. Try just outputting the item
<tr ng-repeat="trans in gctrans.Items">
<td class="text-center">
<strong>{{trans}}</strong>
</td>
</tr>
thanks so much for the input. I figured out what I had done wrong in the controller (hadn't declared gctrans in the modal function).
Make sure all your stuff is declared in functions as well if you're using modals and ng-repeat!

Categories