Bootstrap Pagination is removing href, making links unclickable - javascript

I have setup my pagination exactly how bootstrap pagination examples are given. Everything works except the links. Apparently the Jquery script removes the href="link" from the <a> tag.
This is what my php script generates in the html without the pagination script
<div id="alphabet">
<ul>
<li>All</li>
<li><a href="/retailers.php?letter=0-9" >0-9</a></li>
<li><a href="/retailers.php?letter=A" >A</a></li>
<li><a href="/retailers.php?letter=B" >B</a></li> </ul>
</div>
This is what the pagination script does to my pagination links, as you can see it takes the links out:
<div id="alphabet" class="pagination">
<ul>
<li><a data-original-title="" title=""><<</a></li>
<li><a data-original-title="" title=""><</a></li>
<li><a data-original-title="" title="">1</a></li>
<li><a data-original-title="" title="">2</a></li>
<li class="active"><a data-original-title="" title="">3</a></li>
<li><a data-original-title="" title="">4</a></li>
<li><a data-original-title="" title="">5</a></li>
<li><a data-original-title="" title="">></a></li>
<li><a data-original-title="" title="">>></a></li>
</ul></div>
This is a screenshot of the my pagination with the script, as you can see it displays them exactly like the examples on the pagination site:
This is the options javascript I am using:
var options = {
currentPage: 3,
totalPages: 10,
useBootstrapTooltip:true
bootstrapTooltipOptions: {
html: true,
placement: 'bottom'
}
}
$('#alphabet').bootstrapPaginator(options);

pageUrl: function(type, page, current){
return "http://example.com/list/page/"+page;
}
I think you should adapt the code to get the letter instead of the page; you probably can do that with data-attributes.

Related

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>

The Elements in my ul dissappear, when I use them with jQuery

I created a List in a Dropdown panel from Foundation. In that List I have links. This is my List:
<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button>
<div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true">
<ul class="plzlist">
<li><a class="plzclick">10000 - 19999</a></li>
<li><a class="plzclick">20000 - 39999</a></li>
<li><a class="plzclick">40000 - 59999</a></li>
<li><a class="plzclick">60000 - 79999</a></li>
<li><a class="plzclick">80000 - 99999</a></li>
</ul>
</div>
Now I'm using a jQuery script to detect, if the elements were clicked, and when they're clicked, to write them into the Button. This is my script:
<script type="text/javascript">
$(document).ready(function(){
$('.plzclick').on("click", function(){
$('.plzddmenu').html(this);
});
</script>
It all works fine, besides that my Elements disappear from my List, once I clicked them. Anyone know, why they dissapear and how I can fix this to make them stay?
You are moving your items to the button, You need just to change your button html to the clicked a tag html content.
$(this).html();// retruns the html content of the elemtent.
$(document).ready(function() {
$('.plzclick').on("click", function() {
$('.plzddmenu').html($(this).html());
console.log(this);
console.log($(this));
console.log($(this).html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<button class="button plzddmenu" type="button" data-toggle="PLZdropdown">Postleitszahl Suche</button>
<div class="dropdown-pane" id="PLZdropdown" data-dropdown data-auto-focus="true">
<ul class="plzlist">
<li><a class="plzclick">10000 - 19999</a>
</li>
<li><a class="plzclick">20000 - 39999</a>
</li>
<li><a class="plzclick">40000 - 59999</a>
</li>
<li><a class="plzclick">60000 - 79999</a>
</li>
<li><a class="plzclick">80000 - 99999</a>
</li>
</ul>
</div>
<script type="text/javascript">
</script>

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>

jquery find() method not working

Recently I am having a problem with my jquery code. I was trying to get the elements from the html using the jquery find method but its not working. I have tried changing the elements name but still i cant find where is my mistake.
Here is the following html code:
<div class="navbar-collapse collapse">
<nav>
<ul class="nav navbar-nav navbar-right">
<li class = "dropdown"><span>About Us</span><b class = "caret"></b>
<ul class = "dropdown-menu">
<li data-slide = '1'>Philosophy</li>
<li>Founding Members</li>
<li>Committee</li>
<li>Code of Ethics</li>
</ul>
</li>
<li data-slide='2'>Digital Ecosystem</li>
<li data-slide='3'>Fellow & Members</li>
<li data-slide='4'>SIGs</li>
<li data-slide='5'>Local Chapters</li>
<li data-slide="7">Events</li>
<li data-slide="8">Our Service</li>
<li>
<a href="#" onClick="window.open('logout.php','_self','width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes')">
<?php
if (isset($_SESSION['CurrentUser'])) {
echo "Log Out";
}
?>
</a>
</li>
<li>
<a href="#" onClick="window.open('login.php','_self','width=400,height=200,toolbar=yes, location=yes,directories=yes,status=yes,menubar=yes,scrollbars=yes,copyhistory=yes, resizable=yes')">
<?php
if (!isset($_SESSION['CurrentUser'])) {
echo "Login/Register";
}
?>
</a>
</li>
</ul>
</nav>
</div>
I have included my jquery code too :
var links = $('.nav, .navbar-nav, .navbar-right').find('li');
Actually what the code does is once it find the 'li' html elements it slides the page each time a 'li' element is being clicked. Now if I click on the 'li' elements my page doesnt scrolls to the selected page. it would be great if someone is there to solve my problem.
Try this (if you really want the "links" tags):
var links = $('.nav.navbar-nav.navbar-right').find('a');

On page load open a href section by default using javascript

I have two navigations and i want the browser to load #informals-1 by default on page load. How can I do that using javascript? I have a code to navigate between the -nav and -subnav, but the #informals-1 section is not activated by default. I have to click on the informals-1 anchor to get the subnav under it.
Before activation - this
After activation - this
<nav id="documentation-nav">
<ul>
<li><span>1</span>Informals
</li>
<li><span>2</span>Tech Events</li>
</ul>
</nav>
<nav id="documentation-subnav">
<ul id="informals">
<li><a href="#informals-1" >Tic Toc</a></li>
<li><a href="#informals-2" >Jack of all Trades</a></li>
<li><a href="#informals-3" >Tattoo making</a></li>
<li><a href="#informals-4" >Face painting</a></li>
<li><a href="#informals-5" >Foosball</a></li>
<li><a href="#informals-6" >Solo Impromptu</a></li>
<li><a href="#informals-7" >Challenge accepted</a></li>
<li><a href="#informals-8" >Sack Race</a></li>
<li><a href="#informals-9" >Connected</a></li>
<li><a href="#informals-10" >Mystery date</a></li>
<li><a href="#informals-11" >The 90's Game</a></li>
</ul>
<ul id="techevents">
<li>name1</li>
<li>name1</li>
<li>name1</li>
<li>name1</li>
<li>name1</li>
</ul>
You can do something like the following.
Give the li an id
<li id="yourId"><a href="#informals-1" >Tic Toc</a></li>
then have the window scroll to 500 pixels from top. Change 500 to whatever amount is correct for you.
document.getElementById('yourId').style.display = 'block';
window.scrollTo(0, 500);

Categories