How to display dynamic content from database on bootstrap modal by using button id on django

问题: 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 depend...

问题:

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-UniModal{{university.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>

回答1:

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.

  • 发表于 2019-03-27 14:30
  • 阅读 ( 668 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除