This is what I want!!!
If you look at the image, you´ll see the structure of my firebase database.
I want that there is a real Id or a random Id something like this if you make a normal database as you can see in the other image: "uOJFrspo8fm" "doisu4irp4cr0"
My code is below what do I have to change.
Thank you for your help!
<html>
<head>
<meta charset="utf-8"/>
<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
<title>Firebase example</title>
</head>
<body>
<h1>Firebase example</h1>
<form id="myform" method="post">
<input type="email" id="userCityEmail" placeholder="Enter email">
<input type="text" id="cityTextField" placeholder="City">
<button id="citySubmitButton" onclick="submitCityClick(); return false;">Submit</button>
</form>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyC7aXtPN_zzNth3cByFYvOMX7557xmvUP4",
authDomain: "xchange-2c1a8.firebaseapp.com",
databaseURL: "https://xchange-2c1a8.firebaseio.com",
projectId: "xchange-2c1a8",
storageBucket: "xchange-2c1a8.appspot.com",
messagingSenderId: "47882954853"
};
firebase.initializeApp(config);
var userCityEmail = document.getElementById('userCityEmail');
var cityTextField = document.getElementById('cityTextField');
var citySubmitButton = document.getElementById('citySubmitButton');
function submitCityClick() {
var firebaseRef = firebase.database().ref();
var userEmail = userCityEmail.value;
var userCity = cityTextField.value;
firebase.database().ref("Id").set({
usermail:userEmail,
usercity: userCity
});
}
</script>
</body>
</html>
Related
With the help of a realtime firebase database and some arduino code, I am displaying Moisture levels of potting soil on my website. However when the firebase data is updated (every 0.3 seconds), instead of also updating the single value on the website, it adds a new line/print every update. After a short while, my website now looks like this:
Moisture: 661Moisture: 658Moisture: 660Moisture: 658Moisture: 657, and it keeps on adding the Moisture: xxx after it with every update. What I want to happen is to just have it displayed once, and push the data so it updates the first value, rather than adding a new one.
I'll leave my code below, how can I go about doing this? It's hard to find things about this on the internet as I am not sure what I am looking for (new to JS).
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/styles.css">
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.11.0/firebase-messaging.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "xx",
authDomain: "xx",
databaseURL: "xx",
projectId: "xx",
storageBucket: "xx",
messagingSenderId: "xx",
appId: "xx"
};
firebase.initializeApp(config);
</script>
<script>
var database = firebase.database();
var ref = firebase.database().ref("plant-patrol/Moisture");
ref.once("value")
.then(function(snapshot) {
var key = snapshot.key; // "plant-patrol"
var childKey = snapshot.child().key; // "Moisture"
});
</script>
<script>
var ref = firebase.database().ref();
ref.on("value", function(snapshot) {
console.log(snapshot.val());
var snapshotJSON = JSON.stringify(snapshot.val());
var moisture = snapshotJSON;
moisture = moisture.replace(/[{""}]/g, '');
moisture = moisture.replace(/[:]/g, ': ');
document.write(moisture);
}, function (error) {
console.log("Error: " + error.code);
});
</script>
<script src="/script.js" defer></script>
</head>
</html>
var div = document.getElementById('moisture');
div.innerHTML = 'Moisture: 55%';
<div id='moisture'></div>
Your are using document.write(moisture). This writes the moisture variable on the document each time is received.
What you want is to replace a specific text in the document. To do that you must create an element with an unique ID like:
<div id='moisture'></div>
First, assing that element to a variable:
var moistureDiv = document.getElementById('moisture');
Then, remove the document.write(moisture) and add this code to replace the text on the element with "moisture" ID:
moistureDiv.innerHTML = moisture;
I am currently first year student and I am creating web application. I have manage to redirect the page to the main menu using window.location = "".
However, I want multiple redirect pages such as admin user can access to their own page as well as the new user can go to their page and finally the employee would go to their own page.
My current functions are in js file and main codes are in HTML file. Can someone help me please?
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
window.location = "main.html"
var user = firebase.auth().currentUser;
if(user != null){
var email_id = user.email;
}
} else {
// No user is signed in.
document.getElementById("user_div").style.display = "none";
document.getElementById("login_div").style.display = "block";
}
});
function login(){
var userEmail = document.getElementById("email_field").value;
var userPass = document.getElementById("password_field").value;
firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
window.alert("Error : " + errorMessage);
// ...
});
}
function logout(){
firebase.auth().signOut();
}
<html>
<head>
<title>Diabetes Login</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/style4.css" />
</head>
<body>
<div id="login_div" class="main-div">
<h3>Welcome to Diabetes log</h3>
<input type="email" placeholder="Email..." id="email_field" />
<input type="password" placeholder="Password..." id="password_field" />
<button onclick="login()">Login to Account</button>
</div>
<div id="user_div" class="loggedin-div">
<h3>Welcome User</h3>
<p id="user_para"> You're currently logged in.</p>
<button onclick="logout()">Logout</button>
</div>
<script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyBHP48kjdW-YzKCdZA_-TcVnni-NlCZZ8Q",
authDomain: "diabetesapp-ee8fa.firebaseapp.com",
databaseURL: "https://diabetesapp-ee8fa.firebaseio.com",
projectId: "diabetesapp-ee8fa",
storageBucket: "diabetesapp-ee8fa.appspot.com",
messagingSenderId: "769133104242"
};
firebase.initializeApp(config);
</script>
<script src="js/index.js"></script>
</body>
</html>
I've already created a simple web page which saves and displays data in firebase database. I tried different times to make the offline cache data to be synced with the fire base data. But it doesn't work. I've attached .html and .js files. Could anybody help me, how the local storage cache be synced with fire base data once the connection established after the disconnect of the app?
var output = document.getElementById("data");
var dataText = document.getElementById("data-text");
var firebaseReference = firebase.database().ref('users/');
(function() {
firebaseReference.on("value", function(snapshot) {
output.innerHTML = JSON.stringify(snapshot.val(), null, 2);
});
})();
$(document).ready(function(){
$("form").submit(function(){
firebaseReference.push().set({Name: dataText.value});
});
});
var connectedRef = firebase.database().ref(".info/connected");
connectedRef.on("value", function(snap) {
if (snap.val() === true) {
alert("connected");
} else {
alert("not connected");
}
});
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase-firestore.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<title>Firebase</title>
</head>
<body>
<h1>Firebase Example</h1>
<h2>Add New</h2>
<form action="" class="form-group">
<input type="text" required id="data-text">
<input type="submit" id="data-submit" class="btn btn-primary">
</form>
<h2>Existing Data</h2>
<pre id='data'></pre>
<script>
var config = {
apiKey: "AIzaSyBGKWHQlLok3q70Y6Q5CAzWyLbN4GyKnAQ",
authDomain: "my-firebase-project-536a4.firebaseapp.com",
databaseURL: "https://my-firebase-project-536a4.firebaseio.com",
projectId: "my-firebase-project-536a4",
storageBucket: "my-firebase-project-536a4.appspot.com",
messagingSenderId: "711083146609"
};
firebase.initializeApp(config);
</script>
<script src="script.js"></script>
</body>
</html>
Your code is using the Firebase Realtime Database, which doesn't support disk persistence in its web client at the moment. While the feature has been worked on in the open-source repo, it hasn't been released yet.
If you want offline caching support for a web application, I recommend using Cloud Firestore for Firebase where such support is built in.
I am just learning FireBase and have been stuck on this problem for awhile. I am wanting the user to enter a string into the input field press submit, and that data will be sent to FireBase. Any kind of help would be awesome!
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://www.gstatic.com/firebasejs/3.9.0/firebase.js">
</script>
<script>
var config = {
apiKey: "AIzaSyCBUbK2d_H7QF3J8BDBPHAHSGJAGS",
authDomain: "my-project.firebaseapp.com",
databaseURL: "https://my-project.firebaseio.com",
projectId: "my-project",
storageBucket: "my-project.appspot.com",
messagingSenderId: "845405833425"
};
firebase.initializeApp(config);
var database;
database = firebase.database();
var ingInput;
ingInput = $("#fridge");
var submit = $("#submit");
submit.click(sendIng);
//Sends to firebase
function sendIng(){
//Makes the object
var data = {
ingredients: ingInput.text()
}
console.log(data);
var ref = database.ref("ingredients");
var ingredients = ing.push(data);
}
</script>
</head>
<div id="ingredients-submit">
<label>Store this item:</label>
<input type="text" id="fridge">
<button id="submit">Store</button></div>
I'm just getting started with firebase and javascript html to make a website for my app.
all I'm trying to do is access any value from firebase and print it on the website.
I followed firebase's quickstart tutorial and copied the exact same code they have: https://www.youtube.com/watch?v=k1D0_wFlXgo
here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript</title>
</head>
<body>
<h1 id="bigOne"></h1>
<script src="https://www.gstatic.com/firebasejs/3.3.2/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyD0C9hhfpdKEIahisG0VNInZZGjCyf5Lo0",
authDomain: "game-of-chats-ce897.firebaseapp.com",
databaseURL: "https://game-of-chats-ce897.firebaseio.com",
storageBucket: "game-of-chats-ce897.appspot.com",
};
firebase.initializeApp(config);
var bigOne = document.getElementById('bigOne');
var dbRef = firebase.database().ref().child('text');
dbRef.on('value', snap => bigOne.innerText) = snap.val())
</script>
</body>
</html>
am I missing something? I am new so there might be one small step that I'm missing.
Try with:
dbRef.on('value', function(snapshot) {
bigOne.innerText = snapshot.val();
});