We Keep Coding

Bootstrap Navbar Toggler - Custom JS causes navbar menu to close on dropdown click

I'm new to JS and am in the process of learning while coding a website. I'm using a template that I found online with some custom modifications so I'm not super familiar with the JS used. Here is the issue.
While using the navbar toggler there is some custom JS to close the menu when the once a click happens in the menu. The issue is that I added a dropdown into the menu, and when it's clicked instead of showing the drop down details, the JS executes and closes the menu. here is the JS:
window.addEventListener('DOMContentLoaded', event => {
// Navbar shrink function
var navbarShrink = function () {
const navbarCollapsible = document.body.querySelector('#mainNav');
if (!navbarCollapsible) {
return;
}
if (window.scrollY === 0) {
navbarCollapsible.classList.remove('navbar-shrink')
} else {
navbarCollapsible.classList.add('navbar-shrink')
}
};
// Shrink the navbar
navbarShrink();
// Shrink the navbar when page is scrolled
document.addEventListener('scroll', navbarShrink);
// Activate Bootstrap scrollspy on the main nav element
const mainNav = document.body.querySelector('#mainNav');
if (mainNav) {
new bootstrap.ScrollSpy(document.body, {
target: '#mainNav',
offset: 74,
});
};
// Collapse responsive navbar when toggler is visible
const navbarToggler = document.body.querySelector('.navbar-toggler');
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
responsiveNavItems.map(function (responsiveNavItem) {
responsiveNavItem.addEventListener('click', () => {
if (window.getComputedStyle(navbarToggler).display !== 'none') {
navbarToggler.click();
}
});
});
});
Only the bottom function is running the menu click/close function, but I provided all the code as for the custom menu actions as I'm not super familiar with JS. I understand, more or less, what it is doing, but I'm not sure how to modify it appropriately.
I'd imagine there is a simple way to modify that last "if" statement to check to see what was actually clicked (for example, if a .dropdown-menu was clicked). I just don't know how to use the code that is there and check what click caused the event trigger. I'd like to keep the close behavior when the .dropdown-items and other .nav-items are clicked. I just don't want the behavior when the .dropdown-menu is clicked.
Here is the html:
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ms-auto py-4 py-lg-0">
<li class="nav-item"><a class="nav-link" href="#portfolio">Products</a></li>
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#how-to-order">How Order</a></li>
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">F.A.Q.</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Knowledge Base</a></li>
<li><hr class="dropdown-divider"></li>
<li><h4 class="dropdown-header">Most Common Questions:</h4></li>
<li><a class="dropdown-item" href="#">Where are you located</a></li>
<li><a class="dropdown-item" href="#">How long is shipping</a></li>
<li><a class="dropdown-item" href="#">How do I pay</a></li>
<li><hr class="dropdown-divider"></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div>
I'm pretty sure this is a super simple JS problem that any coder worth his $.02 would know, but not knowing JS I don't even know where or what to search for. Any help?

The issue with your code is that when you are using querySelectorAll to access the nav-links the code is trying to access all the nav-links i.e., you are considering all the nav-links then the dropdown in your nav which is also a nav-link is also considered. So the better way to solve this is you can create a new class and attach it to the dropdown nav-link in your case F.A.Q and exclude that class from the function.
Your code:
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">F.A.Q.</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Knowledge Base</a></li>
<li><hr class="dropdown-divider"></li>
<li><h4 class="dropdown-header">Most Common Questions:</h4></li>
<li><a class="dropdown-item" href="#">Where are you located</a></li>
<li><a class="dropdown-item" href="#">How long is shipping</a></li>
<li><a class="dropdown-item" href="#">How do I pay</a></li>
<li><hr class="dropdown-divider"></li>
</ul>
</li>
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive .nav-link')
);
You can add a class called faq and exlude it from the querySelectorAll using :not()
<!-- added a new class faq to the dropdown link -->
<li class="nav-item dropdown"><a class="nav-link dropdown-toggle faq" data-bs-toggle="dropdown" role="button" aria-expanded="false">F.A.Q.</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Knowledge Base</a></li>
<li><hr class="dropdown-divider"></li>
<li><h4 class="dropdown-header">Most Common Questions:</h4></li>
<li><a class="dropdown-item" href="#">Where are you located</a></li>
<li><a class="dropdown-item" href="#">How long is shipping</a></li>
<li><a class="dropdown-item" href="#">How do I pay</a></li>
<li><hr class="dropdown-divider"></li>
</ul>
</li>
// select all links except faq class
const responsiveNavItems = [].slice.call(
document.querySelectorAll('#navbarResponsive a.nav-link:not(.faq)')
);

