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

Question

我的老师在Django教我如何把数据表传递给模态班。我只想显示配置文件，点击表到模式。任何帮助都能让我心存感激，我只是这里的新手，因为我已经开始学习django了，因为我已经开始学习django了，下面是我目前的代码，它不起作用了。

在此之前 x- 后模

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

此错误与在您的.html部分中使用<script>方法有关。

.html方法函数执行：

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

因此，正如您所看到的，您正在尝试将HTML内容粘贴到您的数据中，这没有任何效果。您所需要做的就是使用.innerHTML属性在模型中应用元素的文本。

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

基于新请求的更新

正如注释中所述，您不必向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，但是考虑到您的技能和经验，这可能会很困难。所以我已经给你们提供了一些有用的东西，但绝不是优雅的。。