load dynamic data in html modal in Django

user_12939421 0
Viewed 769

I have single html page with dynamic images from database in Django. I also have a modal in the same page set to invisible and opens when image is clicked.

My intension is when I click on any image it should open a html model with the clicked image and its description text from db.

How do I display data of the current clicked image and its description. I have tried to pass {{profile.image.url}} but this gives one information on click to all images.

I didn't have to give sample code on this.

css django-views django html python
2 Answers

You can achieve this by passing the id of the object you want to retrieve using AJAX request.

Let's suppose, this is your HTML table

<table class="table">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Date</th>
      <th>Status</th>
      <th>Actions</th>
    </tr>
  </thead>

  <tbody>
    {% for incident in page_obj %}
      <tr>
        <td>{{ incident.id }}</td>
        <td>{{ incident.title }}</td>
        <td>{{ incident.created }}</td>
        <td>
          <span class="badge badge-pill badge-success">{{ incident.get_status_display }}</span>
        </td>
        <td>
          <button class="btn btn-sm btn-outline-info" onclick="populateForm('{{ incident.id }}')" data-toggle="modal" data-target="#incidentModal">Edit</button>
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

Use this type of function according to your model and fields

 function populateForm(id) {
    $.ajax({
      url: "{% url 'incidents:update' 1 %}".replace("1", id),
      type: "GET",
      success(response) {
        let incident = JSON.parse(response)[0].fields;
        $("#id_title").val(incident.title);
        $("#id_description").val(incident.description);
        $("#id_responder").val(incident.responder);
        $("#id_status").val(incident.status);
        $("#id_functional_impact").val(incident.functional_impact);
        $("#id_information_impact").val(incident.information_impact);
        $("#id_recovery_impact").val(incident.recovery_impact);
      },
    });
  }

views.py

from django.core import serializers
from django.http import JsonResponse, Http404
from django.views.generic import UpdateView
from incidents.models import Incident
from incidents.forms import IncidentForm


class IncidentUpdateView(UpdateView):
    form_class = IncidentForm
    model = Incident

    def get_success_url(self):
        return reverse('incidents:list')

    def get(self, request, pk):
        if request.is_ajax():
            incident = get_object_or_404(Incident, pk=pk)
            response = serializers.serialize("json", [incident])
            return JsonResponse(response, safe=False)
        raise Http404('Page not found')
user_110033570

There are 2 options on how to achieve this:

  1. render modals for all images with django and open them when user clicks one of the images.
  2. create 1 modal and write some javascript to fetch information about the clicked image in the background. Note, that you'll also need to create an endpoint in Django that will accept image ID and return image information.
user_79994030
Related