[英]How can I update page content without reloading the page on Modal close?
我正在尝试编辑页面上的帖子,单击编辑链接会打开一个模式,单击保存按钮,将编辑后的帖子保存在数据库中,但我必须刷新页面才能在屏幕上看到编辑后的帖子。 我希望在模式关闭后立即更新屏幕,但我不希望重新加载页面。 如何在不重新加载页面的情况下实现这一点?
视图.py
def editTweet(request, post_id):
postData = Posts.objects.filter(id = post_id)
if request.method == "PUT":
data = json.loads(request.body)
print("data value is ", data)
#updating data in the database where id = post_id
Posts.objects.filter(id = post_id).update(postContent = data.get('postContent', None))
print ("i'm inside PUT")
return render(request, 'network/index.html')
else:
print("i'm inside else")
return JsonResponse([post.serialize() for post in postData], safe=False)
JavaScript
function loadModal(id) {
//load the modal
var modal = document.getElementById("myModal");
var btn = document.getElementById("editLink");
var span = document.getElementsByClassName("close")[0];
var saveBtn = document.getElementById("saveButton");
//populate the modal with tweet content
fetch(`/edit/${id}`)
.then(response => response.json())
.then(postDetails => {
modal.style.display = "block";
postDetails.forEach(element => {
document.querySelector('#editPostBox').value = `${element.postContent}`;
})
})
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
saveBtn.onclick = function(){
fetch(`/edit/${id}`, {
method: 'PUT',
body: JSON.stringify({
postContent: document.querySelector('#editPostBox').value
})
})
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
HTML
<!--The Modal-->
<div id="myModal" class="modal">
<!--Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4>Edit Your Post</h4>
<span class="close">×</span>
</div>
<div class="modal-body">
<textarea name="editPostBox" id="editPostBox"></textarea>
<button class="saveButton" id="saveButton" type="submit" >Save</button>
</div>
</div>
</div>
<!--Modal for Editing Tweets - End-->
<div class="firstSection">
<div class="container">
<div class="card">
<form method="POST">{% csrf_token %}
<textarea name="newPostBox" id="newPostBox" placeholder="What's happening?"></textarea>
<button class="btn btn-primary" type="submit" id="postButton" onclick='newPostFunc();'>Tweet</button>
</form>
</div>
</div>
</div>
{% for d in page_obj %}
<div class="secondSection">
<div class="container">
<div class="card">
<h4><a href="profile/{{d.created_by}}" class="userNameClick">{{d.created_by}}</a></h4>
<a href="#" onclick="loadModal('{{d.id}}');" id="editLink">Edit</a>
<p>{{d.postContent}}</p>
<small>{{d.dateAndTime}}</small>
<small>Likes</small>
</div>
</div>
{% endfor %}
获取后,您可以选择明信片元素并更改其内部文本。 这是我的解决方案。
<div class="secondSection">
<div class="container">
<div class="card" id="d.id">
<h4><a href="profile/{{d.created_by}}" class="userNameClick">{{d.created_by}}</a></h4>
<a href="#" onclick="loadModal('{{d.id}}');" id="editLink">Edit</a>
<p id="contents">{{d.postContent}}</p>
<small>{{d.dateAndTime}}</small>
<small>Likes</small>
</div>
</div>
saveBtn.onclick = function(){
const updatedValue =document.querySelector('#editPostBox').value;
fetch(`/edit/${id}`, {
method: 'PUT',
body: JSON.stringify({
postContent:updatedValue
})
}).then(response=>{
// if update succeeds in backend
const updatedCard = document.querySelector(`# SpecificCard Id `);
const children = updatedCard.children; // find children elements all
for(let i = 0 ; i < children.length; i ++ ){
if(children[i].id==='contents'){ // find contents p tag
children[i].innerText=updatedValue; // change inner text of p tag
return;
}
}
}
)
modal.style.display = "none";
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.