How to disable Bootstrap nav-item using JavaScript - javascript

I'm building a webapp using Flask, and I'm using jinja templates to present different pages unified by an always-present navbar. When the user clicks on a given link -- "About", for instance -- and Flask loads the template for the "About" page, I want the About link in the navbar disabled.
I've tried to implement this via simple JavaScript in each template, but I can't get the clicked link to be disabled. Here is a section from my layout.html document, where the navbar is established:
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a
class="nav-link"
onclick="cookieManager()"
href="/about"
id="abt"
>about</a
>
</li>
Here's what I've tried:
{% block main %}
<script>
const aboutBtn = document.querySelector(".nav-item [id=abt]");
aboutBtn.classlist.add("disabled");
</script>
<h3>This is the About page</h3>
{% endblock %}
This gives me an error in the console saying that the add property of aboutBtn is undefined. However, if I log aboutBtn to console after declaring it, it does exist.

Related

Jquery on click works on one page doesn't work on another

dropdown click working on one page but not on another even though its the same component that these page load and same javaScript file
Here's the component
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Please Select A Fabric Range</a>
<ul class="dropdown-menu">
{% for fabricRange in fabricRanges %}
<li>
<a class="nav-link dropdown-item" id="tab-{{ fabricRange.id }}" data-bs-toggle="tab" data-bs-target="#tabpane{{fabricRange.id}}" type="button" role="tab" aria-controls="tabpane-{{fabricRange.id}}" aria-selected="true">{{fabricRange.title}}</a>
</li>
{% endfor %}
</ul>
</li>
And JS
$(".dropdown-menu").on("click", "a.nav-link.dropdown-item", function() {
console.log("clicked")
$(this).parents(".nav-item.dropdown").find("a.dropdown-toggle").html($(this).html())
})
I have used it in three pages, two works, one doesn't.
the console.log() also works fine on the two pages but no response in third. Please Help
First you need to verify whether dropdown-menu class exists or not. In case if it exists then you need to check whether it has nav-link dropdown-item class or not.
So for this you need to check HTML of that element. Please follow below piece of code for this purpose.
$(document).ready(function(){
var count = 0;
if ($(".dropdown-menu").length > 0) {
$(".dropdown-menu").each(function(index, item) {
count = count + 1;
if(count !== 0){
console.log($(item).html());
console.log(item.innerHTML);
}
});
}
//alert("count-->"+count);
console.log(count);})
After verification, if you've everything mention in point 1 above and still click is not working then you have to verify if
JQUERY is getting loaded correctly and in the same hierarchy as on other 2 pages.

How to call .click() when retuning to index.html from another page

I'm building a portfolio site and have a sliding nav on index.html which contains a group of projects with links leading to other work.html pages once an element is clicked on the nav in the header.
What I want to do is when returning from a work.html page to the index.html page, is auto open the sliding nav automatically.
Thanks a lot if you can help!
document.querySelector(".work").click()
works with opening the sliding nav, but I don't know how to only run this when returning from one of the projects or work.html pages
this is the nav on the index.html and work.html pages
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link work" href=# onclick="openNav();showButton()">work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="...">experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="..." rel="noopener noreferrer" target="_blank">blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">about</a>
</li>
</ul>
When returning to index.html '.work' will automatically open
Try below.
window.addEventListener('load', (event) => {
if (document.referrer.indexOf('work') > -1) {
//Perform required operation
}
});
document.referrer gives the previous URL.
If you are using React try putting the function in componentDidUpdate(). If you are using only JS no framework, try keeping a list so you know from where the user is coming on to your index page. Use window.location for that. Might not be the best approach, but play with it see what happens

How to make JS be called only once for all pages?

