jsPDF is not defined error in html project? - javascript

I am implementing jsPdf example and have sample html project in which i included jquery and jspdf cdn link to generate pdf. Here is my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script> src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<body>
<div id="content">
<p>Testing testing testing</p>
</div>
<button type="button" id="export">Export To Pdf</button>
<script>
var doc = new jsPDF();
$('#export').click(function () {
doc.fromHTML($('#content').html(), 15, 15, {
'width': 170
});
doc.save('sample-file.pdf');
});
</script>
</body>
</html>
But it is giving this error
Uncaught ReferenceError: jsPDF is not defined
at index.html:19
What's wrong in my code?

The error is in this line-
<script> src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"</script>
src should be inside the script tag
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>
For exporting and rendering
$('#export').click(() => {
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
pdf.save('web.pdf');
});
})

fix your script tag of https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js to
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js"></script>

Related

javascript ,automatically show the content of the file on the HTML page

I have a text file (a.txt) in the same folder as my HTML file (index.html), is there any javascript function that automatically on page loading, reads the content of that text file and put it in the designated tag element
I used the following code but it's not working
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" >
<style type="text/css">
</style>
<script type="text/javascript">
async function getTextFile() {
const fileText = await fetch("a.txt").text();
const tagElement = document.getElementById("about_layer");
tagElement.innerText = fileText;
}
window.onload = getTextFile;
</script>
</head>
<body>
<div id="about_layer">
</div>
</body>
</html>

why is my mongodb chart embedding sdk not working?

