My jquery code does not perform active sidebar action. where did I mistake, can anyone tell us?
Where should I have to change..? should I have make somechange in html code..?
This is my jquery code
$(function() {
$(".sidebar-menu li").removeClass("active");
$("#liaccounts").addClass("active");
$("#selectAll").click(function() {
// $(".checkAll").prop('checked', $(this).prop('checked'));
var checked = ($(".checkAll").prop('checked') == false) ? true : false;
$(".checkAll").prop('checked', checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!--
Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library
-->
<li class="nav-item">
<a href="{{url('dashboard')}}" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('contact')}}" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Contact</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('accounts')}}" class="nav-link">
<i class="nav-icon fas fa-user"></i>
<p>Accounts</p>
</a>
</li>
</ul>
</nav>
</div>
Related
in my web project, I used a free theme https://themewagon.com/themes/free-bootstrap-4-html-5-admin-dashboard-website-template-skydash/
Here in the nav bar, I customized it as
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link elements" href="~/Home/Index">
<i class="icon-grid menu-icon"></i>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index","SelfService")">
<i class="ti-menu-alt menu-icon"></i>
<span class="menu-title">Our Services</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("OnProcessTasks","SelfCareTasks")">
<i class="ti-timer menu-icon"></i>
<span class="menu-title">In Process Tasks</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("CompletedTasks","SelfCareTasks")">
<i class="ti-file menu-icon"></i>
<span class="menu-title">Completed Tasks</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("OnProcessTasks","SelfCareTasks")">
<i class="ti-face-smile menu-icon"></i>
<span class="menu-title">My Profile</span>
</a>
</li>
</ul>
</nav>
My issue is When I run this, on load first 2 items showed as Active and both items are highlighted. I checked with the sample, but it runs without this issue, also I tried removing the href and then the nav bar showed only one item as active.
I still couldn't figure out why this happening. Any comments?
I can't see what is wrong other than just this thing:
<a class="nav-link elements" href="~/Home/Index">
Change it to:
<a class="nav-link elements" href="#Url.Action("Index", "Home")">
The reason for this change is because you're following the Razor Syntax.
I have got an index.html that looks something like this:
<body>
..
<div id="sidebar">
</div>
..
<script src="plugins/jquery/jquery.min.js"></script>
..
<script src="/dist/js/pages/common.js"></script>
..
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
..
</body>
common.js looks something like this:
$("#sidebar").load("/pages/app/sidebar.html", function(){
let fname = localStorage.getItem("first_name");
let sname = localStorage.getItem("first_surname");
$("#user-name").text(fname + " " + sname);
});
and sidebar.html looks something like this:
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item menu-open">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-microchip"></i>
<b>Dispositivos</b>
<p>
<i class="fas fa-angle-left right"></i>
<span class="badge badge-info right">5</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="/pages/app/general.html" class="nav-link">
<i class="fas fa-sticky-note nav-icon"></i>
<p>General</p>
</a>
</li>
<li class="nav-item">
<a href="/pages/app/maps.html" class="nav-link">
<i class="fas fa-map-marked-alt nav-icon"></i>
<p>Mapa</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- /.sidebar-menu -->
</div>
As you can see I a importing the sidebar using jquery, however I have noticed that if cache is enabled in the browser, many times the nav-item dropdown becomes unresponsive (it shows in index.html, but if I click it, it does not show the submenus). If cache is disabled however, the nav-items always seem to work. I think there is something related to the timings and loading of the scripts but I do not know If I should change the order of something or modify my jquery script somehow for it to load correctly.
I want to draw dynamic sidebar menu data from database using AJAX in the adminlte 3 dashboard with bootstrap 4 dashboard. When I loaded sidebar menu data dynamically by using AJAX, sidebar open or collapse not working. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call treeview menu open/hide not working.
$(document).ready(function(){
var url = "";
$.ajax({
url: url,
}).done(function(resp){
//retrive data
var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Rahim</p></li></ul><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Test</p></li></ul></li></ul></nav>';
$('.sidebar').html(ret);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
<!-- Site wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!--
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
-->
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- Menu Footer-->
<li class="user-footer">
<!--Profile-->
Sign out
</li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
-->
</ul>
</nav>
<!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<div class="sidebar">
</div>
</aside>
<div class="container-fluid">
<div class="content-wrapper" style="min-height: 549px;">
</div>
</div>
</div>
</body>
Just put the code after success function and it will work.
$('[data-widget="treeview"]').Treeview('init');
I am facing problem while setting active class on nav item.
Here is my code on template
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="{{ url('/dashboard') }}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/dashboard/logo') }}" class="nav-link">
<i class="nav-icon fab fa-bandcamp"></i>
<p>
Add/Change Logo
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-image"></i>
<p>
Banner
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/dashboard/banner') }}" class="nav-link">
<i class="nav-icon fas fa-plus"></i>
<p>Add Banner</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('/dashboard/banner/edit')}}" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>Edit Banner</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
I tried
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var url = window.location;
$('ul.nav li.nav-item a[href="' + url + '"]').parent().addClass('active');
$('ul.nav li.nav-item a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
</script>
But this code setting the "active" class on list tag but not in anchor tag.
Instead of using .parent(), try using .closest('a').
closest() will traverse UP the DOM tree until it finds the specified selector - in the above example, the first <a> tag above the element.
Virtually all of your .parent() can be replaced with .closest() - but use as desired. There is no "right" or "wrong", just what works or is easiest for you.
You can use any normal css/jQuery selector with closest() - from a tagName:
.closest('a')
to a className:
.closest('a.nav-item')
etc.
Reference:
https://api.jquery.com/closest/
I have a main menu on my site using Bootstrap 4's navbar.
I also have another div (.social-navbar) with some additional menu items that I would like to MOVE from where they are and place INTO the Bootstrap menu on mobiles only. Basically when the menu collapses on mobile, I want the social-navbar items (facebook/twitter icons) and the LOGIN button to appear inside the navbar-nav menu from Bootstrap.
See Codepen Below...
https://codepen.io/anon/pen/KeXZJL
<div class="social-navbar clearfix">
<ul class="social-icons">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-twitter"></i></li>
</ul>
<ul class="login float-right">
<li class="join">Join Now</li>
</ul>
</div>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMain">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Item 1</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 2</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 3</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Item 4</a>
</li>
</ul>
</div>
</nav>
https://codepen.io/anon/pen/KeXZJL
Is this possible?
You can add this javascript at the very end of the BODY tag:
<script>
var x = window.matchMedia("(max-width: 465px)")
function mobileMenu(x) {
if (x.matches) {
document.getElementById("navbarMain").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "inherit";
} else{
document.querySelector("body").prepend(
document.querySelector(".social-navbar")
);
document.querySelector(".social-navbar").style.backgroundColor = "#000";
}
}
mobileMenu(x)
x.addListener(mobileMenu)
</script>
When the screen width is 465px or narrower .social-navbar will be moved into the navbar collapsed menu and its backgroundColor changes to match the collapsed menu.