Jquery event.preventDefault() not working - javascript

I want my menu to show and hide list items on click by default they are hide. The problem is my menu is generated in admin section so it auto assigns url of website to it if i set URL field of particular link to null in menu options. so when i click it reloads home page.
What i want is that when i click any parent li it should stop generating default event so used prevent default. but in my case it is not working and it reloads the page after showing list items of there parent.
Here is a fiddle
Fiddle
Html
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">Massachusetts Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Burlington Mall, MA</span>
</li>
<li class=" "><span class="menu-title">Burlington Mall, MA - Cart</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New Jersey Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Brunswick Square Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Garden State Plaza, NJ</span>
</li>
<li class=" "><span class="menu-title">Menlo Park Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Ocean County Mall, NJ</span>
</li>
<li class=" "><span class="menu-title">Rockaway Townsquare, NJ</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">New York Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">Galleria at White Plains, NY</span>
</li>
<li class=" "><span class="menu-title">Manhattan, NY-Toys 'R' Us </span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
<li class="parent dropdown-submenu mega-group"><a class="dropdown-toggle" data-toggle="dropdown" href=""><span class="menu-title">North Carolina Stores</span><b class="caret"></b></a>
<div class="dropdown-mega level2">
<div class="dropdown-menu-inner">
<div class="row">
<div class="col-sm-12 mega-col" data-colwidth="12" data-type="menu">
<div class="mega-col-inner">
<ul>
<li class=" "><span class="menu-title">CrabTree Valley, NC</span>
</li>
<li class=" "><span class="menu-title">Fayetteville, NC</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
JS:
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
event.preventDefault();
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
}
});
Css
li.parent.dropdown-submenu.mega-group .dropdown-mega.level2 {
display: none;
}
li
{
padding:10px;
position: relative;
margin:auto;
}

Here is a working example: http://jsfiddle.net/hk1w89zw/
Not sure what you were trying to acheive with the id prop. In general it's better to set the onClick event on a link (<a>-tag) instead of the li. and use following jQuery code:
$("li.parent.dropdown-submenu.mega-group > a").on('click', function(event) {
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).closest('.parent').find('.dropdown-mega.level2').show();
});

maybe you want something like this
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).prop('id');
if (id == 'yes') {
//i want to prevent
} else {
$(this).children('.dropdown-mega.level2').show();
$(this).children('.dropdown-mega.level2').hide();
//redirect
window.location.href="location_of_the_filehere";
}
event.preventDefault();
});

Catch the event when its trigger out
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
event.preventDefault();
}

I have to admit that I got your code wrong.
Here is a https://jsbin.com/gigowopijo/3/edit?html,js,console,output (JSBin).
First you don't have a list with the id "#li_menu169". Add it to the ul element
<div class="mega-col col-xs-12 col-sm-12 col-md-4" data-type="menu"><div class="mega-col-inner">
<ul id="li_menu169">
Later on you're showing and hiding the same elements which is a bit confusing. Therefore I would recommend hiding all inner elements first and than showing the inner elements of "this" stuff.
$("#li_menu169 li.parent.dropdown-submenu.mega-group").click(function(event) {
var id = $(this).attr('id');
if (id === 'yes' && typeof id !== undefined) {
console.log("I'm there");
//i want to prevent
} else {
console.log("i'm here");
event.preventDefault();
$('.dropdown-mega.level2').hide();
$(this).find('.dropdown-mega.level2').show();
//redirect
}
});
Within the JSbin it is working as you expect.

Related

Get specific <li> tag values using jquery

