Load page without refresh - javascript

I have this script in the head:
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
On this part of script
<div class="dropdown-menu" id="nav">
<a href="../exercises/match_pinyin.php" class="dropdown-item" >Profile</a>
it work fine. Which means it load the php page without refresh the whole page.
Now I need to make it work with
<div id="submenu-2" class="collapse" id="nav">
<ul class="nav nav-small flex-column">
<li class="nav-item">
<a class="nav-link" href="../exercises/match_pinyin.php">Γραπτές Ασκήσεις</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-utility.html">Utility Pages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages-layouts.html">Layouts</a>
</li>
</ul>
</div>
I also tried the below, but it load the page on a new one.
<script>
$(document).ready(function() {
$('#nav ul li a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
Any idea how can I make it work?

$('#nav a, .nav-link').click did the trick and it looks good now.
Thank you

Related

Setting list anchor to active based on click

I have the following list:
<!-- List -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
<li class="nav-item">
<a class="nav-link active" id="link1" href="{{ url_for('overview') }}">
<i class="bi-list-check nav-icon"></i>Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('upload') }}">
<i class="bi-file-arrow-up nav-icon"></i> Upload file
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('choose_numeric') }}">
<i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column
</a>
</li>
</ul>
It starts with the first list element as active. I want to change the active state based on the list element which is clicked.
I tried:
$('.steps-sampling').on('click','a', function(){
$(this).addClass('active').siblings().removeClass('active');
});
And (added id to anchor tag)
//on first time load set the home menu item active
$(".steps-sampling a#link1").addClass("active");
//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
But both do not work.
This is the .active class I could find for nav-link. I only have access to the min.css so it is kind of hard to find (not sure if this is sufficient)
.nav-link.active{border-color:#006673}
I cannot add active to the li element since it does not seem to work with the Bootstrap template I am using.
How can I solve this?
Your code works well ,Except for styling ,
Just try to force style using !important to overide default bootstrap style
See below snippet :
$('.steps-sampling').on('click','a', function(){
$(this).addClass('active').siblings().removeClass('active');
});
//on first time load set the home menu item active
$(".steps-sampling a#link1").addClass("active");
//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
$("a").removeClass("active");
$(this).addClass("active");
});
.active {
color:green !important;
font-weight:bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- List -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
<li class="nav-item">
<a class="nav-link active" id="link1" href="#">
<i class="bi-list-check nav-icon"></i>Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-file-arrow-up nav-icon"></i> Upload file
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column
</a>
</li>
</ul>
Every time you set a function as listener to an event, when it fires it passes the event object to the function, you can just use it to know on which element the user has clicked:
$("a").click(function(evt){
$("a").removeClass("active");
$(evt.target).addClass("active");
});
I would like to suggest a more correct approach, with the same result:
$("a").on("click", function(evt){
$("a").removeClass("active");
$(evt.target).addClass("active");
});
Sometimes, depending on what you put inside the element that has the event bound, evt.target can be an element different from the one you bound the event on, so you must ensure that the element you style with the class is the correct one:
$("a").on("click", function(evt){
$("a").removeClass("active");
let tgt=evt.target;
if(!$(tgt).is("a")) tgt = $(tgt).closest("a");
$(tgt).addClass("active");
});
After searching other solutions I found this which works.It has to do with the fact that the page is refreshed and is set back to active on the first element:
<script>
$(document).ready(function() {
$('a.active').removeClass('active');
$('a[href="' + location.pathname + '"]').closest('a').addClass('active');
});
</script>
You can try this code :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.nav-item .nav-link {text-decoration : none;}
.nav-item .nav-link:hover{ border: 2px solid #006673 !important; }
.nav-item .nav-link.active{ border: 2px solid #006673 !important; }
</style>
<script>
$(document).ready(function(){
$(document).on('click','.nav-link', function(){
$('.nav-link').removeClass('active');
$(this).addClass('active');
});
});
</script>
</head>
<body>
<!-- List -->
<ul class="nav nav-sm nav-tabs nav-vertical mb-4 steps-sampling">
<li class="nav-item">
<a class="nav-link active" id="link1" href="#">
<i class="bi-list-check nav-icon"></i>Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-file-arrow-up nav-icon"></i> Upload file
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi-sort-numeric-down nav-icon"></i> Choose the numeric column
</a>
</li>
</ul>
</body>
</html>

Reloading page when fetching new tab item in bootstrap card

I have this code in javascript that allows me to visit a page with a hashbang on it to visit a tab
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href="#' + url.split('#')[1] + '"]').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
This is an example link http://localhost/centosapp/info/configure#description
I am showing a tab on click using
$('#bologna-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show')
});
this is the html
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="<?php echo base_url('info/configure'); ?>#description" role="link" aria-controls="description" aria-selected="true">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('info/configure'); ?>#history" role="link" aria-controls="history" aria-selected="false">Add Asset</a>
</li>
<li class="nav-item">
<a class="nav-link" href="<?php echo base_url('info/configure'); ?>#deals" role="link" aria-controls="deals" aria-selected="false">My Assets</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content mt-3">
<div class="tab-pane active" id="description" role="tabpanel">
...items are shown here
</div>
</div>
I want to be able to reload page so that to get new content from server when i click on a tab.How can i reload and show the tab clicked on bootstrap?
Solved it this way using a html data-* tag.
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="bologna-list" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#description" data-link="http://localhost/centosapp/info/configure#description" role="link" aria-controls="description" aria-selected="true">Devices</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#history" data-link="http://localhost/centosapp/info/configure#history" role="link" aria-controls="history" aria-selected="false">Add Asset</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#deals" data-link="http://localhost/centosapp/info/configure#deals" role="link" aria-controls="deals" aria-selected="false">My Assets</a>
</li>
</ul>
</div>
and js
$('#bologna-list a').on('click', function (e) {
e.preventDefault()
$(this).tab('show');
var links = $(this).attr("data-link");
window.location.href = links;
});
Works but a solution inside bootstrap would have worked better.

