i have this perfectly working example using ajax !
im using this code to load data whenever click on the nav bar :
$('#tabs li #go').click(function() { $('#containermenu').html('<img src="preloader.svg" >').show(); $('#tabs li a.activetabnow').removeClass('activetabnow'); $(this).addClass('activetabnow'); $('#containermenu').load('http://127.0.0.1:8000/events', function() { $('#containermenu').fadeIn('slow'); });
is it possible to do the same actions using livewire laravel ? the goal is to navigate through the menu and show data in the div whenever i click one of the nav-buttons ! if it is possible ill be happy with a suggetion or should i just go with ajax ??
Advertisement
Answer
Component
Update the livewire component like the following Sample
<?php namespace SampleHttpLivewireDemo; use LivewireComponent; class Demo extends Component { public $activeTab = 0; public function updateActiveTab($val){ // You can add your things when clicking tabs $activeTab = $val; }
Blade
Change the blade file like the following sample.
<ul class="tabs text-center w-full overflow-hidden flex"> <li class=" border-t border-b text-sm text-gray-800 w-full text-center @if($this->activeTab === 0) active @endif">Tab 1</li> <li class=" border-t border-b text-sm text-gray-800 w-full text-center @if($this->activeTab === 1) active @endif">Tab 2</li> <li class=" border-t border-b text-sm text-gray-800 w-full text-center @if($this->activeTab === 2) active @endif">Tab 2</li> </ul> <div class="container mx-auto px-4"> @if($this->activeTab === 0) <!-- Add your first tab content here --> @elseif($this->activeTab === 1) <!-- Add your second tab content here --> @elseif($this->activeTab === 2) <!-- Add your third tab content here --> @endif </div>