Problems getting HTML elements from Firebase

Question

Problems getting HTML elements from Firebase

Navigation

#1 by (1 votes)

2

I have a database in Firebase that receives data from an Android application, the application sends the data already enclosed in HTML tags, with classes and Id's. I get the Firebase data with Javascript and print it on the screen. the data is displayed correctly. But apparently it overwrites everything about the HTML file because the file I add an element h1 to give a title and when loading the project shows me the element h1 but then disappears and shows the data obtained from Firebase. He also does not let me give him styles, I select them with the classes with which the elements are coming but apparently he does not read them.

  <!DOCTYPE html>
  <html lang="">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://www.gstatic.com/firebasejs/live/3.1/firebase.js">
</script>
<script src="https://www.gstatic.com/firebasejs/4.6.2/firebase.js"></script>
<script src="referenceFirebase.js"></script>

<link rel="stylesheet" href="estilosPedido.css">
<title>Prueba</title>

</head>

<body>

  <h1> Pedidos</h1>

 <script src="pruebaPedido.js"></script>

</body>

</html>


 ---------------------- CSS ------------------------

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}



.divPedidos {
background: #FF8A33;
width: 10px;
height: 10px;
}

p {
background: #FF8A33;
font-size: 50px;
}



--------------------- archivo JS --------------------


  var referenceMesa = databaseRefence.child('Mesa3');
  var referencePedidos = referenceMesa.child('Pedidos');
  var referenceUsuario = referencePedidos.child('Usuario1');
  var referencePedido = referenceUsuario.child('Pedido1');

var pedido1;


referencePedido.once('value').then(function (snapshot) {

 pedido1 = snapshot.val();

console.log(pedido1);
setTimeout(prueba, 1000);
});

function prueba() {

document.write(pedido1);
 }

javascript html firebase css android-studio

asked by Packvt 14.02.2018 в 19:08

source

1 answer

How to create a table in php? Disable chrome window in selenium python

score 1 · Accepted Answer

The problem

The problem is that you are using document.write to display the data obtained from Firebase.

According to the documentation :

document.write writes directly to the thread (stream) of a document, the Call to document.write in a document already loaded automatically run document.open , which will clean all the content of the document in question .

Solution

You must delete this line in function prueba() :

document.write(pedido1);

And add the content obtained from Firebase to some existing element in the DOM.

By the image you can deduce that you must have a div with the id divPedidos .

Something like that in the HTML:

<div id="divPedidos"></div>

Then, the function would look like this:

function prueba() {
    /*Creas una referencia al elemento por su id*/
    divPedidos= document.getElementById('divPedidos');

    /*Le pones el contenido de la variable pedido1*/
    divPedidos.innerHTML = pedido1;
}

NOTE: If you are interested in showing it in another container, you can have it created in the DOM and load the data as explained above, changing only the reference to the element that you get with document.getElementById .