Я пытаюсь создать приложение новостной ленты, используя firebase.У меня работает базовый функционал, однако возникают некоторые ошибки.
Ошибка 1) Когда вы вводите имя и сообщение, а затем нажимаете кнопку «Отправить», запись успешно регистрируется в firebase, а затем добавляется в раздел новостной ленты.Если я обновлю страницу, ранее отображаемой записи больше не будет, но она все еще будет в базе данных.Как сделать так, чтобы запись оставалась видимой на странице, даже если страница обновлена?
Ошибка 2) Опять же, когда вы вводите имя и сообщение, затем нажимаете кнопку «Отправить», запись успешно регистрируется в firebase, а затемвписывается в ленту новостей div.Если я затем ввожу новое имя с новым сообщением и нажимаю «Отправить», первое опубликованное сообщение И второе опубликованное сообщение дублируются в ленте новостей.Они не дублируются в базе данных, есть только одна запись для каждого.Я не понимаю, где дубликат создается в моем коде.
Ошибка 3) Я могу успешно удалить запись, щелкнув значок x в углу.Когда она нажата, запись удаляется в firebase, и мой код запускает окно для обновления.Как и в моей первой ошибке, после обновления страницы остальные записи больше не отображаются, даже если они все еще отображаются в базе данных Firebase.
В базе данных в настоящее время есть одна запись, которую я создал в ней.
$(document).ready(function() {
// Initialize Firebase
var config = {
apiKey: "AIzaSyAd7fKr96e5ZEdVn5181Czw-FElJRXUouc",
authDomain: "fraud-team-news-feed.firebaseapp.com",
databaseURL: "https://fraud-team-news-feed.firebaseio.com",
projectId: "fraud-team-news-feed",
storageBucket: "fraud-team-news-feed.appspot.com",
messagingSenderId: "393350782314"
};
firebase.initializeApp(config);
var database = firebase.database();
$("#submit").on("click", function() {
event.preventDefault();
var comment = $(".comment");
var nameEntry = $("#name").val().trim();
var messageEntry = $("#message").val().trim();
var d = new Date();
var year = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var dd = d.getDate();
var mm = d.getMonth();
var month = year[mm];
var yyyy = d.getFullYear();
var today = month + " " + dd + ", " + yyyy;
database.ref().push({
Name: nameEntry,
Date: today,
Message: messageEntry,
});
$("#name").val("");
$("#message").val("");
database.ref().on("child_added", function(snapshot) {
var sv = snapshot.val();
var key = snapshot.key;
var newEntry = '<div class="row1"><div class="specialist-name">' + sv.Name + '</div><img src="https://connectme.apple.com/servlet/JiveServlet/previewBody/1508898-102-1-10580249/cross.png" class="delete-icon" id="' + key + '"></div><div class="row2"><div class="message-text">' + sv.Message + '</div></div><div class="row3"><div class="date">' + sv.Date + '</div></div>';
newDiv = document.createElement('div');
$(newDiv).addClass("comment").html(newEntry).prependTo($(".news-feed"));
});
$(".delete-icon").on("click", function() {
console.log("clicked");
var id = $(this).attr('id');
console.log(id);
var key = id;
firebase.database().ref().child(key).remove();
window.location.reload();
});
});
});
.container {
width: 400px;
border-right: 1px solid black;
font-size: 15px;
font-family: arial;
}
.comment {
border-bottom: 1px solid black;
padding: 10px;
line-height: 1.2;
}
.row1 {
display: flex;
justify-content: space-between;
}
.row3 {
text-align: right;
font-size: 13px;
color: gray;
}
.specialist-name {
font-weight: bold;
}
.delete-icon {
height: 12px;
}
.new-comment-section p {
margin-bottom: 5px;
font-weight: bold;
color: teal;
}
.name,
.message {
border: 1px solid teal;
border-radius: 5px;
font-size: 13px;
padding: 7px;
width: 350px;
}
<!DOCTYPE html>
<html>
<head>
<title>News Feed</title>
<link rel="stylesheet" type="text/css" href="./news-feed.css">
</head>
<body>
<div class="container">
<div class="news-feed"></div>
<div class="new-comment-section">
<p>Name:</p>
<input type="text" placeholder="Name" class="name" id="name">
<p>Message:</p>
<textarea type="text" placeholder="Message" class="message" id="message" rows="5"></textarea>
<br>
<input type="submit" value="submit" class="submit" id="submit">
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.4/firebase.js"></script>
<script type="text/javascript" src="./news-feed.js"></script>
</body>
</html>