Integrating Html2Pdf with CouchCMS and AJAX - javascript

I am using the following:
Html2Pdf GitHub
CouchCMS Official Site
Firefox Developers Edition
I am working on generating a PDF file. When I use the code given in the documentation I am able to generate the PDF. Also, when I try to include the CouchCMS code the PDF is generated (as in a PDF which opens in a browser PDF Viewer).
My CouchCMS Code is:
<?php
require_once '../couch/cms.php';
require __DIR__.'/vendor/autoload.php';
?>
<cms:php>
use Spipu\Html2Pdf\Html2Pdf;
$html = '<cms:pages masterpage="pdf-generation/index.php"><h1>HelloWorld</h1>This is my first test</cms:pages>';
$html2pdf = new Html2Pdf();
$html2pdf->writeHTML($html);
$html2pdf->output();
</cms:php>
<?php COUCH::invoke(); ?>
Now I am trying to achieve the following:
From a list view of students, a button is clicked
This button click sends the button id to an AJAX script
AJAX Script needs to generate the following:
a. Open a Download dialog box with a custom pdf file name and allow to save locally.
b. Open a new window to display the generated pdf with the student info.
My codes for the above are:
List view of Student:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<cms:pages masterpage=k_template_name>
<cms:no_results>
<tr>
<td class="text-center" colspan="5">
- No record(s) found -
</td>
</tr>
</cms:no_results>
<tr>
<td>
<cms:show k_absolute_count /> (<cms:show k_page_id />)
</td>
<td>
<cms:show fname />
</td>
<td>
<cms:show lname />
</td>
<td>
<cms:if dob>
<cms:date dob format='d-m-Y' />
<cms:else />
1970-01-01
</cms:if>
</td>
<td class="text-center">
<form>
<button class="btn btn-danger btn-sm text-uppercase" type="submit" data-id="<cms:show k_page_id />">
<i class="fa fa-file-pdf-o"></i> Generate PDF
</button>
</form>
</td>
</tr>
</cms:pages>
</tbody>
</table>
AJAX Script to Call AJAX file:
<script type="text/javascript">
$("button").click(function(e) {
e.preventDefault();
var i = $(e.currentTarget).attr('data-id');
$.ajax({
type: "POST",
url: "<cms:show k_site_link />pdf-generation/html2pdf.php",
data: {
id: i
},
success: function(response) {
$("body").html(response);
// window.location.href = '<cms:show k_site_link />pdf-generation/pdf-test.php?id=';
}
});
});
</script>
AJAX File Code:
<?php
require_once '../couch/cms.php';
require __DIR__.'/vendor/autoload.php';
?>
<cms:set page_id="<cms:gpc 'id' method='POST' />" "global" />
<cms:content_type "application/pdf" />
<cms:php>
use Spipu\Html2Pdf\Html2Pdf;
$html = '<cms:pages masterpage="pdf-generation/index.php" id=page_id limit="1">
<div style="width: 210mm; height: 148.5mm;">
<!-- Page Border -->
<div style="width: 205mm; height: 143.5mm; border: 2px solid rgba(0,0,0,0.5);">
<!-- Content Margin from Page Border : 3mm all sides -->
<div style="margin: 3mm;">
<!-- Schools Details : Header -->
<div style="width: 191mm; height: 25mm; text-align: center;">
<h3 style="margin-bottom: 0; margin-top: 0;">School Name</h3>
<small>
<p style="margin: 0;">Address Line #1</p>
<p style="margin: 0;">Address Line #2</p>
<p style="margin: 0;">Phone Number</p>
</small>
</div>
<!-- Schools Details : Header -->
<!-- Certificate Title -->
<div style="width: 191mm; height: 5mm; line-height: 5mm; text-align: center;">
<strong style="text-transform: uppercase;">BONAFIDE CERTIFICATE</strong>
</div>
<!-- Certificate Title -->
<!-- Certificate & GR Number -->
<div style="width: 191mm; height: 5mm; line-height: 5mm;">
<div style="width: 95.5mm; float: left; text-align: center;">
<strong>Certificate No. # </strong>2022001
</div>
<div style="width: 95.5mm; margin-left: 95.5mm; text-align: center;">
<strong>Student GR No. # </strong>12345
</div>
</div>
<!-- Certificate & GR Number -->
<!-- Spacing -->
<div style="width: 191mm; height: 5mm;"></div>
<!-- Spacing -->
<!-- Certificate Content -->
<div style="width: 191mm; font-size: 16px; line-height: 25px;">
This is to certify that <em><u><cms:show fname /> <cms:show lname /></u></em> son/daughter of <em>_______</em>, is/ was a bonafide student of our school during the academic session <em>_____</em> to <em>_____</em>. His/ Her Date of birth according to the school records is <em><u><cms:date dob format="d M Y" /></u></em> He/ She bears a Good Moral Character.
</div>
<!-- Certificate Content -->
<!-- Spacing -->
<div style="width: 191mm; height: 5mm;"></div>
<!-- Spacing -->
<!-- Certificate Issue Date -->
<div style="width: 191mm; height: 5mm; line-height: 5mm;">
<strong>Date of Issue: </strong>Jan 01, 2022
</div>
<!-- Certificate Issue Date -->
<div style="width: 191mm; height: 28mm;">
<div style="width: 95.5mm; float: left; text-align: center; margin-top: 18mm;">
<strong>Headmistress</strong>
<div style="padding-top: 1px;"></div>
(Stamp and Sign)
</div>
<div style="width: 95.5mm; margin-left: 95.5mm; text-align: center; margin-top: 18mm;">
<strong>School Seal</strong>
<div style="padding-top: 1px;"></div>
(Stamp)
</div>
</div>
</div>
<!-- Content Margin from Page Border : 3mm all sides -->
</div>
<!-- Page Border -->
</div></cms:pages>';
$html2pdf = new Html2Pdf();
$html2pdf->writeHTML($html);
$html2pdf->output();
</cms:php>
<?php COUCH::invoke(); ?>
When I click the Generate PDF Button, I get the following Output, but no pdf is shown in PDF Viewer:
%PDF-1.7 %���� 7 0 obj << /Type /Page /Parent 1 0 R /LastModified (D:20220328130254+00'00') /Resources 2 0 R /MediaBox [0.000000 0.000000 595.276000 841.890000] /CropBox [0.000000 0.000000 595.276000 841.890000] /BleedBox [0.000000 0.000000 595.276000 841.890000] /TrimBox [0.000000 0.000000 595.276000 841.890000] /ArtBox [0.000000 0.000000 595.276000 841.890000] /Contents 8 0 R /Rotate 0 /Group << /Type /Group /S /Transparency /CS /DeviceRGB >> /Annots [ 6 0 R ] /PZ 1 >> endobj 8 0 obj <> stream x��Z[S�H~�_q��ũҶ�}��{��#�����O�V�[��/��˞WFXU5��x�G�C p��fD1 �9�ALkN�+bM%"�1-� I��2A,��R��=/����I��vU � U�J��Ōr��)�\�_kڪ�T�/�Vj0/��^��Q8'�0^1nA����$��Y��9���U���?-q�%��ƭNRE�YgOU)x3^T}u>z�Y�ʊ����f���2H��ȯ�04fHI����׽�t4̡a� ��i��\�d`�#4۽4����0Η�`J#�D�E� �C A\s��Q�"������>\�a�����=;���9�Ǖ톛��F��^O�Ohn�]GDh��� ��l͇�u�>y2��O�\���Y/w8ǘ��/T �'�^F��V��U^���g�l� �9յ�8��S�)ęL��������14�oZ�'�O��R�Y�� ��PͰE"�W|]܈]�t���c�J��b�_;t�S�̠���yS�ڕ%d�'g.�4���Of�䡙���W�ӛ�\A.$bj���r >��f�om�tZ=�3h�qHM�S^r��%��<�v돐�l�H:{ΐ�56��;Rgbh]m����O�g���k��)_#X��`$'���y=/���k�F�Ԯ8d��0��n/�����z�� Ė,���U����e-�}Z�0�X�K���D1d���v ���p� A���f��b����� ۶Q��u��˛�s�_�!��C<�A=,{�vX��i: endstream endobj 1 0 obj << /Type /Pages /Kids [ 7 0 R ] /Count 1 >> endobj 3 0 obj <> endobj 4 0 obj <> endobj 5 0 obj <> endobj 2 0 obj << /ProcSet [/PDF /Text /ImageB /ImageC /ImageI] /Font << /F1 3 0 R /F2 4 0 R /F3 5 0 R >> /XObject << >> >> endobj 6 0 obj <> /H /I>> endobj 9 0 obj << /Creator (��Html2Pdf - TCPDF) /Producer (��TCPDF 6.4.4 \(http://www.tcpdf.org\)) /CreationDate (D:20220328130254+00'00') /ModDate (D:20220328130254+00'00') /Trapped /False >> endobj 10 0 obj << /Type /Metadata /Subtype /XML /Length 4656 >> stream application/pdf 2022-03-28T13:02:54+00:00 Html2Pdf - TCPDF 2022-03-28T13:02:54+00:00 2022-03-28T13:02:54+00:00 TCPDF 6.4.4 (http://www.tcpdf.org) uuid:3fbc284a-635c-7e1d-254c-6d5fc16a3de2 uuid:3fbc284a-635c-7e1d-254c-6d5fc16a3de2 http://ns.adobe.com/pdf/1.3/ pdf Adobe PDF Schema internal Adobe PDF Schema InstanceID URI http://ns.adobe.com/xap/1.0/mm/ xmpMM XMP Media Management Schema internal UUID based identifier for specific incarnation of a document InstanceID URI http://www.aiim.org/pdfa/ns/id/ pdfaid PDF/A ID Schema internal Part of PDF/A standard part Integer internal Amendment of PDF/A standard amd Text internal Conformance level of PDF/A standard conformance Text endstream endobj 11 0 obj << /Type /Catalog /Version /1.7 /Pages 1 0 R /Names << >> /ViewerPreferences << /Direction /L2R >> /PageLayout /SinglePage /PageMode /UseNone /OpenAction [7 0 R /FitH null] /Metadata 10 0 R >> endobj xref 0 12 0000000000 65535 f 0000001753 00000 n 0000002143 00000 n 0000001812 00000 n 0000001918 00000 n 0000002029 00000 n 0000002267 00000 n 0000000015 00000 n 0000000483 00000 n 0000002483 00000 n 0000002726 00000 n 0000007465 00000 n trailer << /Size 12 /Root 11 0 R /Info 9 0 R /ID [ <3fbc284a635c7e1d254c6d5fc16a3de2> <3fbc284a635c7e1d254c6d5fc16a3de2> ] >> startxref 7674 %%EOF
When I check my XHR Call, In the Response Payload I get a string, this string when appended to:
data:application/pdf;base64,XXXXXXXXXXX
generates the PDF and opens it in PDF Viewer.
I request for help with the following:
Open the PDF Viewer in a new tab to view the PDF (current output opens in the same tab and on the url where the list view is displayed but not in pdf viewer, but not in a new tab with probably the AJAX url)
Open a Download Dialog box to save the PDF with a custom, pre-supplied file name.
Any help will be really appreciated.
Regards,
Aashish

Related

GOVUK Frontend with Angular issue with javascript

I'm trying to use the government design system with angular but not having a great deal of success (GDS).
I've gone down the route of using the pre-compiled files rather than npm and styling-wise things are working. But functionality-wise not so much.
I've included the javascript file in my index.html and am not getting any console errors
<!doctype html>
<html lang="en" class="govuk-template ">
<head>
<meta charset="utf-8">
<title>Explosives</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="govuk-template__body ">
<script>
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
</script>
<app-root></app-root>
<script src="/assets/js/govuk-frontend-4.4.1.min.js"></script>
<script>
window.GOVUKFrontend.initAll()
</script>
</body>
</html>
I've tried to use Tabs and Accordion components but they don't behave like they should.
Accordion is showing the sections but not giving me any option to show or hide
when it should look like this
GDS Accordion
And my Tabs Panel looks perfect
But clicking the tabs only adds a hash to the url and nothing changes with the tabs when it should behave like this example.
GDS Tabs
I was using this article as a guide. But it only got me so far (Stack Overflow)
I can only think the javascript file isn't being included properly but I'm at a loss as to what else I can try.
Debugging Steps
create a new angular app using the Angular CLI
download the following files from GDS
govuk-frontend-4.4.1.min.css
govuk-frontend-4.4.1.min.js
add the files to the specific folders
src/assets/css
src/assets/js
update angular.json to include these files
"styles": [
"src/styles.css",
"src/assets/css/govuk-frontend-4.4.1.min.css"
],
"scripts": [
"src/assets/js/govuk-frontend-4.4.1.min.js"
]
update index.html
<!doctype html>
<html lang="en" class="govuk-template ">
<head>
<meta charset="utf-8">
<title>Explosives</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body class="govuk-template__body ">
<script>
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
</script>
<app-root></app-root>
<script src="/assets/js/govuk-frontend-4.4.1.min.js"></script>
<script>
window.GOVUKFrontend.initAll()
</script>
</body>
</html>
create a new component using the angular cli
ng g c tabs
update new component html
<div class="govuk-tabs" data-module="govuk-tabs">
<h2 class="govuk-tabs__title">
Contents
</h2>
<ul class="govuk-tabs__list">
<li class="govuk-tabs__list-item govuk-tabs__list-item--selected">
<a class="govuk-tabs__tab" href="#past-day">
Past day
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#past-week">
Past week
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#past-month">
Past month
</a>
</li>
<li class="govuk-tabs__list-item">
<a class="govuk-tabs__tab" href="#past-year">
Past year
</a>
</li>
</ul>
<div class="govuk-tabs__panel" id="past-day">
<h2 class="govuk-heading-l">Past day</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">Case manager</th>
<th scope="col" class="govuk-table__header">Cases opened</th>
<th scope="col" class="govuk-table__header">Cases closed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">David Francis</td>
<td class="govuk-table__cell">3</td>
<td class="govuk-table__cell">0</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Paul Farmer</td>
<td class="govuk-table__cell">1</td>
<td class="govuk-table__cell">0</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Rita Patel</td>
<td class="govuk-table__cell">2</td>
<td class="govuk-table__cell">0</td>
</tr>
</tbody>
</table>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-week">
<h2 class="govuk-heading-l">Past week</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">Case manager</th>
<th scope="col" class="govuk-table__header">Cases opened</th>
<th scope="col" class="govuk-table__header">Cases closed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">David Francis</td>
<td class="govuk-table__cell">24</td>
<td class="govuk-table__cell">18</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Paul Farmer</td>
<td class="govuk-table__cell">16</td>
<td class="govuk-table__cell">20</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Rita Patel</td>
<td class="govuk-table__cell">24</td>
<td class="govuk-table__cell">27</td>
</tr>
</tbody>
</table>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-month">
<h2 class="govuk-heading-l">Past month</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">Case manager</th>
<th scope="col" class="govuk-table__header">Cases opened</th>
<th scope="col" class="govuk-table__header">Cases closed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">David Francis</td>
<td class="govuk-table__cell">98</td>
<td class="govuk-table__cell">95</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Paul Farmer</td>
<td class="govuk-table__cell">122</td>
<td class="govuk-table__cell">131</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Rita Patel</td>
<td class="govuk-table__cell">126</td>
<td class="govuk-table__cell">142</td>
</tr>
</tbody>
</table>
</div>
<div class="govuk-tabs__panel govuk-tabs__panel--hidden" id="past-year">
<h2 class="govuk-heading-l">Past year</h2>
<table class="govuk-table">
<thead class="govuk-table__head">
<tr class="govuk-table__row">
<th scope="col" class="govuk-table__header">Case manager</th>
<th scope="col" class="govuk-table__header">Cases opened</th>
<th scope="col" class="govuk-table__header">Cases closed</th>
</tr>
</thead>
<tbody class="govuk-table__body">
<tr class="govuk-table__row">
<td class="govuk-table__cell">David Francis</td>
<td class="govuk-table__cell">1380</td>
<td class="govuk-table__cell">1472</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Paul Farmer</td>
<td class="govuk-table__cell">1129</td>
<td class="govuk-table__cell">1083</td>
</tr>
<tr class="govuk-table__row">
<td class="govuk-table__cell">Rita Patel</td>
<td class="govuk-table__cell">1539</td>
<td class="govuk-table__cell">1265</td>
</tr>
</tbody>
</table>
</div>
</div>
import the new component into the app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { TabsComponent } from './tabs/tabs.component';
#NgModule({
declarations: [
AppComponent,
TabsComponent,
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
update app.component.html to include GDS code
<header class="govuk-header " role="banner" data-module="govuk-header">
<div class="govuk-header__container govuk-width-container">
<div class="govuk-header__logo">
<a href="/" class="govuk-header__link govuk-header__link--homepage">
<span class="govuk-header__logotype">
<!--[if gt IE 8]><!-->
<svg aria-hidden="true" focusable="false" class="govuk-header__logotype-crown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132 97" height="30" width="36">
<path fill="currentColor" fill-rule="evenodd" d="M25 30.2c3.5 1.5 7.7-.2 9.1-3.7 1.5-3.6-.2-7.8-3.9-9.2-3.6-1.4-7.6.3-9.1 3.9-1.4 3.5.3 7.5 3.9 9zM9 39.5c3.6 1.5 7.8-.2 9.2-3.7 1.5-3.6-.2-7.8-3.9-9.1-3.6-1.5-7.6.2-9.1 3.8-1.4 3.5.3 7.5 3.8 9zM4.4 57.2c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.5-1.5-7.6.3-9.1 3.8-1.4 3.5.3 7.6 3.9 9.1zm38.3-21.4c3.5 1.5 7.7-.2 9.1-3.8 1.5-3.6-.2-7.7-3.9-9.1-3.6-1.5-7.6.3-9.1 3.8-1.3 3.6.4 7.7 3.9 9.1zm64.4-5.6c-3.6 1.5-7.8-.2-9.1-3.7-1.5-3.6.2-7.8 3.8-9.2 3.6-1.4 7.7.3 9.2 3.9 1.3 3.5-.4 7.5-3.9 9zm15.9 9.3c-3.6 1.5-7.7-.2-9.1-3.7-1.5-3.6.2-7.8 3.7-9.1 3.6-1.5 7.7.2 9.2 3.8 1.5 3.5-.3 7.5-3.8 9zm4.7 17.7c-3.6 1.5-7.8-.2-9.2-3.8-1.5-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.3 3.5-.4 7.6-3.9 9.1zM89.3 35.8c-3.6 1.5-7.8-.2-9.2-3.8-1.4-3.6.2-7.7 3.9-9.1 3.6-1.5 7.7.3 9.2 3.8 1.4 3.6-.3 7.7-3.9 9.1zM69.7 17.7l8.9 4.7V9.3l-8.9 2.8c-.2-.3-.5-.6-.9-.9L72.4 0H59.6l3.5 11.2c-.3.3-.6.5-.9.9l-8.8-2.8v13.1l8.8-4.7c.3.3.6.7.9.9l-5 15.4v.1c-.2.8-.4 1.6-.4 2.4 0 4.1 3.1 7.5 7 8.1h.2c.3 0 .7.1 1 .1.4 0 .7 0 1-.1h.2c4-.6 7.1-4.1 7.1-8.1 0-.8-.1-1.7-.4-2.4V34l-5.1-15.4c.4-.2.7-.6 1-.9zM66 92.8c16.9 0 32.8 1.1 47.1 3.2 4-16.9 8.9-26.7 14-33.5l-9.6-3.4c1 4.9 1.1 7.2 0 10.2-1.5-1.4-3-4.3-4.2-8.7L108.6 76c2.8-2 5-3.2 7.5-3.3-4.4 9.4-10 11.9-13.6 11.2-4.3-.8-6.3-4.6-5.6-7.9 1-4.7 5.7-5.9 8-.5 4.3-8.7-3-11.4-7.6-8.8 7.1-7.2 7.9-13.5 2.1-21.1-8 6.1-8.1 12.3-4.5 20.8-4.7-5.4-12.1-2.5-9.5 6.2 3.4-5.2 7.9-2 7.2 3.1-.6 4.3-6.4 7.8-13.5 7.2-10.3-.9-10.9-8-11.2-13.8 2.5-.5 7.1 1.8 11 7.3L80.2 60c-4.1 4.4-8 5.3-12.3 5.4 1.4-4.4 8-11.6 8-11.6H55.5s6.4 7.2 7.9 11.6c-4.2-.1-8-1-12.3-5.4l1.4 16.4c3.9-5.5 8.5-7.7 10.9-7.3-.3 5.8-.9 12.8-11.1 13.8-7.2.6-12.9-2.9-13.5-7.2-.7-5 3.8-8.3 7.1-3.1 2.7-8.7-4.6-11.6-9.4-6.2 3.7-8.5 3.6-14.7-4.6-20.8-5.8 7.6-5 13.9 2.2 21.1-4.7-2.6-11.9.1-7.7 8.8 2.3-5.5 7.1-4.2 8.1.5.7 3.3-1.3 7.1-5.7 7.9-3.5.7-9-1.8-13.5-11.2 2.5.1 4.7 1.3 7.5 3.3l-4.7-15.4c-1.2 4.4-2.7 7.2-4.3 8.7-1.1-3-.9-5.3 0-10.2l-9.5 3.4c5 6.9 9.9 16.7 14 33.5 14.8-2.1 30.8-3.2 47.7-3.2z"></path>
</svg>
<!--<![endif]-->
<!--[if IE 8]>
<img src="/assets/images/govuk-logotype-crown.png" class="govuk-header__logotype-crown-fallback-image" width="36" height="32">
<![endif]-->
<span class="govuk-header__logotype-text">
GOV.UK
</span>
</span>
</a>
</div>
</div>
</header>
<div class="govuk-width-container ">
<main class="govuk-main-wrapper " id="main-content" role="main">
<app-tabs></app-tabs>
</main>
</div>
<footer class="govuk-footer " role="contentinfo">
<div class="govuk-width-container ">
<div class="govuk-footer__meta">
<div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
<svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.2 195.7" height="17" width="41">
<path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
</svg>
<span class="govuk-footer__licence-description">
All content is available under the
<a class="govuk-footer__link" href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence v3.0</a>, except where otherwise stated
</span>
</div>
<div class="govuk-footer__meta-item">
<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/">© Crown copyright</a>
</div>
</div>
</div>
</footer>
run the app using npm start
You'll see that the tab component isn't working as expected

Figured out a solution, though may be a bit of a workaround.
I removed the script tags from index.html, and instead am relying on the scripts array in angular.json to handle all the javascript.
I am now using the javascript file from the node_module folder; though it should work the same with the min.js file I had before.
Also created an extra js file, which would literally just run the initAll() method
// govuk-init.js
document.addEventListener("DOMContentLoaded", function(event) {
window.GOVUKFrontend.initAll();
})
// angular.json
"scripts": [
"node_modules/govuk-frontend/govuk/all.js",
"src/assets/js/govuk-init.js"
]
This way I know the initAll method will definitely run after all the other code has been run, and it seems to function correctly now.

Throwing my own validation message with custom CSS | URL validation

I am trying to render the error message in my HTML form when a non-url is submitted, as I need to be able to easily adjust the position and apply a CSS style.
The reason I am going through this and not just simply using type=url, as I do not like the standard chrome validation error message, and I want to throw my own beneath my form.
Currently, no error message is showing when a non-url is submitted, and there are no errors in my console. Any thoughts?
function onInvalid(ev) {
ev.preventDefault();
document.getElementById('errorMessage').innerText = "Yikes! That's not a valid URL";
}
#errorMessage {
display: none;
color: #EB7051;
font-size: 15px;
}
<form method="POST" id="Submit">
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "
></path>
</svg>
</div>
<input id="search" name="url" placeholder="Paste a domain here" type="url" required oninvalid="onInvalid(event)" />
</div>
<div class="input-field second-wrap">
<button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">
SEARCH
</button>
</div>
</div>
<p class="errorMessage" id="errorMessage">Yikes! That's not a valid URL.</p>
</form>
Could it be because the display: none ? I only want it to show when a non valid url (does not contain http:// or https://), and then disappear when a valid url is submitted
Edit of desired result:

Yes. display: none is the culprit. And for hiding the error message when valid url is submitted, you'll just need to set the innterText as empty string ('') when the input is valid.
Here's my solution: https://jsfiddle.net/mqvynw3L/
<html>
<head>
<style>
#errorMessage {
color: #EB7051;
font-size: 15px;
}
</style>
</head>
<body>
<form method="POST" id="Submit">
<div class="inner-form">
<div class="input-field first-wrap">
<div class="svg-wrapper">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z "
></path>
</svg>
</div>
<input id="search" name="url" placeholder="Paste a domain here" type="url" required oninvalid="onInvalid(event)" />
</div>
<div class="input-field second-wrap">
<button id="button" class="btn-search" onclick="searchIt()" value="press" type="submit">
SEARCH
</button>
</div>
</div>
<p class="errorMessage" id="errorMessage"></p>
</form>
</body>
<script>
function runValidation() {
const inputEl = document.getElementById('search');
const errorEl = document.getElementById('errorMessage');
console.log('Validating the input value >>>', inputEl.value);
if (inputEl && typeof inputEl.checkValidity === 'function') {
const isValid = inputEl.checkValidity();
console.log('IsValid >>>', isValid);
errorEl.innerText = !isValid ? "Yikes! That's not a valid URL" : '';
return false;
}
return true;
}
function searchIt(ev) {
if (runValidation()) {
console.log('Search it .>>');
}
}
function onInvalid(ev) {
ev.preventDefault();
}
</script>
</html>
Since, oninvalid also runs only during submitting, it's best to create your own validation (I'm using the browser's native validator with checkValidity), and only execute your submit actions (eg: calling API) if the input is valid. This way you have more control over the logic and in case you decide to run the validation when the input changes, you can just call runValidation function for onkeypress event.

Uncaught TypeError: Cannot read property 'cells' of undefined jspdf

I am having a velocity template file which I am trying to convert into pdf. After googling a bit I found a framework called JSPDf.
When I am trying to use it it gives me error Uncaught TypeError: Cannot read property 'cells' of undefined jspdf.
function html_to_pdf() {
var pdf = new jsPDF('p', 'pt', 'letter');
// source can be HTML-formatted string, or a reference
// to an actual DOM element from which the text will be scraped.
AJS.log(pdf)
source = $('#productcanvas')[0];
AJS.log(source)
// we support special element handlers. Register them with jQuery-style
// ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
// There is no support for any other type of selectors
// (class, of compound) at this time.
specialElementHandlers = {
// element with id of "bypass" - jQuery style selector
'#bypassme': function (element, renderer) {
// true = "handled elsewhere, bypass text extraction"
return true
}
};
AJS.log("Special Elements Handler")
AJS.log(specialElementHandlers)
margins = {
top: 80,
bottom: 60,
left: 40,
width: 522
};
AJS.log("Margins")
AJS.log(margins)
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.fromHTML(
source, // HTML string or DOM elem ref.
margins.left, // x coord
margins.top, { // y coord
'width': margins.width, // max width of content on PDF
'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Test.pdf');
}, margins);
}
velocity code:
<div class="tabs-pane" id="productcanvas" role="tabpanel" aria-hidden="true" style="width: 100%">
<h2>Product Canvas</h2>
<hr>
<div class="aui-page-panel-nav" id="targetgroup" style="display:inline-block; width:calc(99% / 3);">
<h2 style="text-align:center;">Target Group</h2>
<hr>
<table class="aui" id="targetgroup_table" style="margin-top: 10px; border-collapse:separate;">
<tbody id="targetgroup_table">
#set ($size = $targetGroupConfs.size())
#foreach($i in [0..$size])
#if($i < $size)
<tr class="product-discovery-big-picture" data-key="$targetGroupConfs.get($i).actor" >
<td><span class="name" style="text-align: center">$targetGroupConfs.get($i).actor</span>
<span class="remove aui-icon aui-icon-small aui-iconfont-remove actions" style="float: right"
title="Remove project" data-key="$targetGroupConfs.get($i).actor"
onclick="transit_time_remove_proj('$targetGroupConfs.get($i).actor')">
</span>
</td>
</tr>
#end
#end
</tbody>
</table>
</div>
<div class="aui-page-panel-nav" id="bigpicture" style="display:inline-block; width:calc(99% / 3);">
<h2 style="text-align:center">Big Picture</h2>
<hr>
<table class="aui" id="bigpicture_table" style="margin-top: 10px;border-collapse:separate;">
<tbody id="targetgroup_table">
#set ($size = $bigPictureConfs.size())
#foreach($i in [0..$size])
#if($i < $size)
<tr class="product-discovery-big-picture" data-key="$bigPictureConfs.get($i).impact" >
<td><span class="name">$bigPictureConfs.get($i).impact</span>
<span class="remove aui-icon aui-icon-small aui-iconfont-remove actions" style="float: right"
title="Remove project" data-key="$bigPictureConfs.get($i).impact"
onclick="transit_time_remove_proj('$bigPictureConfs.get($i).impact')">
</span>
</td>
</tr>
#end
#end
</tbody>
</table>
</div>
<div class="aui-page-panel-nav" id="productdetails" style="display:inline-block; width:calc(99% / 3);">
<h2 style="text-align:center">Product Details</h2>
<hr>
<hr>
<table class="aui" id="bigpicture_table" style="margin-top: 10px;border-collapse:separate;">
<tbody id="targetgroup_table">
#set ($size = $productDetailsConfs.size())
#foreach($i in [0..$size])
#if($i < $size)
<tr class="product-discovery-big-picture" data-key="$productDetailsConfs.get($i).issueId" >
<td>#*<span>$!{productDetailsConfs.get($i).getIssueID().replace('"',"")}</span>*#
<span><a class=colored-link-1 href="http://lp-alok:2990/jira/browse/$productDetailsConfs.get($i).getIssueID()" target=_blank>$productDetailsConfs.get($i).getIssueID()</a></span>
#* <span class="remove aui-icon aui-icon-small aui-iconfont-remove actions"
title="Remove project" data-key="$productDetailsConfs.get($i).issueId"
onclick="transit_time_remove_proj('$productDetailsConfs.get($i).issueId')">
</span>*#
</td>
</tr>
#end
#end
</tbody>
</table>
</div>
</div>
</div>

