从按钮将数据传递到模态

Question

我想使用查询参数向我的 django 视图发出发布请求。查询参数来自 html 模板。在模板中的接受按钮上，将打开一个模式。模态中有一个接受按钮。我想将数据从按钮传递到模式，然后单击模式按钮，它将对视图进行ajax调用。但我无法将值从按钮传递到模式。 这是我的代码：

模板的按钮部分：（可在此处访问值

{{ supervisor.supervisor.user.id }}

和

{{ supervisor.supervisor.user.id }}

。）

{% for supervisor in proposal.supervisors %}
                            <tr>
                                <td>
                                    {% if supervisor.committee_status == 0 %}
                                        <span class="badge badge-warning text-dark">Pending</span>
                                    {% elif supervisor.committee_status == 1 %}
                                        <span class="badge badge-success text-success">Accepted</span>
                                    {% elif supervisor.committee_status == 2 %}
                                        <span class="badge badge-danger text-danger">Rejected</span>
                                    {% elif supervisor.committee_status == 3 %}
                                        <a href = "{% url 'proposal_modification' proposal.proposal.id supervisor.supervisor.user.id%}">
                                        <span class="badge badge-info text-info " style="text-decoration: underline;"> Modifications</span>
                                    {% endif %}
                                    <div class="btn-group" role="group">
                                        <button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#acceptModal" data-supervisor-id="{{ supervisor.supervisor.user.id }}" data-proposal-id="{{ proposal.proposal.id }}">Accept</button>
                                        <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#rejectModal" data-supervisor-id="{{ supervisor.supervisor.user.id }}" data-proposal-id="{{ proposal.proposal.id }}">Reject</button>
                                    </div>
                                    
                                    
                                    
                                </td>
                            </tr>
                            
                        {% endfor %}

模态：

<div class="modal fade" id="acceptModal" tabindex="-1" role="dialog" aria-labelledby="acceptModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="acceptModalLabel">Accept Proposal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Add content for the Accept modal here -->
                Are you sure you want to accept this proposal?
                This action cannot be undone!
                <p>Supervisor ID: <span id="modalSupervisorId"></span></p>
        <p>Proposal ID: <span id="modalProposalId"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" onclick="acceptProposal()" data-supervisor-id="{{ supervisor.supervisor.user.id }}" data-proposal-id="{{ proposal.proposal.id }}">Accept</button>
            </div>
        </div>
    </div>
</div>

Javascript：

function acceptProposal() {
    // Get the proposal ID or other relevant data
    var supervisorId = $('#acceptModal').find('.btn-success').data('supervisor-id');

    var proposalId = $('#acceptModal').find('.btn-success').data('proposal-id');


    // Send the data to the Django view using AJAX
    $.ajax({
        url: '/api/accept_proposal',  // Replace with the actual URL of your Django view
        type: 'POST',
        data: {
            proposalId: proposalId
        },
        success: function (response) {
            // Handle success
            console.log('Proposal accepted:', response);
            // You may close the modal or perform other actions as needed
            $('#acceptModal').modal('hide');
        },
        error: function (error) {
            // Handle error
            console.error(error)
        }
    });
}

js 文件中

supervisorId

和

proposalID

的值是空字符串。这是因为它从模态中获取值

{{ supervisor.supervisor.user.id }}

和

{{ supervisor.supervisor.user.id }}

，而模态中的这些值不存在。我如何从按钮获取这些。

Answer 1

要将值从按钮传递到模式，然后传递到 JavaScript 函数，您需要在代码中进行一些调整。

更新模式触发按钮以包含数据属性：

<button type="button" class="btn btn-sm btn-success accept-btn" data-toggle="modal" data-target="#acceptModal" data-supervisor-id="{{ supervisor.supervisor.user.id }}" data-proposal-id="{{ proposal.proposal.id }}">Accept</button>
<button type="button" class="btn btn-sm btn-danger reject-btn" data-toggle="modal" data-target="#rejectModal" data-supervisor-id="{{ supervisor.supervisor.user.id }}" data-proposal-id="{{ proposal.proposal.id }}">Reject</button>

更新模式以使用

event.relatedTarget

访问触发模式的按钮。这样就可以从触发按钮中提取数据属性了：

<div class="modal fade" id="acceptModal" tabindex="-1" role="dialog" aria-labelledby="acceptModalLabel" aria-hidden="true">
    <!-- ... other modal code ... -->
    <div class="modal-body">
        <!-- Add content for the Accept modal here -->
        Are you sure you want to accept this proposal?
        This action cannot be undone!
        <p>Supervisor ID: <span id="modalSupervisorId"></span></p>
        <p>Proposal ID: <span id="modalProposalId"></span></p>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success accept-btn-modal">Accept</button>
    </div>
</div>

更新 JavaScript 以处理

show.bs.modal

事件，以在显示模式时提取和设置数据属性：

$('#acceptModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var supervisorId = button.data('supervisor-id');
    var proposalId = button.data('proposal-id');

    // Set the data in the modal
    $('#modalSupervisorId').text(supervisorId);
    $('#modalProposalId').text(proposalId);

    // Attach the data to the Accept button in the modal
    $('.accept-btn-modal').data('supervisor-id', supervisorId);
    $('.accept-btn-modal').data('proposal-id', proposalId);
});

// Update the acceptProposal function to use the data from the modal button
function acceptProposal() {
    var supervisorId = $('.accept-btn-modal').data('supervisor-id');
    var proposalId = $('.accept-btn-modal').data('proposal-id');

    // Rest of your AJAX code...
}