Styjun

I am loading bootstrap cards with brief university details using a for loop with context passed from my django view. Now, I want to display a modal with more details depending on which card's button I press. I would like this dynamic data to be displayed without reloading/refreshing the page.

this is my views.py

from django.shortcuts import get_object_or_404
from django.http import JsonResponse
from university.models import University


def dispUni(request):

 # hoping to retrieve university.id from the clicked button
 uniPK = request.GET.get('universityId')

 uniDetails = 
 'university': get_object_or_404(University, id=uniPK)
 

 return JsonResponse(uniDetails)

this is my urls.py

from django.urls import path

from . import views

urlpatterns = [
 path('', views.dispUni, name='uniDetails')
]

This is my html page where I want to display this information

<div class="container-fluid d-flex justify-content-center">
 <!-- display Universities -->
 <div class="row mt-5">
 % if universities %
 % for university in universities %

 <div class="card mx-4 uniCard" style="width: 20rem;">
 <img src="university.photo_main.url" class="card-img-top" alt="university.title">
 <div class="card-body">
 <h5 class="card-title Dark-shades-text">university.title</h5>
 <p class="card-text">
 <i class="fas fa-map-marked-alt"></i>&nbsp;university.city, university.state <br>
 <i class="fas fa-phone"></i>&nbsp;university.phone_number
 </p>
 <!-- Button trigger modal -->
 <button type="button" value="university.id" id="btn-UniModaluniversity.id" class="btn main-color" data-toggle="modal" data-target="#UniDetails">
 View Details
 </button>
 </div>
 </div>

 % endfor %
 % endif %
 </div>
 </div>

 <!-- Modal for University Details -->
 <div class="modal fade" id="UniDetails" tabindex="-1" role="dialog" aria-labelledby="UniInformation" aria-hidden="true">
 <div class="modal-dialog modal-dialog-scrollable" role="document">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="UniModalTitle"><!-- Expected title of university button pressed --></h5>
 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 <span aria-hidden="true">&times;</span>
 </button>
 </div>
 <div class="modal-body">
 <!-- Expected details of university button pressed -->
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 <button type="button" class="btn btn-primary">Apply</button>
 </div>
 </div>
 </div>
 </div>

I believe this could easily be solved with Javascript. You could place an onclick attribute on the button that calls a function to update the model.

The title can be updated with:

document.getElementById("UniModalTitle").innerHTML = "University Title";

Then for updating the details it's the same process but with a different id. You'll need to give the model body an id to make this work.