jQuery для удаления поста на той же странице - PullRequest
Новая
       54

jQuery для удаления поста на той же странице

0 голосов
/ 08 марта 2020

Я пытаюсь удалить сообщения на странице пользователя без необходимости перенаправления на другую страницу или обновления, используя jQuery и Django. Я написал код, но когда я нажимаю кнопку удаления, кажется, что ничего не работает.

это мой view.py:

@login_required
def post_delete(request, id):
    data = dict()
    post = get_object_or_404(Post, id=id)
    if request.method == 'POST':
        post.delete()
        data['form_is_valid'] = True
        posts = Post.objects.all()
        data['posts'] = render_to_string('home/home.html',{'posts':posts})
    else:
        context = {'post':post}
        data['html_form'] = render_to_string('home/post_delete.html',context,request=request)

    return JsonResponse(data)

Это мой post_delete. html

{% load crispy_forms_tags %}
<form method="POST" data-url="{% url 'home:post-delete' post.id %}" class="delete-form">
    {% csrf_token %}
        <div class="modal-header">
        <h5 class="modal-title" >Remove Post</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
        </button>
        </div>
        <div class="modal-body">
        <p class="lead"> Are you sure you want to remove this post? <strong>{{post.title}}</strong></p>
        </div>
        <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-danger">Remove Post</button>
        </div>
</form>

Это мой js код в static / js / main. js: 

$(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').html(data.posts);
                    $('#modal-post').modal('hide');
                } else {
                    $('#modal-post .modal-content').html(data.html_form)
                }
            }
        })
        return false;
    }


//delete
$('#post-list').on("click",".show-form-delete",ShowForm);
$('#modal-post').on("submit",".delete-form",SaveForm)
});

И это дом. html, где пользователь может видеть сообщения: 

    {% extends "home/base.html" %}
{% block content %}
<div id="post-list">
    {% for post in posts %}
      <div class="card border-dark mb-3" style="max-width: 36rem; border-radius: 0 !important;">
        <div class="card-header">
          <h4 class="card-title">
            <span><img class="rounded-circle article-img" src="{{ post.author.profile.image.url }}"></span>
            <a class="mr-2 text-dark font-weight-light" href="#">{{ post.author }}</a>
            <small class="float-sm-right">
              {% if post.author == user %}        
              <a class="text-right" href="{% url 'home:post-update' post.id %}" style="font-size: small;">Update</a>
              <button class="btn btn-danger show-form-delete" data-url="{% url 'home:post-delete' post.id %}" style="font-size: small;">Remove</button>
            {% endif %}
            </small>
          </h4>
        </div>
        <div class="card-body text-dark">  
          <p class="card-text">{{ post.content }}</p>
        </div>
        <div class="card-footer">
          <a class="mx-1" 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" href='#'><i class="fas fa-comment-alt"></i> Comment</a>
          <hr>
          <div>
            <p class="text-muted small">{{ post.likes.count }} Likes, # Comments
              <small class="float-sm-right">
                {{ post.date_posted|date:"F d, Y" }}
              </small>
            </p>
          </div>
        </div>
      </div>
      {% empty %}
      <h5 class="display-5">No posts to show :(</h5>
    {% endfor %}
    <div class="modal fade" id="modal-post">
      <div class="modal-dialog">
        <div class="modal-content"></div>
      </div>
    </div>
  </div>
{% endblock content %}

Спасибо за помощь заранее!

...