i have this perfectly working example using ajax !
im using this code to load data whenever click on the nav bar :
JavaScript
x
$('#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
JavaScript
<?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.
JavaScript
<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>