django how show detail page in modal

Question

I have a problem. I'm a beginner in django and python and I need help. I have a page with list of cars and all cars have a button with info. Now, this button redirects me to another page but I want to open this detail view not in a new page but in modal on the same page. I tried many solutions but none of them didn't work in my case.

This is my page with a list of cars car_list.html . It's about car_detailURL.

{% extends 'main/main.html' %}
{% block title %} Lista samochodów {% endblock %}
{% load static %}


{% block content %}
    {% for carTEMP in cars %}
    <div class="card bg-light mb-3">
        <h5 class="card-header">
            {{carTEMP}}
        </h5>
        <div class="card-body">
            <img src="/media/{{carTEMP.car_photo}}">
            <div class="row">
                <div class="col-sm-auto">
                    <p>Data produkcji: {{carTEMP.car_date_of_prod}}</p>
                    <p>Numer rejestracyjny: {{carTEMP.car_registration_nr}}</p>
                </div>
                <div class="col-sm-auto">
                    <a href="{% url 'car_detailURL' carTEMP.id %}"><i class="fas fa-2x fa-info-circle"></i></a>
                    <a href="{% url 'edit_carURL' carTEMP.id %}"><i class="fas fa-2x fa-edit"></i></a>
                    <a href="{% url 'delete_carURL' carTEMP.id %}"><i class="fas fa-2x fa-trash-alt"></i></a>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
    
    {% include "main/pagination.html" with page=cars %}
{% endblock %}

And this is car_detail.html which I want to display in modal.

{% extends "main/main.html" %}
{% load static %}

{% block title %}
Szczególy
{% endblock %}

{% block content %}
    <p><strong>Marka:</strong> {{ car.car_brand }}</p>
    <p><strong>Model:</strong> {{ car.car_model }}</p>
    <p><strong>Silnik:</strong> {{ car.car_engine }}</p>
    <p><strong>Rok produkcji:</strong> {{ car.car_date_of_prod }}</p>
    <p><strong>Numer rejestracyjny:</strong> {{ car.car_registration_nr }}</p>
{% endblock %}

And my views.py wiht car_detail view.

@login_required
def car_detail(request, id):
    car = get_object_or_404(Car,
                            id=id,
                            car_available=True)

    return render(request, 'cars/car_detail.html',
                  {'car': car})

And urls.py file:

from django.urls import path, include
from . import views


urlpatterns = [
    path('all/', views.cars_list, name='cars_listURL'),
    path('available/', views.cars_list_available, name='cars_list_availableURL'),
    path('new/', views.new_car, name='new_carURL'),
    path('edit/<int:id>/', views.edit_car, name='edit_carURL'),
    path('delete/<int:id>/', views.delete_car, name='delete_carURL'),
    path('<int:id>/', views.car_detail, name='car_detailURL')
]

I don't need ready-made solutions. Carrot will be fine too. I need advice in which direction I must go

Hey, Have a look at this https://stackoverflow.com/questions/50196148/pass-value-to-bootstrap-modal-form-with-django — Rafi, Aug 17 '20 at 19:04
I tried but not working but this is similar to that i want to do. Maybe i'm doing something wrong. — user14120474, Aug 18 '20 at 09:07
so when you say it's not working , what exactly not working? — Rafi, Aug 18 '20 at 09:50
The model didn't show up. What should i have in modal form action from example above? — user14120474, Aug 18 '20 at 10:22
I also tried this: https://stackoverflow.com/questions/32958219/getting-bootstraps-modal-content-from-another-page but modal is empty — user14120474, Aug 18 '20 at 12:05
I found this : https://stackoverflow.com/questions/45310054/passing-data-form-datatable-to-modal-django This is pretty much for me but modal didn't show up. Maybe in bootstrap 4 i need to do this i diffrent way — user14120474, Aug 18 '20 at 12:41
i would suggest to start update your question according to the problem that you are facing, like you mention earlier, the modal open empty,not showing, it will help to give you more direction, right now it is too vague — Rafi, Aug 18 '20 at 17:29

score 0 · Answer 1 · edited Aug 17 '20 at 19:10

For things like this would be usefull if you work with bootstrap its pretty easy, otherwise, you have to wire Javascript to make the modal show and hide.

I will give you an example to make you an idea

in carlist.html ,

...
<button id="myBtn">Open Modal</button>
...
{% include "main/car_detail.html" %}
{% endblock %}

for car_detail.html i will give you an example which you could get insights,

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}



/* The Close Button */
.close {
  color: #aaaaaa;
  font-size: 28px;
  font-weight: bold;
}



.btn{
  margin-top: 10%
}

.span-container{
  display:flex;
  justify-content: space-between;
}

</style>
</head>
<body>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="span-container">
      <h4>Crear Torneo</h4>
      <span class="close">&times;</span>
    </div>
      
         <div>
            ...
         </div>

</div>

<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

</script>

</body>
</html>

At first when i include car_detail.html on car_list.html it will be visibly on page and car_detail need car id to show appropriate information about chosen car. — user14120474, Aug 18 '20 at 08:17

django how show detail page in modal

1 Answers1