This is a very serious issue and still not has been solved.
This is because jsPDF don't recognize table cell to convert in pdf, to overcome I replace table HTML to list.

Protractor extract data from a repeater

Starting testing Angular JS application with protractor I would like to extract search results of my application.
To do so I need to iterate through a repeater "objects in objects" and extract the name coloumn :
I am using this code :
var result = element.all(by.repeater('object in objects').column('name'))
result.then(function(arr) {
//Traverse the repeater and extract data
for (var i = 0; i < arr.length; ++i) {
arr[i].getText().then(function(text) {
console.log( text);
console.log( arr.length);
});
}
This code displays only the first 6 elements even when my serach result is far more the 6.
Output :
TSK(AGR020J)(000)(AGR020JN00)(000)
40
40
TSK(ASA700J)(000)(ASA700JU00)(000)
40
40
TSK(AGR060J)(000)(AGR060JN00)(000)
40
40
TSK(AGT001H)(000)(AGT001HS20)(000)
40
40
TSK(ANF010J)(000)(ANF010JU00)(000)
40
40
TSK(AGT001H)(000)(AGT001HN20)(000)
40
40
40
40
....
6 is the number of elements in the first row of my results, I dont' know why the search doese not include remaining rows?
And here is the HTML temlate :
<div id="jobHolder" class="thumbJobs" style="height: 326px; overflow: hidden;" tabindex="5027">
<div id="job_1" class="job ng-scope" ng-click="showJobHoverInfo($index+1)" ng-repeat=
"object in objects" ng-class="object.jobStyle">
<div id="job_1_viewerEye" class="viewerEye" ng-click=
"viewerEye($event,$index+1, object)" ng-class="object.viewerEyeClass"></div>
<div id="job_1_jobBigPicto" class="jobBigPicto transition_2_opa">
<div id="job_1_jobsSmallPictos" class="jobsSmallPictos transition_2_opa">
<div id="job_1_jobDown" class="jobDown transition_2_opa">
<div id="job_1_jobHoverInfo" class="jobHoverInfo" ng-click=
"hideJobHoverInfo($event,$index+1)" style="left: -100%; top: 272px;"></div>
<div id="job_2" class="job ng-scope" ng-click="showJobHoverInfo($index+1)"
ng-repeat="object in objects" ng-class="object.jobStyle">
<div id="job_2_viewerEye" class="viewerEye" ng-click=
"viewerEye($event,$index+1, object)" ng-class="object.viewerEyeClass">
</div>
<div id="job_2_jobBigPicto" class="jobBigPicto transition_2_opa">
<div id="job_2_jobsSmallPictos" class="jobsSmallPictos transition_2_opa">
<div id="job_2_jobDown" class="jobDown transition_2_opa">
<div id="job_2_jobHoverInfo" class="jobHoverInfo" ng-click=
"hideJobHoverInfo($event,$index+1)" style="left: -100%; top: 272px;">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sorry I think I have pasted the wrong HTML you can see it now after modification :
ng-repeat= "object in objects"

Character encoding and code cleaning...help pls

i am new of srackoverflow and i have a problem that i hope u guys can help me fix, since i broke my arm i need to get a faster way to copy and paste emails template into a email editor (in Siebel)...but so far i am having trouble because the html page i "wrote' is quite messy (i'm not good at it, i just take parts here and there and try to make them working together).
My biggest issue is that when i past the template in to the siebel email editor, all the character with axcent they come out wrong (like ò or ì ...and many other)
can smone pls help me in fixing the code properly??
I know that the codedon't work properly on firefox but i only need it to work on Ie (and apparently work) and most of all i need it working properly on siebel (automotive).
heres thesupermessy code
<!-- CSS : AddOns - WorldA -->
<!--<link rel="alternate stylesheet" title="styleA" type="text/css" media="all"
href="core/css/D_worldA.css" />-->
<!-- JavaScript : Librarys: jQuery-->
<script type="text/javascript"
src="http://flash.nissan.it/core/lib/jQuery/jquery-1.2.6.min.js"></script>
<!-- JavaScript : Librarys: swfObject-->
<script type="text/javascript"
src="http://flash.nissan.it/core/lib/swfobject/swfobject.js"></script>
<script type="text/javascript"
src="http://flash.nissan.it/flash/devenv/deploy/js/swfaddress.js"></script>
<!-- JavaScript : Include and embedded versions-->
<script type="text/javascript"
src="http://flash.nissan.it/core/scripts/document.ready.js"></script>
<script type="text/javascript"
src="http://flash.nissan.it/core/scripts/script.js"></script>
<script type="text/javascript" >
// <![CDATA[
function resizeHeader(val){
var flashHeader = document.getElementById('B_MediaNavigationLevel1');
flashHeader.style.height=val+'px';
var flashObject = document.getElementById('shell_header');
flashObject.style.height=val+'px';
}
function resizeFooter(val){
var flashFooter = document.getElementById('B_MediaNavigationLevel2');
flashFooter.style.height=val+'px';
var flashFooterObject = document.getElementById('shell_footer');
flashFooterObject.style.height=val+'px';
}
// ]]>
jQuery(document).ready(function() {
// HEADER
soHead = new SWFObject
("http://www.nissan.it/flash/devenv/deploy/shell/swf/shell.swf", "shell_header", "100%", "100%",
"10.0.45.2", "#ffffff");
soHead.useExpressInstall
('http://www.nissan.it/flash/devenv/deploy/shell/swf/expressinstall.swf');
soHead.addVariable("confFile", "http://www.nissan.it/IT/it.-
shellconf.conf");
soHead.addVariable("manifest", "http://www.nissan.it/IT/it.-
headerContent-Single-nointernal-trvheaderxml.xml");
soHead.addVariable("trvheader_resizeFunc", "resizeHeader" );
soHead.addVariable("trvheader_emebed", "true" );
soHead.addParam( "allowScriptAccess", "always" );
soHead.addVariable("verbose", "false" );
soHead.addVariable("fps", "false" );
soHead.addVariable("trv_header_selected_nodeid", "glossary" );
soHead.addParam( "wmode", "transparent" );
// FOOTER
soFoot = new SWFObject
("http://www.nissan.it/flash/devenv/deploy/shell/swf/shell.swf", "shell_footer", "100%", "100%", "10.0.45.2", "#ffffff");
soFoot.useExpressInstall
('http://www.nissan.it/flash/devenv/deploy/shell/swf/expressinstall.swf');
soFoot.addVariable("confFile", "http://www.nissan.it/IT/it.-
shellconf.conf" );
soFoot.addVariable("manifest",
"http://www.nissan.it/IT/it/glossary.-trvbottomNavxml.xml");
soFoot.addVariable("trvfooter_resizeFunc", "resizeFooter" );
soFoot.addParam( "allowScriptAccess", "always" );
soFoot.addVariable("trvfooter_emebed", "true" );
soFoot.addVariable("verbose", "false" );
soFoot.addVariable("fps", "false" );
soFoot.addParam( "wmode", "transparent" );
soHead.write( "B_MediaNavigationLevel1" );
soFoot.write( "B_MediaNavigationLevel2" );
});
</script>
<!-- trackingHtmlContent -->
</head><body marginheight="0" topmargin="0" marginwidth="0" leftmargin="0" class="body">
<div id="theDocument">
<div id="A_body">
<div class="topDecoration"></div>
<div class="middleDecoration">
<div id="B_content" class="glossaryDisplay">
<!-- component zone 2 -->
<div class="stdDisplay">
<!-- component zone 3-->
<Script Language=JavaScript>
function copyToClipboard(ID){
ctrlRange = document.body.createControlRange();
ctrlRange.add(document.all(ID));
ctrlRange.execCommand("Copy");
}
</Script>
<style type="text/css">
#coolmenu a{
font: bold 13px Verdana;
padding: 5px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}
html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}
#coolmenu a:hover{
background-color: black;
color: white;
}
</style>
<div id="coolmenu">
<table width="100%" border="0">
<tr>
<td><ol class="descriptionList">
<li class="openDefault" >Concessionario Aut.</li>
<!-- "Access description from" -->
<li ><a href="#templ2" title="Centro Assistenza Fiducia">Centro Assistenza
Fiducia</a></li>
<!-- "Access description from" -->
<li >CETOC</li>
<!-- "Access description from" -->
<li >Dati Mancanti</li>
<!-- "Access description from" -->
<li >Contatti Nissan Italia</li>
<!-- "Access description from" -->
<li >Inviare Richiesta Scritta Roma </li>
<!-- "Access description from" -->
<li >Richiesta Info+Link</li>
<!-- "Access description from" -->
<li ><a href="#templ8" title="Libretto uso/manutenzione o garanzia">Libretto
uso/manutenzione o garanzia</a></li>
<!-- "Access description from" -->
<li ><a href="#templ9" title="Elenco Concessionari GT-R">Elenco Concessionari GT-
R</a></li>
<!-- "Access description from" -->
<li ><a href="#templ10" title="Infiniti: Info Request+link">Infiniti: Info Request
+link</a></li>
<li >Qashqai Tempi di attesa</li>
<!-- "Access description from" -->
<li >Sconti categorie speciali - legge 104 etc.</li>
</ol></td>
<td><ol class="descriptionList">
<!-- "Access description from" -->
<li >Disponibilita veicoli presso cocessionari </li>
<!-- "Access description from" -->
<li >Risorse umane -cv - etc.</li>
<li >Reclamo: segnalazione e codice</li>
</ol></td>
</tr>
</table>
<!-- "Access description from" -->
</ol>
</div>
<div class="glossaryContainer">
<div class="glossaryTab" id="templ1">Concessionario Autorizzato <br> <input type=button value='Copy Table To Clipboard' onClick="copyToClipboard('thisTable')">
<table id='thisTable' class=MsoNormalTable border=1 cellspacing=0 cellpadding=0>
<tr id=>
<td id="t1" width=852>email template in here</td>
</tr>
</table>
</div>
</div>
<a class="anchorLink" href="#A_body">Torna sù</a>
</div>
<!-- component zone 4 (title area)-->
</div>
<!-- MAIN DATA CONTAINER //////////////////////////////////////////////////////-->
</div>
</div>
</div>
</body>

You should put this string in "head" tag where meta usually goes
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

Categories