refreshing the browser overwrites the child's content in Firebase - javascript

I am a complete beginner in the database world. I'm trying to use Firebase database and here is the problem I encounter: I want to create a simple signup where the user should write the info and this info should be stored in Realtime Database. That is to say, when the user enters his info and clicks on "sign up" user 1 should be created, then user 2 enters his info and user 2 should be created, but all of them must be same level "childs". Everything seemed to be working fine, I created an object (in Javascript) then I added to the database as a "child" named "user 1", but when I refreshed the page and entered other info for user 2, this info overwrote user 1's info, but when I just delete user 1's info from the input fields in the browser (without doing a refresh) and enter user 2's info it creates the second "child" named user 2 as it was supposed to be and it's what I want to be. The question is why refreshing the browser overwrites the previous info. Here is my js code:
function submitClick(x){
var firebaseRef = firebase.database().ref();
user_number ++;
firebaseRef.child("user" + " " + user_number).set(x);
}
function signup(){
var first_name = document.getElementById("first_name").value;
var last_name = document.getElementById("last_name").value;
var username = document.getElementById("user_name").value;
var password = document.getElementById("password").value;
var obj = {
First_Name: first_name,
Last_Name: last_name,
Username: username,
Password: password
}
return obj;
}
var hold;
var user_number = 0;
submit_btn.onclick = function() {hold = signup(); submitClick(hold)};
and the html is just input fields and a button named "sign up"


When you reload your page, the JavaScript is reloaded and executed again from scratch. It has no memory of what happened before you reloaded it.
That means that this line executes again:
var user_number = 0;
And thus user_number starts counting from 0 again.
The simplest way to fix this problem is to use Firebase's push() method:
function submitClick(x){
var firebaseRef = firebase.database().ref();
firebaseRef.push().set(x);
}
This generates a new unique ID under the root, where it sets the user. While these so-called push IDs are not as easily readable as your numbers, they are guaranteed to be unique across reloads, multiple users, and even offline/online conditions.

Related

Redirect client script to a record type

How do I get redirected to a record type after executing a command in a client script. Explaining better, I'm in a client script, and after clicking a button, a new record is generated in another record type, and I want to be redirected there.
Thank you
I need to leave this page after performing the procedures, and be redirected to the record I just created

var newType = <NetSuite ID of record type>;
// making new record code
var newId = newRecord.save();
// performing the procedures
// Requires the N/url module
var output = url.resolveRecord({
recordType: newType,
recordId: newId,
isEditMode: true
});
window.location.replace(output);

How to store sessionStorage as a variable so it can be stored in a database

I need to store the email of a logged in user, which I have stored into
sessionStorage with the line of code:
sessionStorage.setItem("loggedInUser", $("#email").val());
But in a different program, I need to store the email as something so that it can be sorted and posted to a php file that inserts it into my database. Here is my javascript so far.
$(document).ready(function () {
//When the submit button on the recruitment form is pressed.
$("#SubmitRecruit").on("click", function () {
//store each individual entry into a separate variable.
var email = sessionStorage.loggedInUser;
var forename = document.getElementById("forename").value;
var surname = document.getElementById("surname").value;
var jobType = document.getElementById("jobType").value;
var phoneNo = document.getElementById("phoneNo").value;
//create an array with the details in.
var recruitdetail = {
email: email,
forename: forename,
surname: surname,
password: password,
phoneNo: phoneNo,
}
//log the forename in the console so that we know that the register has been successful.
console.log(email)
//direct the user to the login page and alert them that their registration was successful.
window.location.href = "../index.html"
alert("Your recruitment post was made, thank you. We will get back to you shortly.")
//posts the JSON object to the php file so it can fill the database, and converts the register array into JSON so it can be read.
var jqxhr = $.post("../php/recruit.php", JSON.stringify(recruitdetail)
)
}
})
On the 5th line I tried to make it equal to sessionStorage.loggedInUser with no avail. I know I need to store email as something from session surely, as then it will be passed back into php and stored in db, but I cannot figure out what or how to do this. Any help will be greatly appreciated.

In order to use local storage with our array, we'll need to convert our array into a string using a method that makes it easy for us to unconvert later. The way convert an array into a string is by using the JSON stringify function.
Let's say you have the following array called movies:
var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown",
"Kill Bill", "Death Proof", "Inglourious Basterds"];
Using the stringify function, your movies array can be turned into a string by using the following syntax:
JSON.stringify(movies)
Since we want to store everything into our local storage, when you put it all together, you get the following:
var movies = ["Reservoir Dogs", "Pulp Fiction", "Jackie Brown",
"Kill Bill", "Death Proof", "Inglourious Basterds"];
localStorage.setItem("quentinTarantino", JSON.stringify(movies));