Just add the below scripts within your tags, preferably before the closing tag
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

How to send the dynamically added values to another url in Django

I have a HTML page with two dropdowns and a button.The values in second dropdown are populated based on the value selected in first dropdown. When I click on the button, it navigates to a different url with the same form and some additional information.How can I populate the dropdown values there too?

you can put name for our URLs and our app name, and then call it in HTML
for example :
url.py
url(r'^page1/$', views.page_num1, name='p1'),
url(r'^page2/$', views.page_num2, name='p2'),
views.py
def page_num1(request):
return render(request, 'index1.html')
def page_num2(request):
return render(request, 'index2.html')
HTML :
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a
class="dropdown-item"
href="{% url 'p1'%}"
>drop down item 1</a
>
<a class="dropdown-item" href="{% url 'p2'%}"
>dropdown item 2</a
>
and this is full code for drop-down menu:
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="{% url '#'%}"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>###</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a
class="dropdown-item"
href="{% url 'p1'%}"
>#####</a>
<a class="dropdown-item" href="{% url 'p2'%}">####</a>
and finally, if you have an app so you should add in url.py:
app_name = 'your app name'
and included inside the link
for example:
urls.py
app_name='test'
HTML:
###

how do I prevent anchor tag from redirecting in javascript when a validation fails

