why is my mongodb chart embedding sdk not working? - javascript

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());

Related

Firefox addon popup JavaScript not working

My 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=, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<title>Youpotify</title>
</head>
<body>
<div class="download">
<div class="video">
<button id="video">Download this video</button>
</div>
<div class="playlist">
<button id="playlist">Download this playlist</button>
</div>
<div class="channel">
<button id="channel">Download this channel</button>
</div>
</div>
<script>
document.getElementById("video").addEventListener("click", () => {
document.getElementById("video").style.backgroundcolor = "red";
});
</script>
</body>
</html>
I loaded this addon on Temporary Extension and I click the button but the background color did not change.
I wanted to run my JavaScript file in firefox addon popup HTML file, but it didn't work.

There are a couple of potential issues here:
First, inline Javascript (inside <script></script> tags) is not permitted by default.
To include Javascript to your popup, you need to put it into a separate Javascript file and reference is with:
<script src="index.js"></script>
where your index.js is in the same folder and has your code:
document.getElementById("video").addEventListener("click", () => {
document.getElementById("video").style.backgroundColor = "red";
});
Second,
document.getElementById("video").style.backgroundcolor = "red";
has incorrect attribute, it should be style.backgroundColor with a capital C.

map function is not creating any div inside myContent div when I am using innerHTML for myContent div ,No result is coming ,no error in console

index.html
You can See here myContent classnamed div is there inside which I want to add div of api data from index.js file.
<!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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="myContent">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
Here you can see I have used map function to map through each data of storeData array, but it is not working, DOM shows nothing
var storeData=[]
const getData=()=>{
axios.get("https://api.coingecko.com/api/v3/coins/markets?
vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false").then(
res=>{
storeData.push(res.data)
//console.log(storeData)
}
)
}
getData();
const myContent=document.querySelector(".myContent")
myContent.innerHTML=storeData.map((elem)=> {
return`
<div class='card'>
<div class="card-content">
<h3>${elem.name}</h3>
<h3>${elem.symbol}</h3>
<h3>${elem.current_price}</h3>
</div>
</div>
`
});

I am using ckeditor5 and trying to get the text into a var using JS but it only give me the NULL error ... Tried everything on net Still not working

HTML
<!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">
<link rel="stylesheet" href="textEditor.css">
<title>Text Editor</title>
</head>
<body>
<div id="toolbar-container"></div>
<div class="container">
<div id="editor" name="content">
</div>
</div>
<script src="../ckeditor/ckeditor.js"></script>
<script>
DecoupledEditor.create( document.querySelector( '#editor' ) ).then( editor => {
const toolbarContainer = document.querySelector( '#toolbar-container' );
toolbarContainer.appendChild( editor.ui.view.toolbar.element );
} )
.catch( error => {
console.error( error );
} );
</script>
</script>
</body>
</html>
After watching few videos I thought Classic Editor would be easy to use .. but still the error is same...
JAVASCRIPT
function insertData(){
var blog = document.querySelector("content");
console.log(blog.textContent);
}
I also tried doing this using getElementById...
But still not working...
Error Image

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

jsPDF is not defined error in html project?

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>

Categories