The child_moved event is triggered when you're working with ordered data like drag and drop in list items.
Now, let's take quick look at our full code:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Chapter 1</title><script src="</span>https://www.gstatic.com/firebasejs/4.6.1/firebase.js"></script>
</head>
<body><!--[if lt IE 8]>
<p class="browserupgrade">You are using an<strong>outdated</strong> browser.Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve yourexperience.
</p>
<![endif]-->
<!-- Add your site or application content here -->
<p id="message">Hello world! This is HTML5 Boilerplate.</p>
<script>
// Initialize Firebase
var config = {
apiKey: "<PROJECT API KEY>",
authDomain: "<PROJECT AUTH DOMAIN>",
databaseURL: "<PROJECT DATABASE AUTH URL>",
projectId: "<PROJECT ID>",
storageBucket: "",
messagingSenderId: "<MESSANGING ID>"
};
firebase.initializeApp(config);
var messageLabel = document.getElementById('message');
var db = firebase.database();
db.ref().on("value", function(snapshot) {
console.log(snapshot.val());
var object = snapshot.val();
messageLabel.innerHTML = object.chapter1.example;
});</script>
</body>
</html>
Now, open index.html in your browser, and let's look at the result:
In the preceding screen excerpt, we can see the database value on MessageLabel and JavaScript data representation in the browser console.
Let's extend this example further by taking the input value from the user and save those values in the database. Then, using the events, we will display that messages in the browser in Realtime:
As shown here, I have added a child node messages in the database. Now, we will add the form input in our HTML with the Save button and at the bottom, we will display those messages list in Realtime when the user submits.
Here's the HTML Code:
<input type="text" id="messageInput" />
<button type="button" onclick="addData()">Send message</button>
<h2>Messages</h2>
<p id="list">sdfdf</p>
Now, we will create the addData() function to get and save the data to Firebase:
// Save data to firebase
function addData() {
var message = messageInput.value;
db.ref().child('users').push({
field: message
});
messageInput.value = '';
}
In the next screenshot, I have added some messages to the input text:
Now, we need to display those messages into HTML at the bottom of the messages title:
// Update list of messages when data is added
db.ref().on('child_added', function(snapshot) {
var data = snapshot.val();
console.log("New Message Added", data);
snapshot.forEach(function(childSnap) {
console.log(childSnap.val());
var message = childSnap.val();
messages.innerHTML = ' ' + message.field;
});
});
We have used the child_added event, which means whenever any child is added in the messages on node, we need to take that value and update the messages list.
Now, open your browser and note the output:
That looks great. We are now be able to see the message that users have submitted and our data is also getting updated with the new message in Realtime.
Now, let's take a quick look at how our code looks:
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<title>Chapter 1</title>
<script src="https://www.gstatic.com/firebasejs/4.6.1/firebase.js"></script>
</head>
<body>
<!-- Add your site or application content here -->
<p id="message">Hello world! This is HTML5 Boilerplate.</p>
<input type="text" id="messageInput" />
<button type="button" onclick="addData()">Send message</button>
<h2>Messages</h2>
<p id="list"></p>
<script>
// Initialize Firebase
var config = {
apiKey: "<PROJECT API KEY>",
authDomain: "<PROJECT AUTH DOMAIN>",
databaseURL: "<PROJECT DATABASE AUTH URL>",
projectId: "<PROJECT ID>",
storageBucket: "",
messagingSenderId: "<MESSANGING ID>"
};
firebase.initializeApp(config);
var messageLabel = document.getElementById('message');
var messageInput = document.getElementById('messageInput');
var messages = document.getElementById('list');
var db = firebase.database();
db.ref().on("value", function(snapshot) {
var object = snapshot.val();
messageLabel.innerHTML = object.chapter1.example;
//console.log(object);
});
// Save data to firebase
function addData() {
var message = messageInput.value;
db.ref().child('messages').push({
field: message
});
messageInput.value = '';
}
// Update results when data is added
db.ref().on('child_added', function(snapshot) {
var data = snapshot.val();
console.log("New Message Added", data);
snapshot.forEach(function(childSnap) {
console.log(childSnap.val());
var message = childSnap.val();
messages.innerHTML = ' ' + message.field;
});
});
</script>
</body>
</html>