2

Tengo una base de datos en Firebase que recibe datos desde una aplicación Android, la aplicación manda los datos ya encerrados en etiquetas HTML, con clases y Id's. Yo obtengo los datos de Firebase con Javascript y los imprimo en pantalla. los datos se muestran correctamente. Pero al parecer sobrescribe todo sobre el archivo HTML ya que al archivo le agrego un elemento h1 para darle un titulo y al cargar al proyecto me muestra el elemento h1 pero enseguida desaparece y se muestran los datos obtenidos desde Firebase. Tampoco me deja darle estilos, los selecciono con las clases con las que ya vienen los elementos pero al parecer no los lee.

  <!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);
 }

Estos son los elemento que se muestran y la consola donde aparecen los div, clases y id

6
  • Es que estás usando document.write. La doc dice esto: *Nota: dado que document.write escribe directo al hilo (stream) de un documento, la llamada a document.write en un documento ya cargado automáticamente ejecuta document.open, lo cual limpiará todo el contenido del documento en cuestión. Debes adjuntar el contenido obtenido de F. Base a algún elemento del DOM.
    – A. Cedano
    el 14 feb. 2018 a las 18:16
  • 1
    Prueba a poner esto en el DOM: <div id="firebase"></div> y en Javascript en vez de document.write, pones algo así: var divFireBase= document.getElementById('firebase'); divFireBase.innerHTML = pedido1; O bien lo pones en el divPedidos si es ahí donde los quieres mostrar: divPedidos.innerHTML = pedido1;
    – A. Cedano
    el 14 feb. 2018 a las 18:19
  • Hola buenas tardes. Gracias por responder. Te refieres a crear un div u algún otro elemento desde mi Js e insertarlo ahi?
    – Packvt
    el 14 feb. 2018 a las 18:23
  • Perfecto, probare, muchas gracias.
    – Packvt
    el 14 feb. 2018 a las 18:23
  • 1
    No tienes que crearlo necesariamente desde JS, lo puedes tener en el DOM o, según se muestra en la imagen, poner el contenido de la variable pedido1 en el div con id divPedidos, si quieres mostrar el contenido en ese div. O sea, sería hacer esto: divPedidos.innerHTML = pedido1; sin olvidar de quitar la línea de document.write
    – A. Cedano
    el 14 feb. 2018 a las 18:25

1 respuesta 1

1

El problema

El problema es que estás usando document.write para mostrar los datos obtenidos de Firebase.

Según la documentación:

document.write escribe directo al hilo (stream) de un documento, la llamada a document.write en un documento ya cargado automáticamente ejecuta document.open, lo cual limpiará todo el contenido del documento en cuestión.


Solución

Debes borrar esta línea en la función prueba():

document.write(pedido1);

Y agregar el contenido obtenido de Firebase a algún elemento existente en el DOM.

Por la imagen se puede deducir que debes tener un div con el id divPedidos.

Algo así en el HTML:

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

Entonces, la función quedaría así:

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;
}

NOTA: Si te interesa mostrarlo en otro contenedor, puedes tenerlo creado en el DOM y cargas los datos como explicado antes, cambiando solamente la referencia al elemento que obtienes con document.getElementById.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.