I have a header.html page that I keep loading dynamically with JavaScript into all my webpages via add_header.js.
The header.html includes a notification badge that shows a red span with the number of the notifications.
In my add_header.js I have a JS function that removes the red span when the badge is clicked.
Everything works great for one page, but when I go to an other page, the header.html gets loaded again so the notification is red again.
How can I fix this, in order for the function to be executed only one time for all pages?
webpage.html
<script src="js/add_header.js"></script>
<div id="header">
</div>
my header.html
<div class="bootstrap-iso">
<li class="nav-item d-md-down-none">
<a id="notif-link" class="nav-link" href="#" title="Notifications">
<span id="notif" class="badge badge-pill" style="background-color:red;"></span>
</a>
</li>
</div>
my add_header.js
$(function(){
$("#header").load("header.html");
});
$(document).ready(function(){
var list_notif=["Notification1","Notification2","Notification3","Notification4"];
var number_notif=list_notif.length;
$('#notif').text(number_notif);
$('#notif-link').focus(
function(){
$('#notif').remove();
});
});

<a href=""> links don't open when I click on it but works when I click "open in new tab"

I am editing a template and links don't respond to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.
I will only post the menu section of the index file since the webpage is too long. Please download the template from the following link to see it yourselfClick Here
I am new here so I don't clearly understand the rules of posting a question. let me know if you need other info and please help me out.
`
<nav class="navbar navbar-light">
<ul class="nav navbar-nav single-page-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home <!-- <span class="sr-only">(current)</span> --></a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Products</a>
</li> <!-- this link won't work -->
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>`.
<div class="sigma-content col-lg-6 col-md-6 photo text-center" >
<h2></h2>
VISIT OUR GALLERY
</div>
EDIT: I just learned about browser console and the error is
Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
at bootstrap.min.js:7
at bootstrap.min.js:7
at bootstrap.min.js:7
How do I fix this.
A quick inspection of the live demo of the linked template shows, at the bottom of the source (the frame source, not the page source) this code
// The actual plugin
$('.single-page-nav').singlePageNav({
offset: $('.single-page-nav').outerHeight(),
filter: ':not(.external)',
updateHash: true,
beforeStart: function() {
console.log('begin scrolling');
},
onComplete: function() {
console.log('done scrolling');
}
});
which looks like it's using this library which states
Clicking on any links within the container will cause an animated scroll down to the element whose ID is identified by that link's "hash" (if it exists)
and then in the options
'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (e.g. ':not(.external)')
So, since the code on the live demo has filter: ':not(.external)', and I assume you have that on your page as well (and since your <ul> has the single-page-nav class) changing
<a class="nav-link" href="gallery.html">Products</a>
to
<a class="nav-link external" href="gallery.html">Products</a>
should fix your problem

Update a partial in dust.js without touching the rest of the template

I'm experimenting around with dust.js and am wondering about the most efficient way to solve this:
I have a simple template structure with 2 levels of navigation and content.
The first level of navigation is static - while the second level (the subnavigation) changes with each change in the primary navigation.
Parent Template:
<nav class="navbar navbar-fixed-top navbar-dark">
<div class="container">
{>"navigation/navigation_primary"/}
{>"navigation/navigation_secondary"/}
</div>
</nav>
<div class="container"></div>
Primary Navigation Template:
<div class="navbar-container navbar-primary">
<ul class="nav navbar-nav">
{#navigation_primary}
<li class="nav-item">
<a class="nav-link" href="#{slug}">{label}</a>
</li>
{/navigation_primary}
</ul>
</div>
Secondary Navigation Template:
<div class="navbar-container navbar-secondary">
<ul class="nav navbar-nav">
{#navigation_secondary}
<li class="nav-item">
<a class="nav-link" href="#{slug}">{label}</a>
</li>
{/navigation_secondary}
</ul>
</div>
Now, my problem is this: Without reloading the page, I'ld like to update the "secondary navigation", when I click on the primary navigation elements.
The way I'ld do this, is to re-render the "Secondary Navigation Template" and then replace the old ".navbar-secondary" with the newly rendered template ( with jQuery.html() ) - but I was wondering if dust.js has it's own feature for this, since it's able to load partials asynchroneusly?
To be honest, I didn't find most of the dust.js documentation very informative, so I'm having a hard time figuring the details out.
Is there a better way to update only a partial and leaving the rest of the template untouched, without using something like jQuery.html() and replace the partial in dust.js?

Categories

Resources