Django Ajax просмотр не обновляется - PullRequest
0 голосов
/ 29 марта 2020

Я создаю систему 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 зацикливается и показывает сообщения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...