i am trying to Set Current Category to active when i reload my page but unfortunately it's not working please help me thanks.
html view
<ul class='visible-links nav nav-tabs' role="tablist">
#foreach($productCategories as $productCategory)
<li>
<a class="tab-a active-a productcategory {{ Request::is('') ? 'active' : '' }}" data-id="{{$productCategory->id}}" data-toggle="tab" href="{{$productCategory->id}}" role="tab" data-toggle="tab">{{$productCategory->name}}
</a>
</li>
#endforeach
</ul>
Route
Route::get('products/get-product', 'ProductController#getproduct')->name('products.getproduct');
Route::get('/products/{slug}', 'ProductController#index')->name('products');
you can try this :
assuming this is from route Route::get('/products/{slug}'...
<ul class='visible-links nav nav-tabs' role="tablist">
#foreach($productCategories as $productCategory)
<li>
<a class="tab-a active-a productcategory
{{ request()->route('slug') == $productCategory->slug ? 'active' : '' }}"
data-id="{{$productCategory->id}}" data-toggle="tab" href="{{$productCategory->id}}"
role="tab" data-toggle="tab">{{$productCategory->name}}
</a>
</li>
#endforeach
</ul>
//Request::route() or the helper request()->route()
if you are using model binding in the controller you can use request()->route('slug')->id == $productCategory->id
make sure that active class is triggering active tab, or else the active-a is the class triggering active tab
Related
I have this method when I click to view any member it shows the detail of the member in the modal, but it's not working as I expected
vue js code
const member_modal = ref(null);
const viewMember = (member) => {
axios.get("/api/member/" + member.id).then((response) => {
member_modal.value = response.data;
console.log(member_modal.value);
$("#viewMemberModal").modal("show");
});
};
code inside the modal (DOM)
<a href="#" #click.prevent="viewMember(member)"
><i class="fa fa-eye ml-2"></i
></a>
<img class="profile-user-img img-fluid img-circle"
src="{{ member_modal.image }}"
alt="User profile picture"
/>
</div>
<h3 class="profile-username text-center">
{{ member_modal.full_name }}
</h3>
<ul class="list-group list-group-unbordered mb-3">
<li class="list-group-item">
<b>Gender</b>
<a class="float-right">{{ member_modal.gender }}</a>
</li>
<li class="list-group-item">
<b>Phone</b>
<a class="float-right">{{ member_modal.phone }}</a>
</li>
<li class="list-group-item">
<b>Email</b>
<a class="float-right">{{ member_modal.email }}</a>
</li>
</ul>
I want when I click on the view member button it shows the specific member data in the modal, but it's not updating the values in the (dom), when I click the view member, it fetches the data from the database successfully and assigns the response result to the member_modal but the change is not showing the data in the modal
I need to put session on the same page sidebar. when user click on any button session will get for that tab. like
Search Job
Customers
etc
In the sidebar the button or not link with any page. i am creating a dialogue box for each so their is no page for the links that's why i am facing the problem. when user click any of the sidebar button the name should highlight.
DashboardController
public function disp()
{
Session::put('page', 'search-job');
Session::put('page', 'customer');
return view('front.disp');
}
layout.blade.php
#if(Session::get('page')=="search-job")
<?php $active = "active"; ?>
#else
<?php $active = ""; ?>
#endif
<li class="nav-item {{$active}}">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">SEARCH JOBS</span>
</a>
</li>
#if(Session::get('page')=="customer")
<?php $active = "active"; ?>
#else
<?php $active = ""; ?>
#endif
<li class="nav-item {{$active}}">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">Customer</span>
</a>
</li>
How to handle on this sidebar
Thanks!
as i understand from the comments you want to have different active sessions then you have 2 options like below:
put them in different indexes like this:
Session::put('page-search-job', true);
Session::put('page-customer', false);
and in view check them like this:
<li class="nav-item {{ Session::get('page-search-job') == true ? 'active' : '' }}">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">SEARCH JOBS</span>
</a>
</li>
put it in an array like this:
Session::put('page', [
"search-job"=>true,
"customer"=>false
]);
and in view check them like this:
<li class="nav-item {{ Session::get('page')['search-job'] == true ? 'active' : '' }}">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">SEARCH JOBS</span>
</a>
</li>
I want to add a custom active class to side menu that has the current route. I know that I can get current url by url()->current() and compare it to route('something'), but my challenge is when I want to get the active class both on a parent and child menu item when a child item is selected.
My code for a menu item without any children is:
<li class=" #if(url()->current()==route('home')) custom_active_menu #endif ">
you can use if with multiple or statements for the parent. i use Request class generally, so that i can use a pattern with just an asterisk instead of multiple or statement. however you can use use anything as you wish. an exmaple using Request class
<li class="{{ \Request::is('menu/*') || \Request::is('menu') ? 'active' : '' }}">
<a href="#">
<i class="metismenu-icon pe-7s-bandaid"></i>
Menu
<i class="metismenu-state-icon pe-7s-angle-down caret-left"></i>
</a>
<ul>
<li>
<a href="{{ route('menu.index') }}" class="{{ \Request::is('menu') ? 'active' : '' }}">
<i class="metismenu-icon"></i>
Menu Index
</a>
</li>
<li>
<a href="{{ route('menu.create') }}" class="{{ \Request::is('menu/create') ? 'active' : '' }}">
<i class="metismenu-icon"></i>
Menu Create
</a>
</li>
</ul>
</li>
here i am checking for a pattern in request url using \Request::is('menu/*'), which means this li will always be active if the request url matches any pattern starting by menu/ like menu/create or menu/1/edit. with an or statement i am checking for exact request url menu.
with child, it' just a simple if statement. if the current url matches with the menu url add the class active.
with your example, i would do something like for parent
<li class=" #if (url()->current() == route('home') || url()->current() == route('another_route')) custom_active_menu #endif ">
and for child just a single if
<li class=" #if (url()->current() == route('home')) custom_active_menu #endif ">
<!-- BEGIN HEADER MENU -->
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
<i class="icon-home"></i> Home
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<i class="icon-bar-chart"></i> View Photo
</li>
<li class="active">
<i class="icon-bulb"></i> About
</li>
<li>
<i class="icon-graph"></i> Contact
</li>
</ul>
</li>
<li class="dropdown dropdown-fw dropdown-fw-disabled">
<i class="icon-home"></i> Upload
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<i class="icon-bar-chart"></i> Upload Photo
</li>
<li>
<i class="icon-bulb"></i> View Photo List
</li>
</ul>
</li>
</ul>
</div>
I am still new to this but basically, I have 5 pages (View Photo, About, Contact, Upload Photo, View Photo List). Currently, I want to show this HTML in all 5 pages so that it will be standardized. If I change the "picture/about" in one page to "photograph/about" for example, the 5 pages will need to reflect this change. This gets more complex as the number of pages increases.
Is there any way or technique in Laravel to solve this issue? Thanks.
Create a template file like Laravel provides app.blade.php in resources/template/ directory, use extends, sections etc for designing, please read Laravel Documentation for Templates
You can use partials for this.
If your issue is adding the active class to the correct link then you can just use request()->is() to check the current url:
<li class="{{ request()->is('picture/externalphotoviewer') ? 'active' : '' }}">
<a href="{{ url('picture/externalphotoviewer') }}">
<i class="icon-bar-chart"></i> View Photo </a>
</li>
<li class="{{ request()->is('picture/about') ? 'active' : '' }}">
<a href="{{ url('picture/about') }}">
<i class="icon-bulb"></i> About </a>
</li>
<li class="{{ request()->is('picture/contact') ? 'active' : '' }}">
<a href="{{ url('picture/contact') }}">
<i class="icon-graph"></i> Contact </a>
</li>
Simply create a blade file inside your resources/views directory and then use #include e.g.
reasources/views/partials/header.blade.php:
<div class="nav-collapse collapse navbar-collapse navbar-responsive-collapse">
<ul class="nav navbar-nav">
<li class="dropdown dropdown-fw dropdown-fw-disabled active open selected">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Home </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li class="{{ request()->is('picture/externalphotoviewer') ? 'active' : '' }}">
<a href="{{ url('picture/externalphotoviewer') }}">
<i class="icon-bar-chart"></i> View Photo </a>
</li>
<li class="{{ request()->is('picture/about') ? 'active' : '' }}">
<a href="{{ url('picture/about') }}">
<i class="icon-bulb"></i> About </a>
</li>
<li class="{{ request()->is('picture/contact') ? 'active' : '' }}">
<a href="{{ url('picture/contact') }}">
<i class="icon-graph"></i> Contact </a>
</li>
</ul>
</li>
<li class="dropdown dropdown-fw dropdown-fw-disabled">
<a href="javascript:;" class="text-uppercase">
<i class="icon-home"></i> Upload </a>
<ul class="dropdown-menu dropdown-menu-fw">
<li>
<a href="{{ url('photo/create') }}">
<i class="icon-bar-chart"></i> Upload Photo </a>
</li>
<li>
<a href="{{ url('photo') }}">
<i class="icon-bulb"></i> View Photo List </a>
</li>
</ul>
</li>
</ul>
</div>
Then replace the header code in your other blade files with:
#include('partials.header')
NB
If you change the location of the header you will need to update the #include's as well e.g.
e.g. resources/views/layouts/main/header.blade.php would be #include('layouts.main.header')
Hope this helps!
Im using laravel to develop a website. There is a side panel for navigating between the different pages of the website. Some pages are grouped together in an accordion (or dropdown). When I click on one of the options within the accordion it navigates to the page but the accordion closes immediately. How do I keep it open??
here is how the accordion is
<li class="treeview">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu"
style="display: none;">
<li>
Page 1
</li>
<li>
Page 2
</li>
</ul>
</li>
Any help is appreciated.
ps. It might be worth it to add that I am using AdminLTE as a template.
Need to add Active class in li
<li class="treeview {{ ((Request::is('a-page')) || (Request::is('a-second-page')) ? 'active' : '') }}">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu">
<li class="{{ ((Request::is('a-page')) ? 'active' : '') }}">
Page 1
</li>
<li class="{{ ((Request::is('a-second-page')) ? 'active' : '') }}">
Page 2
</li>
</ul>
</li>
OR
<li class="treeview {{ ((Route::currentRouteName() == 'a-route') || (Route::currentRouteName() == 'a-second-route') ? 'active' : '') }}">
<a href="#">
<span>Group of pages</span>
<ul class="treeview-menu">
<li class="{{ ((Route::currentRouteName() == 'a-route') ? 'active' : '') }}">
Page 1
</li>
<li class="{{ ((Route::currentRouteName() == 'a-second-route') ? 'active' : '') }}">
Page 2
</li>
</ul>
</li>