Я создаю систему CRUD, используя Ajax, однако, когда я создаю или удаляю сообщение, я вижу изменения, но моя кнопка удаления для сообщения и мой порядок не отображаются правильно, и мне нужно обновить sh страницы.
Мой домашний вид:
@login_required
def home(request):
posts = Post.objects.all()
posts = Post.objects.order_by('-last_edited')
context = { 'posts':posts, 'post.author':request.user }
return render(request, 'home/homepage/home.html', context)
Это мой пост_создание:
@login_required
def post_create(request):
data = dict()
if request.method == 'POST':
form = PostForm(request.POST)
if form.is_valid():
post = form.save(False)
post.author = request.user
#post.likes = None
post.save()
data['form_is_valid'] = True
posts = Post.objects.all()
data['posts'] = render_to_string('home/posts/home_post.html',{'posts':posts})
else:
data['form_is_valid'] = False
else:
form = PostForm
context = {
'form':form
}
data['html_form'] = render_to_string('home/posts/post_create.html',context,request=request)
return JsonResponse(data)
Мой javascript код для обработки Ajax:
$(document).ready(function(){
var ShowForm = function(){
var btn = $(this);
$.ajax({
url: btn.attr("data-url"),
type: 'get',
dataType:'json',
beforeSend: function(){
$('#modal-post').modal('show');
},
success: function(data){
$('#modal-post .modal-content').html(data.html_form);
}
});
};
var SaveForm = function(){
var form = $(this);
$.ajax({
url: form.attr('data-url'),
data: form.serialize(),
type: form.attr('method'),
dataType: 'json',
success: function(data){
if(data.form_is_valid){
$('#post-list div').html(data.posts);
$('#modal-post').modal('hide');
} else {
$('#modal-post .modal-content').html(data.html_form)
}
}
})
return false;
}
//create
$('.create-post-btn').click(ShowForm);
$('#modal-post').on("submit",".post-create-form",SaveForm)
//update
$('#post-list').on("click",".show-form-update",ShowForm);
$('#modal-post').on("submit",".update-form",SaveForm)
//delete
$('#post-list').on("click",".show-form-delete",ShowForm);
$('#modal-post').on("submit",".delete-form",SaveForm)
});
И мой шаблон списка сообщений:
{% load static %}
{% block javascript %}
<script src="{% static 'js/main.js' %}"></script>
{% endblock javascript %}
{% for post in posts %}
<div class="card mt-3 mb-3" style="max-width: 36rem !important;">
<div class="card-body text-dark">
<div class="d-flex">
<img class="img-create-post rounded-circle mr-2" style="width: 50px;height: 50px;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg"
alt="Profile image">
<span class="align-text-top"><a class="mr-2 text-dark font-weight-bolder" href="#">{{ post.author.first_name }} {{ post.author.last_name }} </a><br><p class="font-weight-light text-muted">{{ post.title }}</p></span>
<div class="float-right text-right ml-auto">
<p class="text-muted small" style="font-size: 0.7rem;">{{ post.date_posted|date:"F d, Y" }}</p>
</div>
</div>
<p class="card-text">{{ post.content }}</p>
</div>
<div class="card-footer" style="height: 5rem;">
<a class="mx-1 small" data-href='{{ post.get_api_like_url }}' data-likes='{{ post.likes.count }}' href='{{ post.get_like_url }}'><i class="fas fa-thumbs-up"></i> Like</a>
<a class="mx-1 small" href='#'><i class="fas fa-comment-alt"></i> Comment</a>
<hr class="my-1">
<p class="text-muted small">
{% if post.author == request.user %}
<button class="btn btn-sm text-muted show-form-delete ml-auto" data-url="{% url 'home:post-delete' post.id %}" style="font-size: small;" style="height: 0rem;">Remove</button>
{% endif %}
<small class="float-sm-right">
{{ post.likes.count }} Likes, # Comments
</small>
</p>
</div>
</div>
{% empty %}
<div class="align-items-center">
<h5 class="display-5 my-3 text-muted">No posts to show :(</h5>
</div>
{% endfor %}
И моя домашняя страница:
{% extends "home/homepage/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block javascript %}
<script src="{% static 'js/main.js' %}"></script>
{% endblock javascript %}
{% block content %}
<div class="card">
<div class="card-body">
<div class="media mb-0 align-items-center">
<img class="img-create-post rounded-circle my-0 mr-3" style="width: 50px;height: 50px;" src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg"
alt="Profile image">
<span class="text-muted align-middle">What's new?</span>
<button type="button" class="btn btn-sm btn-primary create-post-btn ml-auto" data-url="{% url 'home:post-create' %}"><i class="fas fa-plus-square"></i></button>
</div>
</div>
</div>
<div id="post-list">
<div>
{% include 'home/posts/home_post.html' %}
</div>
</div>
<div class="modal fade" id="modal-post">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
{% endblock content %}
Я подумал, что мне нужно как-то отправить пользователя в Ajax отправить форму, но я не знаю, как я могу это сделать? Что-нибудь, что я должен добавить к своему коду или удалить что-нибудь, что может предотвратить это? Заранее спасибо!
РЕДАКТИРОВАТЬ: основная проблема заключается в том, что мой домашний вид не обновляется, и мне нужно обновить sh страницу, чтобы порядок вступил в силу после добавления или удаления сообщения. Любой пользователь знает, что вызывает выдавать?
У меня есть два шаблона, один из которых home.hmtl, а другой home_post. html witch зацикливается и показывает сообщения.