Filter menu active or inactive using Javascript in laravel

 First, suppose you have menu like this

<a

href="{{ route('posts.index') }}"

class="btn btn-sm btn-outline-secondary mr-1 allclass">

All

</a>

<a

href="{{ route('posts.index',['filterBy'=> 'activepost']) }}"

class="btn btn-sm btn-outline-secondary mr-1 activeclass {{ request('filterBy') == 'activepost' ? 'active' : '' }}">

Active

</a>

<a

href="{{ route('posts.index',['filterBy'=> 'inactivepost']) }}"

class="btn btn-sm btn-outline-secondary mr-1 inactiveclass {{ request('filterBy') == 'inactivepost' ? 'active' : '' }}">

Inactive

</a>

Then control the menu active inactive for all tag

<script>

    function getAll(){

        const allelement = document.querySelector('.allclass');

        const activeelement = document.querySelector('.activeclass');

        const inactiveelement = document.querySelector('.inactiveclass');


        if(activeelement.classList.contains('active')){

            allelement.classList.remove('active');

        } else if(inactiveelement.classList.contains('active')) {

            allelement.classList.remove('active');

        } else {

            allelement.classList.add('active');

        }

    }

    // getAll();

    window.addEventListener('load', getAll);

</script>

Comments

Post a Comment

Popular posts from this blog

Create Virtual Host in Localhost

In this post, I'll discuss how you can create a virtual host for your Laravel project. Just follow the below steps for creating you, virtual host: prerequisite:   you should have knowledge about how to install Laravel projects. if you don't know then first learn to  click here .
Read more

User Active/Inactive using Jquery

First, create Route Route::group(['middleware' => ['auth'], 'namespace' => 'Ajax'], function () {         Route::get('userStatus','AjaxController@userStatus')->name('auth.userStatus'); }); Create Controller for this route   public function userStatus(Request $request)     {         $user = User::find($request->userId);         $user->isActive = $request->userStatus;         $user->save();         return response()->json(['success'=>'user status changed succesfully']);     } Add jquery for this in file First add checkbox In this I have used the bootstrap toggle library @foreach($users as $user) <td> <input data-id="{{$user->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="Block" {{ $user->isActive ? 'chec...
Read more

laravel passport

Image
Laravel-Passport Laravel Passport: Laravel passport basically provides you to an OAuth2 server implementation. For more about OAuth2.0 server visit this link https://oauth2.thephpleague.com/ .   Why Laravel Passport not OAuth2 server? OAuth2 server provides you to various standards for your API authentication but it complex and would be a difficult to implement. While in passport is native OAuth2 server of laravel apps and it easy to learn and easier to implement in your app.   What is Laravel-Passport? In laravel framework it already comes with the tradition Login form. But what about an API authentication? So for authenticate a User in API we need a tokens. In general API need a token for accessing the user or authenticate a users. So here Laravel comes with a Laravel-passport, which provides the full OAuth2 server implementation in a less time.   What does OAuth2 server? OAuth2 serve protect your API with access token or allow clients to re...
Read more