Laravel bootstrap 使用模式删除确认

Question

我在将数据传输到我的删除确认模式时遇到问题。我已经验证我的删除路由可以从数据库中删除数据，但我面临的问题是我无法将 contact->id 传递到模态以访问删除。

模态

<!-- Delete Warning Modal -->
<div class="modal modal-danger fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <form action="{{ route('contacts.destroy', 'id') }}" method="post">
                @csrf
                @method('DELETE')
                <input id="id" name="id")>
                <h5 class="text-center">Are you sure you want to delete this contact?</h5>
                <input id="firstName" name="firstName"><input id="lastName" name="lastName">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
            </div>
            </form>
        </div>
    </div>
</div>
        <!-- End Delete Modal -->

Blade 通话

<td>
    <a href="#" 
        data-id={{$value->id}}
        class="btn btn-danger delete" 
        data-toggle="modal" 
        data-target="#deleteModal">Delete</a>
</td>

联系控制器

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        // Need to find all addresses with the contacdt Id and delete them.
        Address::where('contact_id', $id)->delete();
        Contact::find($id)->delete();
        return redirect()->route('contacts.index')->with('success','Contact deleted success');   
    }

总而言之，我的问题是让 jQuery 将数据传输到模态，这样我就可以用它来删除数据...现在我的 id=null

Answer 1

Jquery代码：

 $(document).on('click','.delete',function(){
         let id = $(this).attr('data-id');
         $('#id').val(id);
    });

同样在您的模态 html 代码中：

<input id="id" name="id">

Answer 2

在您的 bootstrap 模态表单中更改以下内容：

<form action="{{ route('contacts.destroy', 'id') }}" method="post">
                @csrf
                @method('DELETE')
                <input id="id" name="id" hidden>
                <h5 class="text-center">Are you sure you want to delete this contact?</h5>
                <input id="firstName" name="firstName"><input id="lastName" name="lastName">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
            </div>
            </form>

在上面的代码中，您将字符串参数 'id' 传递给控制器，因此它会检测到 'id' 这是您需要在控制器中进行一些更改的字符串将 'id' 直接作为参数，您需要在将所选 ID 放入输入字段时接受请求，即：

  <input id="id" name="id" hidden value="">

添加 jquery:

<script>
     $(document).on('click','.delete',function(){
             let id = $(this).attr('data-id');
             $('#id').val(id);
        });
</script>

控制器应该是：

public function destroy(Request $request)
    {
        $id= $request->id;

        $items = yourModel::find($id);

        $items->delete();

        return redirect()->route('your page')->with('message', 'report details has been successfully deleted');

    }

Answer 3

<div class="table-responsive">
  <table class="table table-bordered table-sm">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Usuario</th>
            <th>Acción</th>
        </tr>
    </thead>
    @foreach($users as $user)
    <tbody>
        <tr>
            <td>{{ $user->id }}</td>
            <td>{{ $user->nombre }}</td>
            <td>{{ $user->login}}</td>
            <td>
              <a href="{{ route('users.edit', $user->id) }}" type="button" class="btn btn-primary"><i class="bi bi-pencil-square"></i></a>
              <a data-bs-toggle="modal" class="btn btn-warning" data-bs-target="#deleteUserModal_{{$user->id}}"
              data-action="{{ route('users.destroy', $user->id) }}"><i class="bi bi-trash"></i></a>

            </td>
        </tr>
    </tbody>
    <!-- Delete User Modal -->
    <div class="modal fade" id="deleteUserModal_{{$user->id}}" data-backdrop="static" tabindex="-1" role="dialog"
    aria-labelledby="deleteUserModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteUserModalLabel">Esta acción es irreversible.</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form action="{{ route('users.destroy', $user->id) }}">
            <div class="modal-body">
              @csrf
              @method('DELETE')
              <h5 class="text-center">¿Estás seguro de que quieres eliminar al usuario
                {{ $user->nombre }} {{ $user->apellido_materno }} {{ $user->apellido_paterno }} ?</h5>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
              <button type="submit" class="btn btn-danger">Si, Eliminar Usuario</button>
            </div>
        </form>
        </div>
      </div>
    </div>
    @endforeach
  </table>
</div>

Laravel bootstrap 使用模式删除确认

Laravel bootstrap delete confirmation using modal

php

jquery

modal-dialog

laravel