I am trying to get
"Pen" , "All Pen" values.
Here is what i tried :-
Please take a look at the code & share your thoughts
Please take a look at the code & share your thoughts
var filtered_category = jQuery('ul.pc_filter_middle-stage2-list ul li:first-child').contents().get(0).nodeValue;
var parent_filtered_category = jQuery('ul.pc_filter_middle-stage2-list ul li:first-child').parents().find('#accordionItemhide li').contents().get(0).nodeValue;
console.log(filtered_category);
console.log(parent_filtered_category);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ok_filter_middle-stage2-container active" style="display: block;">
<ul class="ok_filter_middle-stage2-list-title"><li><strong>Category</strong></li></ul>
<ul class="ok_filter_middle-stage2-list">
<div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper">
<li style="font-weight: normal;">Pencil<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li>
<div class="ok_filter_middle-stage2-category-list sub-category1">
<ul role="listbox" tabindex="0" aria-label="folder list">
<li data-value="2" tabindex="-1" role="option" class="active" aria-selected="false">Pencils<span>(200)</span></li><li data-value="8" tabindex="-1" role="option" class="active">Pencils<span>(300)</span></li> </ul>
</div>
</div>
<div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper">
<li style="font-weight: normal;">Pen<span>(1200)</span></li>
<div class="ok_filter_middle-stage2-category-list sub-category2">
<ul role="listbox" tabindex="0" aria-label="folder list">
<li data-value="All Pen" tabindex="-1" role="option" aria-selected="false">All Pen<span>(10000)</span></li>
</div>
</ul>
</div>
There are some issues in your selector.
Since the attribute id is unique, you can directly use that in the selector.
You can use text() to get the text content.
Try the following way:
var filtered_category = jQuery('ul.ok_filter_middle-stage2-list ul li:first-child').text();
var parent_filtered_category = jQuery('#accordionItemhide li').text();
console.log(filtered_category);
console.log(parent_filtered_category);
var shows = jQuery('.ok_filter_middle-stage2-list_wrapper:eq(1) li:eq(0)').text();
console.log(shows);
var all_shows = jQuery('.ok_filter_middle-stage2-list_wrapper:eq(1) ul li:eq(0)').text();
console.log(all_shows);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ok_filter_middle-stage2-container active" style="display: block;">
<ul class="ok_filter_middle-stage2-list-title"><li><strong>Category</strong></li></ul>
<ul class="ok_filter_middle-stage2-list">
<div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper">
<li style="font-weight: normal;">Clothing<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li>
<div class="ok_filter_middle-stage2-category-list sub-category1">
<ul role="listbox" tabindex="0" aria-label="folder list">
<li data-value="2" tabindex="-1" role="option" class="active" aria-selected="false">Bodysuit<span>(200)</span></li><li data-value="8" tabindex="-1" role="option" class="active">Graphic Tees<span>(300)</span></li>
</ul>
</div>
</div>
<div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper">
<li style="font-weight: normal;">Shoes<span>(1200)</span></li>
<div class="ok_filter_middle-stage2-category-list sub-category2">
<ul role="listbox" tabindex="0" aria-label="folder list">
<li data-value="All Shoes" tabindex="-1" role="option" aria-selected="false">All Shoes<span>(10000)</span></li>
</ul>
</div>
</div>
</ul>
</div>
Let's first try to fix your HTML. Considering I don't know what your program or site does I just refactor everything you had:
$(document).ready(() => {
const okFilter = $('.ok-filter');
const bodyContent = okFilter.find('.ok-filter__ul--body');
const secondCategory = bodyContent.find('.ok-filter_wrapper--category:nth-child(2)');
const secondCategoryListElements = secondCategory.find('.ok-filter__li');
const values = secondCategoryListElements.get().map((li) => li.childNodes[0].nodeValue, []);
console.log(values);
});
.ok-filter--active {
display: block;
}
.ok-filter__li--title {
font-weight: bold;
}
.ok-filter__li--item {
font-weight: normal;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ok-filter ok-filter--active">
<ul class="ok-filter__ul ok-filter__ul--header">
<li class="ok-filter__li ok-filter__li--title">Category</li>
</ul>
<ul class="ok-filter__ul ok-filter__ul--body">
<div class="ok-filter__wrapper ok-filter_wrapper--category">
<li class="ok-filter__li ok-filter__li--item">Clothing<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li>
<div class="ok-filter__wrapper ok-filter__wrapper--sub-category">
<ul class="ok-filter__ul" role="listbox" tabindex="0" aria-label="folder list">
<li class="ok-filter__li ok-filter__li--active" data-value="2" tabindex="-1" role="option" aria-selected="false">Bodysuit<span>(200)</span></li>
<li class="ok-filter__li ok-filter__li--active" data-value="8" tabindex="-1" role="option">Graphic Tees<span>(300)</span></li>
</ul>
</div>
</div>
<div class="ok-filter__wrapper ok-filter_wrapper--category">
<li class="ok-filter__li ok-filter__li--item">Shoes<span>(1200)</span></li>
<div class="ok-filter__wrapper ok-filter__wrapper--sub-category">
<ul class="ok-filter__ul" role="listbox" tabindex="0" aria-label="folder list">
<li class="ok-filter__li" data-value="All Shoes" tabindex="-1" role="option" aria-selected="false">All Shoes<span>(10000)</span></li>
</ul>
</div>
</div>
</ul>
</div>
In the script section, you have an example of how you can get the requested values. I separated them using the find() function to give you more control & understanding of how to reach them. I have to be honest with you. If you aren't planning to support IE then using jquery only slows you down. You could have used querySelector() & querySelectorAll() instead.
Secondly, try to get data from text nodes is a really bad practice. If you want a value that is altered for the user you could have used an attribute to store that data in the given element or using the <data> element from HTML5. You could also just have wrapped it into a <span> tag to make sure you selected the correct element.
Good luck
I think this could be solve your problem:
$('.ok_filter_middle-stage2-list_wrapper').each(function() {
console.log($(this).find('li').text())
});
Using .each() we can go through the elements and finally find your childs.
A function like the one in the below example would be helpful.
The order of the items in the output, is one to one related, to the order of the items in the array of search terms.
So for a search array ['Clothing','Bodysuit','Shoes','All Shoes'] the output would be ["2200","200","1200","10000"].
function findValues(searchTerms) {
let search = new RegExp('^('+searchTerms.join('|')+')','i');
return lis = Object.values($('.ok_filter_middle-stage2-list li')).filter(x => search.test(x.textContent)).map(x => $(x).find('span').text().replace(/(\(|\))/g,''));
}
let out = findValues(['Clothing','Bodysuit']);
console.log(out);
out = findValues(['Shoes','All Shoes']);
console.log(out);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ok_filter_middle-stage2-container active" style="display: block;">
<ul class="ok_filter_middle-stage2-list-title"><li><strong>Category</strong></li></ul>
<ul class="ok_filter_middle-stage2-list">
<div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper">
<li style="font-weight: normal;">Clothing<span>(2200)</span><img src="/media/images/default/filter_arrow_down_white.svg" alt=""><arrow></arrow></li>
<div class="ok_filter_middle-stage2-category-list sub-category1">
<ul role="listbox" tabindex="0" aria-label="folder list">
<li data-value="2" tabindex="-1" role="option" class="active" aria-selected="false">Bodysuit<span>(200)</span></li><li data-value="8" tabindex="-1" role="option" class="active">Graphic Tees<span>(300)</span></li> </ul>
</div>
</div>
<div id="accordionItemhide" class="ok_filter_middle-stage2-list_wrapper">
<li style="font-weight: normal;">Shoes<span>(1200)</span></li>
<div class="ok_filter_middle-stage2-category-list sub-category2">
<ul role="listbox" tabindex="0" aria-label="folder list">
<li data-value="All Shoes" tabindex="-1" role="option" aria-selected="false">All Shoes<span>(10000)</span></li>
</div>
</ul>
</div>

jquery page counter, pagination

I have a problem with the next code
scorm
In the previous image you can see a scorm with a list of pages on the left and a counter down at the center.
$(document).ready(function(){
$(".ViewerPagination__fullpage").html($("li.liItem").size());
$(".ViewerPagination__page").text(1);
$("li.liItem").on( "click", function(){
var numpag = $("li.liItem").index(this);
$(".ViewerPagination__page").text(numpag+1);
$('a.nav_delante').on( "click", function(){
var summa = ++numpag;
$(".ViewerPagination__page").text(summa+1);
if (summa === $("li.liItem").length) {
$(".ViewerPagination__page").html($("li.liItem").size());
$('a.nav_delante').off();
}
});
$('a.nav_atras').on( "click", function(){
var rest = --numpag;
$(".ViewerPagination__page").text(rest-1);
if (rest === 1) {
$(".ViewerPagination__page").text(1);
$('a.nav_atras').off();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--this is the html code that I use for the list:-->
<ul class="uItem">
<li title="text1" class="liItem ">
<div class="divItem notattempted selected" data-pag="001">
<span class="spanItem">
<a class="aItem">text1</a>
</span>
</div>
</li>
<li title="text2" class="liItem ">
<div class="divItem notattempted" data-pag="002">
<span class="spanItem">
<a class="aItem">text2</a>
</span>
</div>
</li>
<li title="text3" class="liItem ">
<div class="divItem notattempted" data-pag="003">
<span class="spanItem">
<a class="aItem">text3</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="004">
<span class="spanItem">
<a class="aItem">text4</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="005">
<span class="spanItem">
<a class="aItem">text5</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="006">
<span class="spanItem">
<a class="aItem">text6</a>
</span>
</div>
</li>
<li title="text4" class="liItem ">
<div class="divItem notattempted" data-pag="007">
<span class="spanItem">
<a class="aItem">text7</a>
</span>
</div>
</li>
</ul>
<!--this is the html code that I use for the counter:-->
<a class="nav_atras" href="#" alt="Anterior" title="Anterior">
<button class="buttMoodle" style="height: 20px;" ></button>
</a>
<div class="ViewerPagination__container">
<span class="ViewerPagination__page"></span>
<span class="ViewerPagination__points">ยท</span>
<span class="ViewerPagination__fullpage"></span>
</div>
<a class="nav_delante" href="#" alt="Siguiente" title="Siguiente">
<button class="buttMoodle" style="height: 20px;"></button>
</a>
If you click on the item of the list, it works fine, but i have problems with the next and back buttons, it does not work until you select an item from the list and sometimes they work badly since they start counting -1, -2 when you press the back button and they go past the number of items in the list with the forward button.
Can someone help me to solve this problem with a best code? thanks.
i just uploaded the scorm, you can see it online following the next link, you only have to loging, I know, it is boring, but it is the only way that I can show you this, so I am waiting for your help.
https://cloud.scorm.com/sc/InvitationConfirmEmail?publicInvitationId=6aeec00f-7333-4537-a3f3-da6ac52e1fb3
Thanks in advance.

Change display and icon when click on <a> element

I want to know how to change display style and element class when I click on element:
and also I'm loading " jquery.min.js version: 2.1.4 " and " bootstrap.min.js "
Before click on element:
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
And after click on element:
<nav class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" href="#" title="Search articles">
<i class="fa fa-fw fa-times" title="Close search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: block;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search articles');
i.removeAttr('id');
var j = $('i.fa-search');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-times');
j.attr('title','Close search');
$('.search-area').css('display',"block");
});
if u want to (display:none) again
$("a").click(function(){
var i =$(this);
i.removeAttr('title');
i.attr('title','Search Posts');
i.attr('id','nav-link-search');
var j = $('i.fa-times');
j.removeAttr('class');
j.attr('class','fa fa-fw fa-search');
j.removeAttr('title');
$('.search-area').css('display',"none");
});
$(document).on('click', ".search-toggle", function(e) {
e.preventDefault();
$(".search-area").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<div><ul class="nav navbar-nav">
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area" style="display: none;">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>
The code below will add the display: block to the element "search-area". This is given you have a clicking element with the class "element".
$(".element").click(function(){
$(".search-area").css( "display", "block" );
});
To change an element when you click on a link, the general concept is
$('a').on('click',function(e) {
e.preventDefault(); // don't follow the link
$('.search-area').addClass('something').removeClass('somethngElse'); // change .search-area
$('i.fa').addClass('something').removeClass('somethingElse').attr('title','foobar'); // change your i element
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class"nav navbar-nav" >
<li class="nav-item search">
<!-- this a element -->
<a class="nav-link search-toggle" id="nav-link-search" href="#" title="Search Posts">
<i class="fa fa-fw fa-search"></i>
<span class="sr-only">
Search
</span>
</a>
</li>
</ul>
</div>
<progress class="nav-progressbar" max="100" title="How much of the page you have seen so far. Hold and drag to change page position." value="0"></progress>
</nav>
<div class="search-area">
<div class="container">
<div class="search-area-input">
<input placeholder="Search articles" type="text">
</div>
<div class="search-area-results index">
<ol class="article-index-list"></ol>
</div>
</div>
</div>

jQuery toggle function stop disappear subitems

I have got code like this:
<div class="row menu-container">
<div class="col-lg-4 col-sm-10">
<h4 class="menu-title">Item<span class="menu-bold">1</span></h4>
<ul id="menu-1" class="menu">
<li id="menu-item-222"><span>Subitem1</span></li>
<li id="menu-item-223"><span>Subitem2</span></li>
<li id="menu-item-224"><span>Subitem3</span></li>
</ul>
</div>
<div class="col-lg-4 col-sm-10">
<h4 class="menu-title">Item<span class="menu-bold">2</span></h4>
<ul id="menu-2" class="menu">
<li id="menu-item-237"><span>Subitem1</span></li>
<li id="menu-item-239"><span>Subitem2</span></li>
<li id="menu-item-241"><span>Subitem3</span></li>
</ul>
</div>
</div>
$("h4.menu-title").mouseenter(function() {
$(this).siblings("ul").toggle();
}).mouseleave(function() {
$(this).siblings("ul").toggle();
});
I want to mouseenter Item 1 and then show up subitems, but when I want to go through subitems they disappear. Is it possible to do keep it displayed while I am on them?
Full example on: https://jsfiddle.net/pfjsxj58/
The issue is because the mouseout is called when you leave the h4 to select an option in the ul. Instead, attach the events to the parent div element which is holding both the h4 and the ul:
<div class="col-lg-4 col-sm-10 item-group">
<h4 class="menu-title">Item<span class="menu-bold">1</span></h4>
<ul id="menu-1" class="menu">
<li id="menu-item-222"><span>Subitem1</span></li>
<li id="menu-item-223"><span>Subitem2</span></li>
<li id="menu-item-224"><span>Subitem3</span></li>
</ul>
</div>
<div class="col-lg-4 col-sm-10 item-group">
<h4 class="menu-title">Item<span class="menu-bold">2</span></h4>
<ul id="menu-2" class="menu">
<li id="menu-item-237"><span>Subitem1</span></li>
<li id="menu-item-239"><span>Subitem2</span></li>
<li id="menu-item-241"><span>Subitem3</span></li>
</ul>
</div>
$(".item-group").mouseenter(function() {
$(this).find("ul").toggle();
}).mouseleave(function() {
$(this).find("ul").toggle();
});
Updated fiddle
Yes you can, you have to modify your HTML and make your subitems childs of the item witch show your options.
In that way, your element keep the focus, and you can click on subitems

Loading new content in a tab when clicked on a button not working

I am trying load content into a tab when clicked on a button. But the below code takes me to the first tab instead.
HTML CODE:
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#overview" >Overview</a></li>
<li class=""><a href="#site" >Manage Sites</a></li>
<li class="" style="display:none;"><a href="#department" >Departments</a></li>
</ul>
</div>
<div class="tab-pane" id="site">
<div class="container center">
<h3 class="center">Sites Management</h3>
<tr>
<td><input type="text" class="form-control name" id="site_name{ID}" value="{NAME}">/td>
<button type="button" class="btn btn-default btn-sm dropdow`enter code here`n-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#dept-container" class='manageDepartments' id='{ID}'>Manage departments</a></li>
</ul>
</td>
</tr>
</div>
</div>
<div class="tab-pane" id="department">
<div class="container center" id="dept-container">
<h3 class="center">Departments Management</h3>
</div>
</div>
Jquery:
$('.manageDepartments').on( 'click', function( event ) {
var urlLinks = $(this).attr("href");
$("#site").load(urlLinks);
});
Can anyone tell me what's wrong in here?
Thanks in advance
$('.manageDepartments').on( 'click', function( event ) {
event.preventDefault();
$("#site").html($($(this).attr("href")).html());
});

Categories