在局部视图中动态加载内容

Question

Basically, I am trying to implement tabs on a main page. The tabs will consist of components on other pages for quick access. I am confused on how I can import a layout while sending data to it in a "lazy" way.

I now use the @section tag to bring in the layout, which is fine. But I only want to request the data it needs when the tab is clicked.

in my main.blade.php:

<li>
      <a href="#tab_1" data-controller="tab_1" data-target="#tab_1" data-toggle="tab" aria-expanded="true">
      tab 1 </a>
</li>


<div class="tab-pane" id="tab_1" >
     @yield('tab_1')
</div>

in my tab1:

@extends('main')
@section('tab_1')
@foreach ($activities as $activity)
{{--implementation--}}
@endforeach
@endsection

in my TabController@showtab1:

public function showtab1(Request $request) {
   //Logic here
   return view('tab1', ['activities' => $activities]);
}

The optimal scenario is loading the content for each tab only when the tab is clicked by calling a controller function. I have gotten it to work by using routes to change the whole page, but it kind of ruins the advantage of tabs.

Answer 1

You would typically implement this in such a way that you use the same layout, then pass a different parameter through your URL -> controller -> blade include parameter -> blade view.

The example below demonstrates how you can do 'lazy'-load (load only 1 tab at the same time) across files in Laravel:

// /routes/web.php
Route::get('/tabbed-page', 'TabbedPageController@index');
Route::get('/tabbed-page/:tab', 'TabbedPageController@show');

// /App/Http/Controllers/TabbedPageController.php

public function show($request, $tab) {
  $data = ['title'=> 'No tab'];
  if ($tab === 'tab1') { 
    $data = ['title' => 'I am tab 1'];
  }

  return view('page', [
    'tab' => $tab,
    'data'=> $data
  ]);
}
public function index($request) {
  // open tab1 by default
  redirect('/tabbed-page/tab1');
}

{{-- /resources/views/page.php, requested at for example /tabbed-page/tab1 --}}
<nav>
  <a href="tab1" class="@if($tab === 'tab1') active @endif">Tab 1</a>
  <a href="tab2" class="@if($tab === 'tab2') active @endif">Tab 2</a>
  <a href="tab3" class="@if($tab === 'tab3') active @endif">Tab 3</a>
  <a href="tab4" class="@if($tab === 'tab4') active @endif">Tab 4</a>
</nav>
<main>
  @include($tab, $data)
</main>

{{-- /resources/views/tab1.php, tab2.php, tab3.php, etc.. --}}
<div id="tab1">
  <h1>{{ $data['title] }}</h1>
  Content ....
</div>