实现与模式框关联的作业删除按钮

Posted 2023-03-14

【中文标题】实现与模式框关联的作业删除按钮

【英文标题】：Implement a Job Delete button associated with a modal box

【发布时间】：2018-09-18 14:58:15

【问题描述】：

我的逻辑是，如果用户按下黄色停止按钮，那么模态框将显示在删除表格中的目标作业之前获取一些用户的评论，如下图所示。

点击黄色的删除按钮 弹出模态框，用户可以插入一些删除操作注释。 点击提交，然后点击的作业将在表格中删除。

但问题是 例如，当我单击作业号 10 的停止按钮删除作业时，作业号 1 被删除而不是目标作业。好像总是删除表中 Job ID 的第一行。

如何修改？

查看

!! Form::open(['route' => ['jobs.destroy', $job->id], 'method' => 'delete', 'cla'btn-group', 'id' => 'jobStop']) !!
!! Form::button('<i class="glyphicon glyphicon-stop"></i>', [
    'type' => 'button',
    'class' => 'btn btn-warning btn-xs',
    'data-toggle' => 'modal',
    'data-id' => 'jobStopButton',
    'data-target' => '#jobStopModal'                                
    ]) !! 
!! Form::hidden('stop_comment', $job->stop_comment, ['id' => 'jobComment']) !! 
!! Form::close() !!

jQuery

$('#jobStopButton').on('click', function (e) 
    e.preventDefault();    
    $("#jobStopModal").modal(
        show: true,
        backdrop: 'static',
        keyboard: true)
    );

$('#btnSave').on('click', function () 
    let newStopComment = $('input#jobStopComment').val();
    $('#jobComment').val(newStopComment);
    $('#jobStopModal').modal('hide');
    $('#jobStop').submit();
);

模态 HTML

-- Modal box define start --
<div class="modal fade" id="jobStopModal" tabindex="-1" role="dialog">
    <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">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">Are you sure to stop work?</h4>
            </div>
            <div class="modal-body">
                <p>Kommentar:</p>
                <input type="text" id="jobStopComment">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Lukk</button>
                &nbsp;
                <span class="pull-right">
                <button type="button" id="btnSave" class="btn btn-primary">Lagre endringer</button>
                </span>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
-- Modal box define end --

【参考方案1】：

问题来自您提交的表单的 id。这一行：$('#jobStop').submit();。这将始终选择带有#jobStop 的第一个表单。您应该将其更改为 .jobStop 类并使用它来提交正确的表单。 您可以按照以下步骤修复它：

首先将data-job_id 添加到您的按钮并添加一个类.jobStopButton（html 元素的ID 在页面上应该是唯一的）。

!! Form::button('<i class="glyphicon glyphicon-stop jobStopButton"></i>', [
    'type' => 'button',
    'class' => 'btn btn-warning btn-xs',
    'data-toggle' => 'modal',
    'data-id' => 'jobStopButton',
    'data-target' => '#jobStopModal',
    'data-job_id' => $job->id                                
]) !! 

然后在显示模态集的 javascript 中：

$('.jobStopButton').on('click', function(e) 
  e.preventDefault();
  $("#jobStopModal").modal(
    show: true,
    backdrop: 'static',
    keyboard: true
  )
  $("#jobStopModal").find('input[name="job_id"]').val($(this).data('job_id'));
);

注意：您应该在模式中添加一个名为 job_id 的字段。

然后当按钮被保存后，您将能够找到正确的表单：

$('#btnSave').on('click', function () 
        let jobId = $("#jobStopModal").find('input[name="job_id"]').val();
    let form = $(".jobStopButton[data-job_id=\"" +job_id + "\"]").parents('form');
    let newStopComment = $('input#jobStopComment').val();
    form.find('.jobComment').val(newStopComment);
    $('#jobStopModal').modal('hide');
    form.submit();
);

另一个注意事项：您还应该将#jobComment 的id 更改为.jobComment 类，因为它们也在重复。

希望有帮助，我还没有测试过。

【讨论】：

感谢您的准确和批判性的回答。祝你有美好的一天:)

@Magnetic 我已经用更多细节编辑了我的答案。

您的修改不起作用，无法将 Stopcomment 发布到 DB。你能给出正确的修改吗？ :(

当我使用您推荐的所有代码进行测试时，模式无法正常工作，因此我也无法输入任何评论，谢谢。所以我回到了我的原始代码，你的建议只是修改.jobStop 然后模态工作正常，但发表评论数据没有发送到数据库:(

你能再检查一下你的代码哪里不正确吗？谢谢。如何修改模态 HTML？我是<input type="text" id="jobStopComment" name="job_id">。