Body onload clashing with function that saves data to database

Question

The page I am doing saves questions users have. Which means, all questions will be shown when the body loads. When a user posts a new question, the data should be saved to firebase and the body should reload again, showing the new question posted along with the other questions posted earlier (which is in the database).

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

So what is happening now is that, the saveToDB() function works fine when before I added in the onload function to the body.

Answer 1

An easier solution might be to submit the data using AJAX and append the question in the callback. This would avoid the whole page refresh altogether and produce a much faster interface. React is especially good at this kind of DOM management, but you're most of the way there already with vanilla JS.

Body onload clashing with function that saves data to database

Question

1 answers

solution1
0 2017-01-21 16:35:24

Body onload clashing with function that saves data to database

Question

1 answers

solution1 0 2017-01-21 16:35:24

solution1
0 2017-01-21 16:35:24