Question

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

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

但问题是例如，当我单击作业No.10的停止按钮删除作业时，删除作业No.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 --}}

Answer 1

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

首先在按钮上添加data-job_id＆amp;添加一个类.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，因为它们也在重复。

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

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

1 个答案: