CODEWITHSUNDEEP
laraveleloquentmodal-dialog
Binz
Binz

Reputation: 45

Laravel controller trigger modal to show data

So I have this code where originally if I press the button it will open a page showing detail about items, but I want it just to show it in modal. is that any possible?

my index inside controller

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'));
}

the show function inside the same controller

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

the index 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>

while the show blade is

<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>

this code works fine, but I want it just show the detail in the modal. tried it before where I just copy paste the show blade code to the modal body and not working. help

Upvotes: 1

Views: 8405

Answers (1)

IGP
IGP

Reputation: 15786

The easy and dirty way to do this would be a second @foreach to create every details modal on the same view.

<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

Make sure you eager load the items relationship in your index method.

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

Another possibility is to make a single modal, and use its events to query the server for the view that should be loaded inside.

<!-- 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));
});

Make sure your show.blade is ONLY the <table> (no @extends, @section or anything else).

Upvotes: 1

Related Questions