如何在Django中将数据表传递给模态？

Question

我的老师给了我关于如何在 Django 中将数据表传递给模态类的作业。 我只想在表格中显示配置文件单击以模态。任何帮助都可以让我感激不尽。我只是这里的新手，因为已经快 2 周了，我已经开始学习 django 下面是我目前的代码，它不工作。

Before | modal after

accounts.html

<table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Action</th>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                            <th>Username</th>
                         
                            <th>Date joined</th>
                        </tr>
                    </thead>

                    <tbody>
                    {% for user_information in user_information %}
                        <tr>
                            <td><a class="btn btn-info" class="open-modal"  onClick = "exampleModal({{ user_information.first_name }},{{ user_information.last_name }})">Edit</a></td>
                            <td>{{user_information.first_name}}</td>
                            <td>{{user_information.last_name}}</td>
                            <td>{{user_information.email}}</td>
                            <td>{{user_information.username}}</td>
                            <td>{{user_information.date_joined}}</td>
                        </tr>
                    {% endfor %}
                    </tbody>  
                </table>
                
                  <div id="modal-div">
                    <p id="firstNameValueId">Some text in the Modal..</p>
                    <p id="secondNameValueId">Some text in the Modal..</p>
                 </div>

我的模态

<div id="modal-div">
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Personal Information</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
            
                    <form action="#" method="post">
                        <label for="firstname">  <p id="firstNameValueId">Some text in the Modal..</p></label>
                        <div>
                            <input type="text" class="custom-input1 form-control " id="firstNameValueId" name="firstname" placeholder="First name" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname">Last name</label>
                        <div>
                            <input type="text" class="form-control" id="secondNameValueId" name="lastname" placeholder="Last name" />
                        </div>
                    </div>
                </form>
            </div>
        </div>

js

script type="text/javascript">

        function exampleModal(firstName,lastName){
            document.getElementById('firstNameValueId').innerHTML = firstName
            document.getElementById('secondNameValueId').innerHTML = lastName
            $("#modal-div").modal();
        }
    </script>

我的完整代码

{% extends 'navigation.html' %}
{% block content %}  

 <script> 

    function exampleModal(firstName,lastName){
        $( document ).ready(function() {
            document.getElementById('firstNameValueId').innerHTML = firstName
            document.getElementById('secondNameValueId').innerHTML = lastName
            $("#exampleModal").modal();
        });
    }

</script>



    <div class="tabs-animation">
        <div class="card mb-3">
            <div class="card-header-tab card-header">
                <div class="card-header-title font-size-lg text-capitalize font-weight-normal"><i
                        class="header-icon lnr-laptop-phone mr-3 text-muted opacity-6"> </i>Accounts Information
                </div>
                <div class="btn-actions-pane-right actions-icon-btn">
                    <div class="btn-group dropdown">
                        <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                            class="btn-icon btn-icon-only btn btn-link">
                            <i class="pe-7s-menu btn-icon-wrapper"></i>
                        </button>
                        <div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu-right rm-pointers dropdown-menu-shadow dropdown-menu-hover-link dropdown-menu">
                            <h6 tabindex="-1" class="dropdown-header">Header</h6>
                            <button type="button" tabindex="0" class="dropdown-item">
                                <i class="dropdown-icon lnr-inbox"> </i><span>Menus</span>
                            </button>
                            <button type="button" tabindex="0" class="dropdown-item">
                                <i class="dropdown-icon lnr-file-empty"> </i><span>Settings</span>
                            </button>
                            <button type="button" tabindex="0" class="dropdown-item">
                                <i class="dropdown-icon lnr-book"> </i><span>Actions</span>
                            </button>
                            <div tabindex="-1" class="dropdown-divider"></div>
                            <div class="p-3 text-right">
                                <button class="mr-2 btn-shadow btn-sm btn btn-link">View Details</button>
                                <button class="mr-2 btn-shadow btn-sm btn btn-primary">Action</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-body">
                 <table style="width: 100%;" id="example" class="table table-hover table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Action</th>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                            <th>Username</th>
                         
                            <th>Date joined</th>
                        </tr>
                    </thead>

                    <tbody>
                    {% for user_information in user_information %}
                        <tr>
                            <td><a class="btn btn-info"   onClick = "exampleModal('{{user_information.first_name}}','{{user_information.last_name}}')">Edit</a></td>
                            <td>{{user_information.first_name}}</td>
                            <td>{{user_information.last_name}}</td>
                            <td>{{user_information.email}}</td>
                            <td>{{user_information.username}}</td>
                            <td>{{user_information.date_joined}}</td>
                        </tr>
                    {% endfor %}
                    </tbody>  
                </table>
                
                 
            </div>
        </div>
    </div>
{% endblock %}


<div id="modal-div">
        <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Personal Information</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
            
                    <form action="#" method="post">
                        <label for="firstname">  <p id="firstNameValueId">Some text in the Modal..</p></label>
                        <div>
                            <input type="text" class="custom-input1 form-control " id="firstNameValueId" name="firstname" placeholder="First name" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="lastname">Last name</label>
                        <div>
                            <input type="text" class="form-control" id="secondNameValueId" name="lastname" placeholder="Last name" />
                        </div>
                    </div>
                </form>
            </div>
        </div>

Answer 1

错误在于在您的 <script> 部分中使用了 .html 方法。

.html 方法函数做了：

获取匹配元素集中第一个元素的 HTML 内容。

如您所见，您正在尝试将HTML 内容与您的数据一起粘贴，但没有效果。您需要做的就是使用.innerHTML 属性在模态中应用元素的文本，例如

document.getElementById('<Element>').innerHTML = data.<fieldValue>;

更新 - 根据您的新要求

正如 cmets 中所说，您不必向 back-end 发出请求来获取您已经可用的数据。您可以简单地将这些值传递给 javaScript 函数，然后该函数可以更新和打开模式。

首先，改变这个：

<div id="modal-div">
   <p id="firstNameValueId">Some text in the Modal..</p>
   <p id="secondNameValueId">Some text in the Modal..</p>
</div>

和

<td><a class="btn btn-info" class="open-modal"  onClick = "showValuesInModal('{{ user_information.first_name }}','{{ user_information.last_name }}')">Edit</a></td>

其次，删除 jQuery 函数并创建一个简单的 JavaScript 函数来接受值

<script>

function showValuesInModal(firstName,lastName){
    document.getElementById('firstNameValueId').innerHTML = firstName
    document.getElementById('secondNameValueId').innerHTML = lastName
    $("#modal-div").modal();
}
<script>

现在这将设置 p 标记中的值，并根据需要打开模式。

还要注意，有很多更好和更有效的方法，主要是使用 Bootstrap 和 jQuery，但考虑到你的技能和经验，这可能会很困难。所以我为你提供了一些可行但绝不优雅的东西。