如何将数据从 django 传递到引导模式？

Posted 2023-02-24

【中文标题】如何将数据从 django 传递到引导模式？

【英文标题】：How to pass data from django to bootstrap modal?

【发布时间】：2020-02-24 07:07:04

【问题描述】：

我想将 django 数据传递给引导模式。

现在我正在使用django-bootstrap-modal-forms pypi 包。

我已经看到了这个documents 并尝试了它，但它不起作用。

我只需要执行阅读功能。

我应该如何设置它以传递该模式的数据？

浮动模态组件和列表的部分在同一个html文件中。

模态组件如下写的时候没有打印Item。

% if item %
 item
% else %
  No Item
% endif %

views.py

from bootstrap_modal_forms.generic import BSModalReadView

...

def index(request):
    items = Item.objects.all()

    return render(request, 'index.html', 
        'items': items,
        'search_items': items
    )

...

class DetailLectureReadView(BSModalReadView):
    model = Item


class DetailTaskReadView(BSModalReadView):
    model = Item

urls.py

from django.contrib import admin
from django.urls import path
from myapp.home import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name="index"),
    path('search/', views.serarch, name="search"),
    path('register/<int:id>', views.register, name="register"),
    path('delete/<int:id>', views.delete, name="delete"),
    path('detail-lecture/<int:id>',
         views.DetailLectureReadView.as_view(), name="detail_lecture"),
    path('detail-task/<int:id>',
         views.DetailTaskReadView.as_view(), name="detail_task")
]

models.py

from django.db import models


class Item(models.Model):
    lecture_code = models.CharField(max_length=10)
    lecture = models.CharField(max_length=100)
    professor = models.CharField(max_length=20)
    location = models.CharField(max_length=10)
    start_time = models.IntegerField()
    end_time = models.IntegerField()
    day_of_week = models.CharField(max_length=5)
    is_register = models.BooleanField(default=False)

    def __str__(self):
        return self.lecture

index.html（讲座列表）

% if search_items %
        % for item in search_items %
        <ul class="list-lecture">
            <li class="card-lecture" >
                <a class="lecture-title detail_lecture" 
                   href="#modal-lecture-info" 
                   data-toggle="modal" 
                   data-target="modal-lecture-info" 
                   data-id="% url 'detail_lecture' item.id %">
                 item.lecture 
                </a>
                <h6 class="lecture-time">
                    <i class="material-icons ic-lecture-info">access_time</i>
                    <span>
                     item.start_time|stringformat:"02d"  -  item.end_time|stringformat:"02d"  | 
                    % if item.day_of_week|length == 2 %
                    ( item.day_of_week.0 ), (item.day_of_week.1)
                    % else %
                    ( item.day_of_week.0 )
                    % endif %
                    </span>
                </h6>
                <ul class="list-lecture-info">
                    <li>Code :  item.lecture_code </li>
                    <li>Professor :  item.professor </li>
                    <li>Location :  item.location </li>
                </ul>
            </li>
        </ul>
        % endfor %
        % else %
        No result
        % endif %

index.html（模态）

<div class="modal fade" id="modal-lecture-info" role="dialog" aria-hidden="true" id="modal" >
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <h3 class="lecture-title"> item.lecture </h3>
                <ul class="lecture-info">
                    <li class="lecture-time">
                        <i class="material-icons ic-lecture-info">access_alarm</i>
                        <span>Lecture Time :  item.start_time|stringformat:"02d"  -  item.end_time|stringformat:"02d"  | 
                        % if item.day_of_week|length == 2 %
                        ( item.day_of_week.0 ), ( item.day_of_week.1 )
                        % else %
                        ( item.day_of_week.0 )
                        % endif %
                        </span>
                    </li>
                    <li class="lecture-code">
                        <i class="material-icons ic-lecture-info">code</i>
                        <span>code :  item.code </span>
                    </li>
                    <li class="lecture-code">
                        <i class="material-icons ic-lecture-info">school</i>
                        <span>professor :  item.professor </span>
                    </li>
                    <li class="lecture-code">
                        <i class="material-icons ic-lecture-info">business</i>
                        <span>location :  item.location </span>
                    </li>
                </ul>
                <div class="lecture-description">
                    <p class="txt-description">this is description
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="location.href='% url 'register' 2 %'">Lecture Register</button>
            </div>
        </div>
    </div>
</div>

script.js

$(".card-lecture").click(function() 
    $("#modal-lecture-info").modal("show");
    $(".detail_lecture").each(function() 
        $(this).modalForm(
            formURL: $(this).data("id")
        );
    );
);

【参考方案1】：

我用 jQuery 解决了这个问题

【讨论】：

分享您找到的解决方案很重要。