My file directory is:
chartTesting
index.html
chart1.js
chart2.js
I am trying to desplay the chart in my website using mongodb chart embedding sdk,
I have index.html, chart1.js and chart2.js file in same folder.
I have been stuck in this problem for days,
I have change the script src in many different ways.
thanks for helping:
index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<div id="chart1"></div>
<button id="refresh1">Refresh this chart</button>
<script src="chart1.js"></script>
</div>
<div>
<div id="chart2"></div>
<button id="refresh2">Refresh this chart</button>
<script src="chart2.js"></script>
</div>
</body>
</html>
chart1.js code
import ChartsEmbedSDK from '#mongodb-js/charts-embed-dom';
const sdk = new ChartsEmbedSDK({
baseUrl: "https://charts.mongodb.com/charts-project-0-qumgu"
});
const chart1 = sdk.createChart({
chartId: "1e32b53f-6de2-45d2-863d-025b85c8bec9",
weidth: 400,
height: 650,
});
chart1.render(document.getElementById('chart1'));
document
.getElementById('refresh1')
.addEventListener('click', () => chart.refresh());
`
chart2.js code
import ChartsEmbedSDK from '#mongodb-js/charts-embed-dom';
const sdk = new ChartsEmbedSDK({
baseUrl: 'https://charts.mongodb.com/charts-project-0-qumgu',
});
const chart = sdk.createChart({
chartId: '98a3a7ad-8ddd-4f7e-971e-586157ec9379',
});
// render the chart into a container
chart
.render(document.getElementById('chart2'))
.catch(() => window.alert('Chart failed to initialise'));
// refresh the chart whenenver #refreshButton is clicked
document
.getElementById('refresh2')
.addEventListener('click', () => chart.refresh());

amp-script Script hash not found. amp-script[script="hello-world"]

I'm trying to use an amp-script but I get this error:
"[amp-script] Script hash not found. amp-script[script="hello-world"].js must have "sha384-BdjJFLYaZaVK-HgidJ2OFtpYsczYQc4N42NgKo7MOkF88iPbpdDWPgf86Y6PyEKO" in meta[name="amp-script-src"]. See https://amp.dev/documentation/components/amp-script/#security-features."
error image
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<meta class="trackPerformanceTag" content="AMP">
<script src="https://cdn.ampproject.org/v0.js" async></script>
<script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
<meta name="amp-script-src" content="sha384-generated-sha">
<title>title</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
<amp-script layout="container" script="hello-world" class="amp-script-sample">
<button id="hello2">Click!</button>
</amp-script>
<script id="hello-world" type="text/plain" target="amp-script">
const button = document.getElementById('hello2');
button.addEventListener('click', () => {
const h1 = document.createElement('h1');
h1.textContent = 'Hello World 2!';
document.body.appendChild(h1);
});
</script>
</body>
</html>
You need to copy full hash shown in the error message in dev tools console.
In this case;
sha384-BdjJFLYaZaVK-HgidJ2OFtpYsczYQc4N42NgKo7MOkF88iPbpdDWPgf86Y6PyEKO
and paste it to meta in the header:
<meta name="amp-script-src" content="PUT_THE_SHA_HERE">
Every time you will change something in the script new hash will be generated and you need copy/paste it again.
See the screen with error form the dev tools console

Why is this JavaScript button click failing to call a function?

I am beginner of javascript.
but it doesn't work. plz help me.
I am using Microsoft VSCode.
This is my main.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="javascript" src="script.js"/>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css"/>
<link rel="stylesheet" href="style.css"/>
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
</body>
</html>
This is script.js
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function(){
console.log("onclick event start");
};
You need change the:
<link rel="javascript" src="script.js"/>
into:
<script src="script.js"></script>
first choice:put script at the bottom of the body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="script.js"></script>
<link rel="stylesheet" href="https://unpkg.com/papercss#1.4.1/dist/paper.min.css" />
<link rel="stylesheet" href="style.css" />
<title>Ultimate R-S-P</title>
</head>
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span></h1>
</div>
<script>
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
</script>
</body>
</html>
second choice:move your script content to the window.onload=function(){}
window.onload = function() {
console.log("start!");
var loginBtn = document.getElementById("loginbtn");
loginBtn.onclick = function() {
console.log("onclick event start");
};
};
if you choose this,you have to change your script tag
<link rel="javascript" src="script.js"/>
to
<script src="script.js"></script>
The < link > tag defines a link between a document and an external resource.
The < link > tag is used to link to external style sheets.
The < script > tag is used to define a client-side script (JavaScript).
So, you need to change this code:
<link rel="javascript" src="script.js"/>
into this:
<script type="text/javascript" src="script.js"></script>
Use this tag not the link tag
<script src="script.js"></script>
Also fix your html you are missing an h1 end tag
<h1><span class="badge" id="loginbtn">main</span></h1>
Add Script tag as below.
You have used link tag instead of script.
<script type="text/javascript" src="script.js">
actually i was confused.
that was location of javascript.
solution
<body>
<div class="login_box">
<h1><span class="badge" id="loginbtn">main</span>
</div>
**<script type="text/javascript" src="script.js"></script>**
</body>
i put the javascript code in the body.

Change meta tag content dynamically through javascript

I want to change the meta tag content i.e. refresh rate and url dynamically using javascript. Using a button to enable javascript function. Tried 3 alternatives but not working. Please help.
Thanks,Amresh
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag"
content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
<!--document.querySelector('meta[name="description"]').setAttribute("content","5;URL=http://google.co.in");-->
<!--document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");-->
var m = document.createElement('meta');
m.name = 'description';
m.id = 'mymetatag';
m.content = '5;URL=http://google.co.in';
m.HTTP-EQUIV= 'refresh';
document.head.appendChild(m);
}
</script>
This works for me.
The issue could have been that you tried a first code which did not work and you commented the code with HTML comments <!-- [...] -->instead of Javascript comments: // [...] or /** [...] */.
<!DOCTYPE html>
<html>
<head>
<meta HTTP-EQUIV="refresh" name="description" id="mymetatag" content="5;URL=http://localhost:6985/ChartJSDemo/Is_Mainpage.html">
<meta charset="ISO-8859-1">
<title>Processing Details</title>
<link rel="stylesheet" type="text/css" href="css/MF_job_failTable.css">
</head>
<body>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("mymetatag").setAttribute("content", "5;URL=http://google.co.in");
}
</script>
</body>
</html>
I looks like you misuse the functionality of metatags, JS doesn't save the state between requests. And, BTW, you can do reload/redirect using the javascript itself.

Categories