To get the item from session storage try using the getItem method:
var email = sessionStorage.getItem("loggedInUser");
See sessionStorage documentation.
For the ajax request, just pass the object directly to $.post and put the alert in the success callback so it only shows when the request completes successfully:
//posts the JSON object to the php file so it can fill the database, and converts the register array into JSON so it can be read.
var jqxhr = $.post("../php/recruit.php", recruitdetail, function(data) {
alert("Your recruitment post was made, thank you. We will get back to you shortly.")
});
As a side note - if you have a table of users/logins, the email of each user should stored in that table. The foreign key between your users table and other tables would then be an (auto-incrementing) ID, rather than an email address. This makes the system much more flexible (email can be changed, etc).

If by different program you mean different application on different domain, then you can try sending the email value through an AJAX request to be stored in the PHP session.
If on the same domain but just a different app running in a different tab, then you can use localStorage, with the same syntax as sessionStorage. Note that sessionStorage data is limited to the tab in which it was set.
localStorage.setItem("loggedInUser", $("#email").val());
and then
var email = localStorage.loggedInUser;
Or you can use cookies.
https://www.w3schools.com/js/js_cookies.asp

Firebase Realtime Database Connection Data - Web

I have to show data belonging to a user that logged in.
My database structure is as follows:
Users/Drivers/Uid/name,phone...
How can I show the data of a user that logged in by using JavaScript as a Text?
<a> Username </a>

If you have this HTML:
<a id="username"> Username </a>
And this database structure:
Users
Drivers
Uid: { name: "Name", phone: "Phone number" }
Then you can display the name of the current user with:
var currentUser = firebase.auth().currentUser;
var userRef = firebase.database().ref("Users/Drivers").child(currentUser.uid);
userRef.on("value", function(snapshot) {
document.getElementById("username").innerText = snapshot.val().name;
})
So this code does (line by line):
Determine the current user
Create a reference to that user's data in the database
Starts listening for that data, meaning it loads the current data, and then monitors for any changes
Puts the name of the user into the element.
Line 4 will be called immediately, with the current value of the user, and then every time that user data change.
Also see the Firebase documentation on listening for values.
If the page can also be loaded when the user is not signed in (yet), you'll want to make sure to only run this code when the user did sign in. You can do this by using a so-called auth state change listener, which is called whenever the user's auth state changes:
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
var userRef = firebase.database().ref("Users/Drivers").child(user.uid);
userRef.on("value", function(snapshot) {
document.getElementById("username").innerText = snapshot.val().name;
})
}
});
See the Firebase documentation on getting the current signed in user..

firebase assign a key to a specific browser instance when created?

I'm experimenting with Firebase/javascript and am wondering how do I assign a key to a specific browser instance when created?
Upon entry, user is greeted with a user input field for their name and submit button
When the submit button is clicked the user information is sent to firebase and saved under a newly created key
I know how to do this and how to retrieve the data from firebase but,
how do i ensure the key that is created gets assigned to the specific user so that only the information in that key is sent back to the user or updated?
I am trying to do this without having a user signup or login. Is there a way to do this?

When the user clicks the submit button, you will send the name and the key to the database:
var ref = firebase.database().ref();
var reference = ref.child('users');
var post = reference.push();
post.set({
username:name
});
Then after that you will have this in the database:
users
pushkey
username: userx
another user adds his name and clicks submit:
user
pushkey <--- this key will be only to this user
username: userx
pushkey1 <--- will be only to usery
username:usery

Automating Firebase and Javascript (VueJS)

I'm adding users manually as I don't want them to access the app without authorisation.
Upon adding a user,I would like to add a new child to the database (named from the user email) and send him an email with his logins.
So far I've arrived to this, that doesn't work (webpack) and I cannot create a child using the current user's email:
firebase.auth.user().onCreate(function(event) {
var uid = event.data.uid;
return admin.database().ref("/users/" + uid)
});
I also found this one for the email:
exports.sendWelcomeEmail = functions.auth.user().onCreate(function(event) {
var uid = event.data.uid;
return sendEmail(uid);
});
Do you have any idea what the formula looks like to create a child in the DB with the user and send him an email with his credentials right upon creation of a new user.

Categories