I have HTML with 5 tabs with form fields and button at the bottoms to navigate to next tab. I want to prevent tab switching if validation fails on the click of Next button. Presently when validation fails tab switches to next tab. I have tried both event.preventDefault() and return false individually and combined but none of these worked in chrome browser. Any suggestions would be helpful.
<div class="row">
<ul class="nav nav-pills">
<li class="active" id="libdet">
<a data-toggle="tab" href="#bdetails">1. Service Basic details</a>
</li>
<li>
<a data-toggle="tab" href="#soptions">2. Service Options</a>
</li>
<li>
<a data-toggle="tab" href="#addInfor">3. Service Add. info</a>
</li>
<li>
<a data-toggle="tab" href="#addImgs">4. Images</a>
</li>
<li>
<a data-toggle="tab" href="#tandc">5. Terms & Conditions</a
</li>
</ul>
</div>
<div class="col-xs-4">
<a data-toggle="tab" href="#soptions">
<button name="next" id="nextSB" onclick="validatefirsttab()">NEXT</button>
</a>
</div>
function validatefirsttab() {
if (document.form.productTitle.value == "") {
alert("Please provide Service title!");
document.form.productTitle.focus();
event.preventDefault();
return false;
}

You can use click function directly in jQuery. Your button have an ID that you can use, so:
$("#nextSB").click(function(e){
if (document.form.productTitle.value == "") {
alert("Please provide Service title!");
document.form.productTitle.focus();
e.preventDefault();
return false;
}
}
Then your button will be:
<button name="next" id="nextSB">NEXT</button>
In my opinion, this solution is cleaner than use onclick attribute.

Are you using Bootstrap.js? It is likely that another jQuery listener is triggering the tabs to change.
If this is the case, you'd want to remove the <a data-toggle="tab" href="#soptions"> (which is triggering the tab switch) and create a new jQuery listener for your 'Next' button. You'd place your validatefirsttab() function inside of the bootstrap tab function:
<div class="row">
<ul class="nav nav-pills">
<li class="active" id="libdet">
<a data-toggle="tab" href="#bdetails">1. Service Basic details</a>
</li>
<li>
<a data-toggle="tab" href="#soptions">2. Service Options</a>
</li>
<li>
<a data-toggle="tab" href="#addInfor">3. Service Add. info</a>
</li>
<li>
<a data-toggle="tab" href="#addImgs">4. Images</a>
</li>
<li>
<a data-toggle="tab" href="#tandc">5. Terms & Conditions</a
</li>
</ul>
</div>
<div class="col-xs-4">
<button name="next" id="nextSB">NEXT</button>
</div>
<script>
$('#nextSB').on('click',function() {
if (document.form.productTitle.value == "") {
alert("Please provide Service title!");
} else {
$('a[href="#soptions"]').tab('show') // Select tab by name
}
})
</script>
Not tested, and again I'm assuming you're using bootstrap.js togglable tabs
Hash tag links (href="#foo") won't trigger a page refresh, so e.preventDefault and the like aren't useful here. It is common practice to use hash tag links with jQuery or javascript for precisely that reason.

Thank you Guys! I found an answer.
Here is the modified code:
Added event as parameter on function.
And 1 more call to event.stopImmediatePropagation();
Javascript:
function validatefirsttab(event)
{
if( document.form.productTitle.value == "" )
{
alert( "Please provide Service title!" );
document.form.productTitle.focus() ;
event.preventDefault();
event.stopImmediatePropagation(); // Added now
}
}
HTML:
<a data-toggle="tab" href="#soptions">
<button name="next" id="nextSB" onclick="return validatefirsttab(event);" >NEXT
</button>
</a>

i did not understand how can i use AlloyUI dropdown script

i did not understand how can i use AlloyUI dropdown script. i have write this code 5 time on my same page.
<div id="myDropdown" class="dropdown">
<button id="myTrigger" class="btn btn-default dropdown-toggle" type="button">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Action</a></li>
</ul>
</div>
in this html have same classes and id, and i use this script. i take this code from alloy. follow this http://alloyui.com/examples/dropdown/
YUI().use(
'aui-dropdown',
function(Y) {
new Y.Dropdown(
{
boundingBox: '#myDropdown',
trigger: '#myTrigger'
}
).render();
}
);
i have 5 dropdown on my same page with same html code. when i run this code my first drop down is working and other is not working.

Hide bootstrap's .dropdown-backdrop, CSS only

Is it possible to hide Bootstrap's .dropdown-backdrop element for a certain dropdown (not all on the page) by using CSS only?
I've determined that this is possible using Javascript, with JSFiddle here. However, I would like to accomplish this without using additional JS if possible.
<!-- First dropdown: no backdrop -->
<div id="firstDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
First Dropdown ▼
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="a_dropdown_item" href="#business">Business</a></li>
<li><a class="a_dropdown_item" href="#my-events">Event</a></li>
</ul>
</div>
<!-- Second dropdown: yes backdrop -->
<div id="secondDropdown" class="dropdown">
<button class="btn-dropdown-add btn btn-blue" data-toggle="dropdown">
Second Dropdown ▼
</button>
<ul class="dropdown-menu" role="menu">
<li><a class="a_dropdown_item" href="#business">Business</a></li>
<li><a class="a_dropdown_item" href="#my-events">Event</a></li>
</ul>
</div>
<script type="text/javascript">
// Hide backdrop from #firstDropdown.
// This can be done with JS as below. Can it be done with only CSS?
$('#firstDropdown').on('show.bs.dropdown', function () {
$(".dropdown-backdrop").hide();
});
</script>

Found solution: .dropdown-backdrop is a descendant of its .dropdown, which can have a unique ID, so simply using display:none; in CSS works fine, as in:
#firstDropdown .dropdown-backdrop {
display:none;
}
And then all other dropdowns (except #firstDropdown) will still have a backdrop as normal.
See JSFiddle updated.