How to display django generic detail view inside a modal with ajax

Question

I want to display the content of an announcement inside a modal when a user clicked on the announcement list.

This will be the trigger for the modal in my announcement_list.html:

<form name="form" action="#" id="form_have_product_{{y.id}}" method="POST">
    {% csrf_token %}
    <a href="#" id="{{ announcement.pk }}" type="button" class="btn btn-info view-announcement" data-url="{% url 'announcement-detail' pk=announcement.id %}" style="float: right;">View</a>
</form>

This is my function in my views.py:

def get_announcement(request, pk): announcement = Announcement.objects.filter(announcement_id=pk)

context = {
    'title': announcement.title,
    'about': announcement.about,
    'author': announcement.author,
    'post_date': announcement.post_date
}

return render(request, 'announcement-details-modal.html', context)

For the urls.py:

urlpatterns = [path('announcement/<int:pk>/', get_announcement, name='announcement-detail'),]

And this is the function for when the user clicks on the announcement list:

$(".view-announcement").on("click", function() {
var target_url = $(this).attr("data-url");
var csrftoken = $("[name=csrfmiddlewaretoken]").val();
  $.ajax({
    url: target_url,
    headers:{
        "X-CSRFToken": csrftoken
    },
    success: function(data) {
      $("#modal").modal("toggle");
      $("#modal-content").html(data);
    }
  });
});

Currently this code returns the server responded with a status of 500 (Internal Server Error)

question from:https://stackoverflow.com/questions/65640695/how-to-display-django-generic-detail-view-inside-a-modal-with-ajax

Answer 1

Waitting for answers