2017-01-21 3 views
0

Die Seite, die ich mache, speichert Fragen, die Benutzer haben. Das bedeutet, dass alle Fragen angezeigt werden, wenn der Körper lädt. Wenn ein Benutzer eine neue Frage posten, sollten die Daten in Firebase gespeichert werden und der Text sollte erneut geladen werden, wobei die neue Frage zusammen mit den anderen Fragen angezeigt wird, die zuvor (in der Datenbank) veröffentlicht wurden.Körper onload kollidiert mit Funktion, die Daten in der Datenbank speichert

<script> 
     function saveToDB() { 

      // Initialize Firebase 
      var config = { 
      apiKey: "AIzaSyDH1bPI9AZj4gFGyCYVNNWA7xvr9sU9Qvw", 
      authDomain: "show-off-your-talent-b9923.firebaseapp.com", 
      databaseURL: "https://show-off-your-talent-b9923.firebaseio.com", 
      storageBucket: "show-off-your-talent-b9923.appspot.com", 
      messagingSenderId: "1005390925584" 
      }; 
      if(firebase.apps.length===0){ 
      firebase.initializeApp(config); 
      var dbRef = firebase.database().ref().child('qns'); 
      var question = document.getElementById("myTextarea").value; 

      var postData = { 
       qnsask : question 
      }; 
      dbRef.push(postData); 
      document.getElementById("response").innerHTML = "POSTED!"; 

      dbRef.once('value', function(snapshot){ 
      snapshot.forEach(function(childSnapshot){ 
       var childData = childSnapshot.val(); 
       document.getElementById("questions").innerHTML = document.getElementById("questions").innerHTML + "</br>" + childData.qnsask; 
      }); 
      }); 
      } 
     } 

     function Retrieve() { 

      // Initialize Firebase 
      var config = { 
      apiKey: "somekey", 
      authDomain: "somekey.firebaseapp.com", 
      databaseURL: "https://somekey.firebaseio.com", 
      storageBucket: "somekey.appspot.com", 
      messagingSenderId: "somekey" 
      }; 
      if(firebase.apps.length===0){ 
      firebase.initializeApp(config); 
      } 
      var dbRef = firebase.database().ref().child('qns'); 
      dbRef.once('value', function(snapshot){ 
      snapshot.forEach(function(childSnapshot){ 
       var childData = childSnapshot.val(); 
       document.getElementById("questions").innerHTML = document.getElementById("questions").innerHTML + "</br>" + childData.qnsask; 
      }); 
      }); 
     } 


    </script> 
</head> 
<body onload="Retrieve()"> 
    <div id="forum"> 
     <form action="#" onsubmit="saveToDB(); return false"> 
     <p class="qns"> 
      <label for="qn">Your question:</label> 
      <textarea rows="5" cols="100" id="myTextarea"></textarea> 
     </p>              
     <input type="reset" class = "button" value="Cancel"> 
     <input type="submit" value="Post" class = "button button1"> 
     <p id ="response"></p>               
    </div> 
    <div id="questions"> 
    </div> 
</body> 

Also, was jetzt passiert ist, dass die saveToDB() Funktion funktioniert gut, wenn, bevor ich in der onload-Funktion, um den Körper aufgenommen.

+0

Ist Retrieve werfen irgendwelche Fehler in der Konsole? –

Antwort

0

Eine einfachere Lösung könnte sein, die Daten mit AJAX zu übermitteln und die Frage an den Rückruf anzuhängen. Dies würde die gesamte Seitenaktualisierung vollständig vermeiden und eine viel schnellere Schnittstelle erzeugen. Reagieren ist besonders gut bei dieser Art von DOM-Verwaltung, aber Sie sind schon weitestgehend dort mit Vanille JS.

Verwandte Themen