使用模态 window 编辑数据库记录

Question

我正在尝试根据保存到按钮值中的 ID 编辑一些数据库记录。

      @foreach ($employment as $empl)
        <button data-toggle="modal" data-target="#edit-empl" href="#edit-empl" class="btn btn-default editbtn-modal" value="{{ $empl->id }}" type="button" name="editbtn">Edit</button>
        <h3 class="profile-subtitle">{{ $empl->company }}</h3>
        <p class="profile-text subtitle-desc">{{ $empl->parseDate($empl->from) }} - {{ $empl->parseDate($empl->to) }}</p>
      @endforeach

正如您在此处看到的，我有一个附加了 ID 的编辑按钮。当我单击编辑时，我打开一个模式 window 来编辑字段，然后提交表单。问题是，我不确定如何从按钮中获取该 id 到模态 window 中，以便我可以比较值并显示正确的字段..

<form class="app-form" action="/profile/employment/edit/{id}" method="POST">

  {{ csrf_field() }}

  <input class="editID" type="hidden" name="editID" value="">

  @foreach ($employment as $empl)
    @if ($empl->id == buttonidhere)
      <div class="form-group">
        <label for="company">Company:</label>
        <input type="text" name="company" value="{{ $empl->company }}">
      </div>

      <div class="form-group">
        <label for="month">From:</label>
        <input type="date" name="from" value="{{ $empl->from }}">
      </div>

      <div class="form-group">
        <label for="to">To:</label>
        <input type="date" name="to" value="{{ $empl->to }}">
      </div>
    @endif
  @endforeach

  <div class="row">
    <div class="col-sm-6">
      <input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes">
    </div>
  </div>
</form>

我能够使用 javascript 将按钮值传递到模式中。我将其放入隐藏输入中，但这对我没有任何帮助，因为我无法在为了比较值..

Answer 1

一个解决方案是发送您想要的详细信息，就像将 id 发送到模态框一样。

将变量发送到模态的正确方法是将其包含在打开模态的按钮中：

data-variablename="{{$your-variable}}"

使用此 jQuery 将变量的值设置为模态。其中 edit-empl 是您的模式 ID 和按钮的数据目标

 $('#edit-empl').on('show.bs.modal',function (e) {
            var variablename= $(e.relatedTarget).data('variablename');

            $(e.currentTarget).find('input[id="yourinputID"]').val(variablename);

Answer 2

解决方案 1：使用 ajax
第 1 步：在 laravel 中创建一条路线，它将 return 一个 JSON object 包含所请求员工的雇用数据。例如，

/profile/employment/data/{empl_id}

将为您获取id为empl_id的就业数据。

第 2 步：更改您的表格如下

<form class="app-form" action="/profile/employment/edit/{id}" method="POST">
  <input class="editID" type="hidden" name="editID" value="">
  <div class="form-group">
    <label for="company">Company:</label>
    <input type="text" name="company" value="">
  </div>

  <div class="form-group">
    <label for="month">From:</label>
    <input type="date" name="from" value="">
  </div>

  <div class="form-group">
    <label for="to">To:</label>
    <input type="date" name="to" value="">
  </div>
  <div class="row">
    <div class="col-sm-6">
      <input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes">
    </div>
  </div>
</form>

第三步：使用javascript(jQuery)使用ajax获取数据，并以模态加载到表单中。

jQuery代码：

$(document).on("click", ".editbtn-modal", function() {
  var id = $(this).val();  
  url = "/profile/employment/data/"+id;
  $.ajax({
    url: url,
    method: "get"    
  }).done(function(response) {
    //Setting input values
    $("input[name='editID']").val(id);
    $("input[name='company']").val(response.company);
    $("input[name='to']").val(response.to);
    $("input[name='from']").val(response.from);

    //Setting submit url
    $("modal-form").attr("action","/profile/employment/edit/"+id)
  });
});

解决方案 2：使用远程模式
第1步：为例如创建另一个 blade 文件。 editEmployee.blade.php 并在其中添加上面的表格。

<form class="app-form" id="modal-form" action="/profile/employment/edit/{{ $empl->id }}" method="POST">

  {{ csrf_field() }}

  <input class="editID" type="hidden" name="editID" value="{{ $empl->id }}">
  <div class="form-group">
    <label for="company">Company:</label>
    <input type="text" name="company" value="{{ $empl->company }}">
  </div>

  <div class="form-group">
    <label for="month">From:</label>
    <input type="date" name="from" value="{{ $empl->from }}">
  </div>

  <div class="form-group">
    <label for="to">To:</label>
    <input type="date" name="to" value="{{ $empl->to }}">
  </div>
  <div class="row">
    <div class="col-sm-6">
      <input type="submit" class="btn btn-primary profile-form-btn" value="Save Changes">
    </div>
  </div>
</form>

第 2 步：创建一个控制器，它将 return 上面的形式 HTML。
提示：使用 render() 函数。 example

第 3 步：在使用 javascript(jQuery) 显示之前将表单加载到模态 window 考虑到您的模态 ID 是 "emp-modal"

$(document).on("click", ".editbtn-modal", function() {
  var id = $(this).val();  
  url = "/profile/employment/data/"+id;
  $('#emp-modal').modal('show').find('.modal-body').load(url);  
});

使用模态 window 编辑数据库记录

Edit db record with modal window

laravel

laravel-5.3

laravel-5.4