How to Load Dynamic Content in Tabs Based on Selected Tab in Laravel

In web applications, it's common to use tabs to organize content and present it in an easily navigable way. Laravel, being a popular PHP framework, provides developers with many tools to make building tab-based interfaces a breeze. In this tutorial, we'll explore how to load dynamic content in tabs based on the selected tab, using Laravel and jQuery.

Prerequisites

Before we begin, make sure you have a working Laravel environment set up, and that you have jQuery installed. We'll be using jQuery to handle the AJAX requests and update the tab content dynamically.

Creating the Tabs

Let's start by creating the tabs themselves. We'll use the Bootstrap library to style our tabs, but you can use any library or custom CSS that you prefer.

In your Laravel view file, create a list of links, with one link for each tab. You can use the request function to check if a specific tab has been selected, and add the active class to the link if it has. For example:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link {{ request('tab') == 'home' || !request()->has('tab') ? 'active' : '' }}" href="{{ route('tabs.index', ['tab' => 'home']) }}" data-url="{{ route('tabs.home') }}">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link {{ request('tab') == 'about' ? 'active' : '' }}" href="{{ route('tabs.index', ['tab' => 'about']) }}" data-url="{{ route('tabs.about') }}">About</a>
  </li>
  <li class="nav-item">
    <a class="nav-link {{ request('tab') == 'contact' ? 'active' : '' }}" href="{{ route('tabs.index', ['tab' => 'contact']) }}" data-url="{{ route('tabs.contact') }}">Contact</a>
  </li>
</ul>

Here, we're using the route function to generate the URLs for the links, and adding a data-url attribute to each link. We'll use this attribute later to fetch the content for each tab via AJAX.

Next, create the tab content. You can use the div element with the tab-pane and fade classes to create each tab. Again, you can use the request function to check which tab has been selected, and add the show active classes to the active tab. For example:

<div class="tab-content">
  <div class="tab-pane fade {{ request('tab') == 'home' || !request()->has('tab') ? 'show active' : '' }}" id="home">
    <p>Loading...</p>
  </div>
  <div class="tab-pane fade {{ request('tab') == 'about' ? 'show active' : '' }}" id="about">
    <p>Loading...</p>
  </div>
  <div class="tab-pane fade {{ request('tab') == 'contact' ? 'show active' : '' }}" id="contact">
    <p>Loading...</p>
  </div>
</div>

Here, we're using the p element with the text "Loading..." to indicate that the content is being fetched via AJAX and hasn't yet been loaded.

Fetching Content via AJAX

Now that we've set up the tabs and tab content, let's use jQuery to fetch the content for each tab via AJAX.

Add the following jQuery code to your view file. This code listens for the click event on each tab link, fetches the content for the selected tab via AJAX, and updates the tab content with the fetched data.

<script>
  $(document).ready(function() {
    // Get the active tab link
    var activeTab = $('.nav-tabs .active');

    // Get the URL for the active tab content
    var activeTabUrl = activeTab.attr('data-url');

    // Fetch the content for the active tab via AJAX
    $.get(activeTabUrl, function(data) {
      $('#' + activeTab.attr('href').slice(1)).html(data);
    });

    // Listen for the click event on each tab link
    $('.nav-tabs a').on('click', function(event) {
      // Prevent the default link behavior
      event.preventDefault();

      // Get the URL for the selected tab content
      var tabUrl = $(this).attr('data-url');

      // Fetch the content for the selected tab via AJAX
      $.get(tabUrl, function(data) {
        // Update the tab content with the fetched data
        $('#' + $(event.target).attr('href').slice(1)).html(data);

        // Activate the selected tab
        $('.nav-tabs a').removeClass('active');
        $(event.target).addClass('active');
      });
    });
  });
</script>

Here, we're using the $.get function to fetch the content for each tab via AJAX, and updating the tab content with the fetched data using the html function. We're also adding and removing the active class to the tab links as necessary, to reflect the currently selected tab.

Note that in our jQuery code, we're assuming that the tab content is being returned as HTML data from the server. If your server returns JSON or some other format, you'll need to modify the code to handle that data appropriately.

Loading Dynamic Data

Finally, let's modify our controller to load dynamic data for each tab. We'll create a separate method for each tab, and return the appropriate data for each method.

class TabsController extends Controller
{
  public function index(Request $request)
  {
    $tab = $request->input('tab', 'home');

    return view('tabs.index', compact('tab'));
  }

  public function home()
  {
    $data = ['title' => 'Home', 'content' => 'Welcome to our home page!'];

    return view('tabs.home', compact('data'));
  }

  public function about()
  {
    $data = ['title' => 'About', 'content' => 'Learn more about our company and our team.'];

    return view('tabs.about', compact('data'));
  }

  public function contact()
  {
    $data = ['title' => 'Contact', 'content' => 'Get in touch with us!'];

    return view('tabs.contact', compact('data'));
  }
}

Here, we're using the compact function to pass the $data variable to each view, and returning a different view for each tab.

Conclusion

In this tutorial, we've explored how to load dynamic content in tabs based on the selected tab, using Laravel and jQuery. We've created the tabs themselves, fetched the content for each tab via AJAX, and loaded dynamic data for each tab using a controller method. With these tools, you can create dynamic and responsive tab-based interfaces for your Laravel web applications.