javascript function is not working when i add firebase sdk i - javascript

I want add to firebase SDK in external JavaScript file and link my JavaScript file with index.html and I want to create all functions in an external JavaScript file but after putting code of SDK my function is not working and no output appears in the console.
//code of main.js
import { initializeApp } from "firebase/app";
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyBbXn11EFZ-B4UutkGbbvFFhddnqWFpDWc",
authDomain: "test-app-c0aed.firebaseapp.com",
projectId: "test-app-c0aed",
storageBucket: "test-app-c0aed.appspot.com",
messagingSenderId: "797893271922",
appId: "1:797893271922:web:5fc8bade62add0ca573deb"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const provider = new firebase.auth.GoogleAuthProvider();
// event and function for login button
document.getElementById('login').addEventListener("click",login);
function login()
{
console.log('login');
firebase.auth().signInWithPopup(provider).then( res => {
console.log(res);
})
}
// event and function for log out button
document.getElementById('logout').addEventListener("click",logout);
function logout(){
console.log('logout');
}
//code of index.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="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div id="dashboard">
<div id="userDetails">
<p>Welcome to dashboard</p>
</div>
<div id="logout">
<button id="logoutButton">Logout</button>
</div>
</div>
<div id="loginForm">
<button id="login">SignInWithGoogle</button>
</div>
</div>
<script src="main.js"></script>
</body>
</html>

try to add type="module" to script <script type="module" src="main.js"></script> and use local server to host index.html because module will not working when you just open index.html in browser file://

Related

db is not defined when i want to get data using javascript and firebase

I want to get the data from my database using JavaScript and firebase, I have configured the firebase connection, but it gives me error: db is not defined.
I think the problem comes from the database configuration with firebase.
because the tutorial configuration is different than that.
I found this configuration in a post : previous solution
db.collection('courses').get()
.then(res => console.log(res))
.catch(err => console.error(err))
<!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>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<div class="container my-5">
<div class="row">
<div class="col-4 mx-auto">
<h3 class="my-3 text-center"><span class="badge badge-info">MARZOUK</span></h3>
<form>
<div class="input">
<div class="input-group">
<input type="text" class="form-control" id="course" placeholder="add new course">
<div class="input-group-apprend">
<input type="submit" class="btn btn-outline-secondary">
</div>
</div>
</div>
</form>
</div>
</div>
<ul class="list-group mt-2">
<li class="list-group-item">element</li>
<li class="list-group-item">element</li>
<li class="list-group-item">element</li>
</ul>
</div>
<script type="module">
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js';
import { getFirestore, collection, getDocs } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-firestore-lite.js';
const firebaseConfig = {
apiKey: "Myapikey",
authDomain: "javascript-3bbaa.firebaseapp.com",
projectId: "javascript-3bbaa",
storageBucket: "javascript-3bbaa.appspot.com",
messagingSenderId: "<myId>",
appId: "<MyappId>"
};
// Initialize Firebase
const firebase = initializeApp(firebaseConfig);
const db = getFirestore(firebase);
</script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>
const db = getFirestore(firebase);
You define db as the very last thing in your module. It then immediately falls out of scope and will be garbage collected.
If you want to use it, then you need to do so in the same scope.
Presumably the JS you put in the JavaScript box of your live demo is from <script src="script.js"></script>. Move it into the module where you define db.

How to start an application dynamically with second.html in Vue3?

I'm developing a vue3 project.
main.js;
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
import store from "./store";
app.use(store);
import router from "./router/index";
app.use(router);
...
//just try...
app.mount("#app");
and my public/index.html
<!DOCTYPE html>
<html lang="">
<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="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
body {
margin: 0px;
}
</style>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
And my App.vue;
<template>
<button #click=openNewPage()>create new page</button>
<span>{{message}}</span>
<router-view />
</template>
<script>
methods:{
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
}
}
</script>
my store object;
export default createStore({
state: {
message:'Hello'
}
});
and my second.html;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Cache-Control" content="no-store" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<title></title>
</head>
<body>
<div id="appSecond" style="height:100%">
<template>
<span>{{message}}</span>
</template>
</div>
</body>
</html>
When I open the second screen with the OpenNewPage method, I cannot access both the store object and the components I want to use do not work. I was try it;
second.js
const app2 = createApp({
});
export { app2 };
and my method
import { app2 } from "../second.js";
openNewPage(){
var t = window.open('second.html','newMonitor','height=700,width=700,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');
if (t) {
t.onload = function () {
t.window.app = app2;
app2.mount("#appSecond");
}
}
}
Somehow I try to run in second.html but I get a warning like "[Vue warn]: Failed to mount app: mount target selector". The code didn't work anyway. Can you help me?
openNewPage() can't run a script for the newly opened page; only the new page could run its own scripts. When openNewPage() tries app2.mount(), it's running that code on its own page (not the new one), leading to the error you observed.
Solution
Remove the mounting code from openNewPage() so that it only opens the new page:
export default {
openNewPage() {
window.open('second.html', …);
}
}
Update second.html to load the script that mounts the app, and remove the unnecessary <template> within the <div id="appSecond">:
<body>
<div id="appSecond" style="height:100%">
<span>{{message}}</span>
</div>
<script src="./second.js"></script>
</body>
In second.js, add the code that mounts your app:
// second.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#appSecond')

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

Firebase in Tizen Web App

I'm trying to request my firebase from a tizen web app. So I have added the firebase config to script section, then I need to access my firebase object from the javascript but I don't know how to proceed, how to declare 'firebase' variable to be linked to the firebase lib? here is my code :
tizen studio screenshot
or
function init() {
// How to get firebase object ?
firebase.database()
.ref('/test')
.once('value').then(function(snapshot) {
var value = snapshot.val();
document.querySelector("#foo")
.innerHTML = value;
});
...
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1, user-scalable=no" />
<title>Hello Tizen</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "blabla",
authDomain: "blabla",
databaseURL: "blabla",
projectId: "blabla",
storageBucket: "blabla",
messagingSenderId: "blabla"
};
firebase.initializeApp(config);
</script>
</head>
<body>
<div id="container">
<div id="contents">
<span id="foo">To replace </span>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
EDIT :
adding <access origin="*" subdomains="true"></access> to config.xml solve my internet connection issue
You seem to have forgotten to put these scripts as well
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase-database.js"></script>
firebase-app.js should always come first.

How to display LinkedIn sign in button

Hi I'm trying to get the LinkedIn api working at a basic level. Where I make an HTML page that shows the LinkedIn sign in button. I followed the steps on the LinkedIn developer page and copied the code directly. I'm wondering if I have an issue with the OAuth2.0?
<!DOCTYPE html>
<html lang="en">
<head>
<title>LinkedIn Api</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Linked In java script Api initialize -->
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: myKey
onLoad: onLinkedInLoad
authorize: true
</script>
<script type="text/javascript" src="//platform.linkedin.com/in.js">
// Setup an event listener to make an API call once auth is complete
function onLinkedInLoad() {
IN.Event.on(IN, "auth", getProfileData);
}
// Handle the successful return from the API call
function onSuccess(data) {
console.log(data);
}
// Handle an error response from the API call
function onError(error) {
console.log(error);
}
// Use the API call wrapper to request the member's basic profile data
function getProfileData() {
IN.API.Raw("/people/~").result(onSuccess).error(onError);
}
</script>
</head>
<body>
<div class="container">
<script type="in/Login" src="//platform.linkedin.com/in.js"></script>
</div>
</body>
</html>

Categories