I'm trying to link my contact form in a portfolio website to firebase and keep getting (firebase.database is not a function) in my console
This is for the web, using pure javascript
var firebaseConfig = {
apiKey: "AIzaSyCzX3r8CFw84WSBuCSXR1fWM_hDrwtGMSs",
authDomain: "portfolio-4c243.firebaseapp.com",
databaseURL: "https://portfolio-4c243.firebaseio.com",
projectId: "portfolio-4c243",
storageBucket: "",
messagingSenderId: "745737502175",
appId: "1:745737502175:web:a26e5b0baa3769c9"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var messagesRef = firebase.database().ref('messages');
document.getElementById('contactForm').addEventListener('submit', submitForm);
function submitForm(e) {
e.preventDefault();
var name = getInputVal('name');
var email = getInputVal('email');
var message = getInputVal('message');
saveMessage(name, email, message);
}
// Function get value
function getInputVal(id) {
return document.getElementById(id).value;
}
//Save
function saveMessage(name, email, message) {
var newMessageRef = messagesRef.push();
newMessageRef.set({
name: name,
email: email,
message: message
})
}
This error is very common and arises because either you have not configured your config object correctly or the script tag required for using that particular functionality is missing.
In your case the config object looks fine so you have to add this script in your page
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>
But please note that this script is to be added only after the core script for firebase app
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
and for future if you want to use any other service from Firebase like Firestore or so, just make sure you have that particular script tag in there (with the config object correctly setted up).
Related
I tried making a simple chat forum using YouTube tutorial. upon its release it works wonderful so I tried using its code structure while updating the core infos and it only result in an error. I tried many time to avail, I'm new to programming so im looking for help.
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-app.js"</script>
<script>src="https://www.gstatic.com/firebasejs/9.16.0/firebase-database.js"</script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyCTBkpUWMU_pL6qIb_hMXVDS_sCYQ2BROU",
authDomain: "rd-try-ce276.firebaseapp.com",
databaseURL: "https://rd-try-ce276-default-rtdb.firebaseio.com",
projectId: "rd-try-ce276",
storageBucket: "rd-try-ce276.appspot.com",
messagingSenderId: "47874427531",
appId: "1:47874427531:web:819f34b203e6ae82c0628e"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebase);
function sendMessage() {
alert("Hello! I am an alert box!");
//get message
var message = document.getElementById("message").value;
//save in database
firebase.database().ref("messages").push().set({
"message": message
})
}
</script>
Am trying to Connect Firebase to a Contact Form,
where requires the user to type and submit Fullname , Email and also Message.
But I face Uncaught ReferenceError: firebase is not defined at my main.js file
form my console.
I tried different solution but I couldn't be able to solve it.
Here is my script tag in my index.html
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
</script>
<script src="main.js"></script>
here is my Main.js code
var config = {
apiKey: "xxxxx",
authDomain: "xxxxx",
databaseURL: "xxxxx",
projectId: "xxxxx",
storageBucket: "xxxxx",
messagingSenderId: "xxxxx"
};
firebase.initializeApp(config);
var emailRef = firebase.database().ref('emails');
// Listen for form submit
document.getElementById('contactForm').addEventListener('submit', submitForm);
// Submit form
function submitForm(e){
e.preventDefault();
//Get values
var FullName = getInputval('FullName');
var Email =getInputval('Email');
// save message
saveMessage(FullName,Email);
// Show alert
document.querySelector('.alert').style.display = 'block';
// Hide alert after 3 seconds
setTimeout(function(){
document.querySelector('.alert').style.display = 'none';
},3000);
// Clear form
document.getElementById('contactForm').reset();
}
// Function to get form values
function getInputval(id){
return document.getElementById(id).value;
}
// Save message to firebase
function saveMessage(Fullname, Email,){
var newEmailRef = emailRef.push();
newEmailRef.set({
Fullname: Fullname,
Email:Email
});
}
Since you're initializing firebase here, it should be something like this:
const firebase = initializeApp(config);
For more info you can have a look here.
I was reading through Firebase web documentation on reading and writing data from a database, I want to add dynamic counters on my github website so i figured Firebase would be the way to go, I attempted to use code found on the documentation as an example, but the example simply outputs an error "Uncaught SyntaxError: Illegal return statement", below is my testing code i ran, the error occurred at line 22(the return statement)
<body>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDsjjwO1Jj0VKeZECp6l2NRgOKy9Yb0fYc",
authDomain: "site-counter-555dd.firebaseapp.com",
databaseURL: "https://site-counter-555dd.firebaseio.com",
projectId: "site-counter-555dd",
storageBucket: "site-counter-555dd.appspot.com",
messagingSenderId: "796019929207",
appId: "1:796019929207:web:51db340ecf1a53891e1672",
measurementId: "G-33WHDZ8X6K"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<script>
var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/Downloads' + userId).once('value').then(function(snapshot) {
var username = (snapshot.val() && snapshot.val().username) || 'Anonymous'
});
</script></body>
You're trying to use a return statement that's not within a function. Start by removing the return - there is nothing to return from.
I'm making login Authentication with Firebase and I'm testing it with creating a user ID and password on authentication Firebase and test login with that email and password. But I got no response both correct password and wrong password. Please help!
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "....",
authDomain: "....",
databaseURL: "....",
projectId: "....",
storageBucket: "....",
messagingSenderId: "....",
appId: "....",
measurementId: "...."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
document.getElementById("idLogin").onclick = function() {
var email = document.getElementById('idUser').value;
var password = document.getElementById('idPassword').value;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(function(){
alert('login success');
console.log('success');
}).catch(function(error) {
alert('login fail');
console.log('error');
})
}
</script>
What is most probably happening is that since the element with id="idLogin" is of type submit your form is submitted before the Firebase signInWithEmailAndPassword() method is triggered.
You need to explicitly specify the button type as button, (and not submit) as follows:
<button type="button" id="idLogin">Login</button>
See the W3 specification for more detail.
The code that I'm using is the following one:
import firebase from "firebase"
import firestore from "firestore"
export function base() {
// Initialize Firebase
var config = {
apiKey: "apiExample",
authDomain: "authDomaninExample",
databaseURL: "databaseUrlExample",
projectId: "projectIdExample",
storageBucket: "storageBucketExample",
messagingSenderId: "000000000"
};
firebase.initializeApp(config)
var db = firebase.firestore(); // This line breaks the code
db.settings({ timestampsInSnapshots: true })
db.collection("Users")
.add({
test: "Test"
}).then(function (docRef) {
console.log("Document written")
}).catch(function (error) {
console.log("Error is: " + error)
});
}
The base() function is called by clicking a button, however the code is not working, and no console logs are shown.
PS: I installed the Firebase and Firestore node packages successfully according to the Wix page
The error I get is the following:
TypeError: firebase.database is not a function
The solution that works is the following:
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase-database.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "apiExample",
authDomain: "authDomaninExample",
databaseURL: "databaseUrlExample",
projectId: "projectIdExample",
storageBucket: "storageBucketExample",
messagingSenderId: "000000000"
};
firebase.initializeApp(config)
var db = firebase.firestore(); // This line breaks the code
db.settings({ timestampsInSnapshots: true })
db.collection("Users")
.add({
test: "Test"
}).then(function (docRef) {
console.log("Document written")
}).catch(function (error) {
console.log("Error is: " + error)
});
</script>
However I don't want to use scripts since I prefer to use typescript
There seems to be a hacky solution suggested by one of the users in the wix forums.
Here is the link to it, maybe this will help you.
https://www.wix.com/corvid/forum/main/comment/5c5a4ffff7055001e2d15cd4
This might be helpful "The short answer is no - Wix Code only supports its internally used database."
more details
https://www.wix.com/corvid/forum/community-discussion/is-there-a-way-to-connect-to-firebase-database
The accepted solution is problematic, and hacky equates to fragile. So when it breaks, you may not be aware of it for some time or it may break often. The best solution is to use wix and
Using wix-router and wix-fetch you can write code that pulls
information from incoming requests for the profile page, queries an
external database to retrieve the information for the page, and then
injects that data into the profile page
https://css-tricks.com/wix-code-database-data-modeling/