Laravel 控制器触发模式显示数据

Question

所以我有这段代码，最初如果我按下按钮，它会打开一个显示项目详细信息的页面，但我希望它只是以模式显示它。有可能吗？

我在控制器中的索引

public function index(SubOrder $order)
{
    Paginator::useBootstrap();
    
    $items = $order->items;
    $tokoId = Toko::select('id')->firstWhere('user_id', auth()->id())->id;
    $orders = SubOrder::where('toko_id', $tokoId)->orderBy('created_at', 'desc')->get();
    
    return view('sellers.order.backup', compact('items','orders'));
}

同一控制器内的show函数

public function show(SubOrder $order)
{
    $items = $order->items;
    
    return view('sellers.order.show', compact('items'));
}

指数blade

<table class="table table-striped">
  <thead class="thead-dark">
    <tr>
      <th>Create</th>
      <th>Detail</th>
    </tr>
  </thead>
  <tbody>
    @forelse ($orders as $subOrder)
      <tr>
        <td>{{$subOrder->created_at}}</td>
        <td>
          <a name="" id="" class="btn btn-warning btn-sm" href="{{route('seller.orders.show', $subOrder)}}" role="button">Detail Pesanan</a>
        </td>
      </tr>
    @empty
    @endforelse
  </tbody>
</table>

而节目 blade 是

<table class="table table-striped" style="padding-bottom: 50px">
  <thead class="thead-dark">
    <tr>
      <th>Nama Barang</th>
      <th>Jumlah</th>
      <th>Harga</th>
    </tr>
  </thead>
  <tbody>
    @foreach ($items as $item)
      <tr>
        <td scope="row">{{$item->nama}}</td>
        <td>{{$item->pivot->jumlah}}</td>
        <td>@currency($item->pivot->harga)</td>
      </tr>
    @endforeach
  </tbody>
</table>

这段代码工作正常，但我希望它只显示模态中的细节。在我刚刚将 show blade 代码复制粘贴到模态主体但无法正常工作之前尝试过。帮助

Answer 1

执行此操作的简单而肮脏的方法是第二次 @foreach 在同一视图上创建每个细节模式。

<table class="table table-striped">
  <thead class="thead-dark">
    <tr>
      <th>Create</th>
      <th>Detail</th>
    </tr>
  </thead>
  <tbody>
    @forelse ($orders as $subOrder)
      <tr>
        <td>{{ $subOrder->created_at }}</td>
        <td>
          <button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#details-modal-{{ $order->id }}">
            Detail Pesanan
          </button>
        </td>
      </tr>
    @empty
    @endforelse
  </tbody>
</table>

@foreach ($orders as $subOrder)
  <div id="details-modal-{{ $order->id }}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="details-modal-{{ $order->id }}" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Details</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <table class="table table-striped" style="padding-bottom: 50px">
            <thead class="thead-dark">
              <tr>
                <th>Nama Barang</th>
                <th>Jumlah</th>
                <th>Harga</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($subOrder->items as $item)
                <tr>
                  <td scope="row">{{ $item->nama }}</td>
                  <td>{{ $item->pivot->jumlah }}</td>
                  <td>@currency($item->pivot->harga)</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
@endforeach

确保在索引方法中预先加载项目关系。

$orders = SubOrder::with('items')->where('toko_id', $tokoId)->orderBy('created_at', 'desc')->get();

另一种可能性是制作一个单一模式，并使用其事件向服务器查询应在其中加载的视图。

<!-- Button in table -->
<button type="button" class="btn btn-warning btn-sm" data-toggle="modal" data-target="#details-modal" data-order="{{ $subOrder->id }}">
  Detail Pesanan
</button>

<!-- Modal -->
<div id="details-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="details-modal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Details</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body"></div>
    </div>
  </div>
</div>

// Script
$('#details-modal').on('show.bs.modal', event => {
  var order = $(event.relatedTarget).data('order');
  modalBody = $(this).find('.modal-body');
  // show loading spinner while waiting for ajax to be done
  modalBody.html(`
    <div class="text-center">
      <div class="spinner-border" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  `);

  $.ajax({
    url: `/orders/${order}`, // the url for your show method
    method: 'get'
  })
  .done(view => modalBody.html(view));
  .fail(error => console.error(error));
});

确保您的 show.blade 只是 <table>（没有 @extends、@section 或其他任何内容）。

Laravel 控制器触发模式显示数据

Laravel controller trigger modal to show data

modal-dialog

laravel

eloquent