I need to highlight the clicked navbar with active class

This is my Navbar code:
<div class="navbar-collapse offcanvas-collapse justify-content-md-center" id="navbarsExampleDefault">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#Url.Action(" DashBoard ","Admin ")">Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" SectionsList ","Admin ")">Sections</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" DifficultyList ","Admin ")">Difficulty</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" QuestionsList ","Admin ")">Questions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" AssessmentList ","Admin ")">Assessments</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action(" UsersList ","Admin ")">User's</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Students</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="nav-link" href="#Url.Action(" StudentResult ","Admin ")">Student Results</a>
</div>
</li>
</ul>
</div>
This is my click function:
$("#navbarsExampleDefault li a").click(function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
I need to highlight the selected navbar with active class. I have tried this one but not working
public ActionResult SectionsList()
{
return view();
}
This is one of my action method
Place the below edited piece of code which is tested
$(document).ready(function(){
$(".navbar-nav .nav-link").click(function (e) {
e.preventDefault();
$('.nav-item').removeClass('active');
$(this).closest('.nav-item').addClass('active');
});
});
var change = function () {
var url = window.location.pathname;
$('ul.navbar-nav a[href="' + url + '"]').parent().addClass('active');
};
change();
Load this function in the js file which is common to every page and remove class active from li.
Works even when the page reloads.
I hope it works for you! Thanks!
Please use below code
$("#navbarsExampleDefault li a").click(function () {
$('.nav-item').removeClass('active');
$(this).parent().addClass('active');
});
Hope it works for you Thanks!

How to pull active tab first int the position and push the another after the active one?

I have 2 nav tabs i need when click one and become active to be first tab and the other come after it
$(".nav-tabs a").click(function() {
if ($(this).hasClass('active')) {
$(this).css('margin-right', '0px');
$(this).css('margin-left', '-139px');
}
});
if (!$(".nav-tabs a").hasClass('active')) {
$(this).css('margin-right', '-139px');
$(this).css('margin-left', '0px');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#home">
<i class="fa fa-clock-o"></i> زيارة بالساعة</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">
<i class="fa fa-calendar"></i> زيارة بالشهر</a>
</li>
</ul>
I'd advise you to use more elegant solution, without direct css mutations. You can on tab click just prepend() current tab to the parent's div and it will be first. I've prepared a sample fiddle for you.
$(".nav-item").click(function() {
$(this).parent().prepend(this);
});

How to change element's class to active?

I'm using a bootstrap template for a side navbar as a partial in EJS which is then included on all pages that use it. Is was taken from their Dashboard template. The HTML is
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="/profile">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accountdetails">Account Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/admin">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/transactions">Transactions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contract">Contract</a>
</li>
</ul>
</nav>
Whichever link has the active class has particular styling with darker blue in the background. I now want to change this programatically when navigating to the different links.
They're all going to different pages so I could just change there the issue is that I'm including the whole sidebar code as an EJS partial so that wouldn't work. I also tried this answer but it didn't work (flashes the active styling but disappears - probably because it is routing to another page?).
There are plenty of questions here about changing an HTML element programatically but they usually use document.getElementById which seems like too much work (giving each an ID, checking all, etc). Is there a quicker / correct way of doing this?
You could do the following:
Set a click event on .nav-item, to add .active class.
Remove .active class from any other sibling element.
$('.nav-item').on('click', function() {
$(this).addClass('active').siblings('li').removeClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item active">
<a class="nav-link" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Account Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Transactions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contract</a>
</li>
</ul>
</nav>
Some people answering are a bit confused, thinking you are staying on the same page, and changing the class of your <a> tags. But I think your clicks on these navigate to new pages, and you want the appropriate <a> to have class active when the page loads.
This might help:
<script>
var path = location.pathname; // ex: '/profile';
var activeItem = document.querySelector("a[href='" + path + "']");
activeItem.class += ' active';
</script>
And of course with jquery it's even easier:
$(function() {
var path = location.pathname;
$("a[href='" + path + "']").addClass('active');
})
This is a code for helping you.
<nav class="col-sm-3 col-md-2 hidden-xs-down bg-faded sidebar">
<ul class="nav nav-pills flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Account Details</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Admin</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Transactions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contract</a>
</li>
</ul>
</nav>
<script type="text/javascript">
$(function () {
$(".nav-item").click(function () {
$(".nav-item").each(function () {
$(this).find("a").removeClass("active");
});
$(this).find("a").addClass("active");
});
});
</script>
If your using EJS you can probably do something like the following
<a class="nav-link<% if (page_name === 'profile') { %> active<% } %>" href="/profile">Overview</a>
This is untested but should get you going on the right path. Just do a if statement using EJS's syntax to check if you are on the correct page and add the word active.

Categories