JQuery basic text replacement on click/change using .parent() and .closest() - javascript

I have this dropdown styled with ul and I need to replace the heading with the very first content inside the <span class="parent">some text</span>
The <ul> contains different sections with each section different headings. Such as locations, provinces, languages etc.
I have figured out how to do this, but each time it only grabs the first heading even if the heading of the chosen option changes.
So for example if I select something from let's say Provinces, the heading of my label doesn't change to Provinces but it stays on Country.
What am I doing wrong here?
Screenshot
/* Destination selection */
$('.field-destination').each(function() {
var parent = $(this);
var dropdown_menu = $('.dropdown-menu', parent);
$('li', dropdown_menu).on('click', function() {
$('.destination', parent).text($(this).find('span').text());
//$('label', parent).text($(this).closest('.parent_li').find('span.parent').text());
$('label', parent).text($(this).parent().find('.parent_li').closest('li').find('.parent').first().text());
$('input[name="location_name"]', parent).val($(this).find('span').text());
$('input[name="location_id"]', parent).val($(this).data('value'));
if (window.matchMedia('(max-width: 767px)').matches) {
$('label', parent).hide();
$('.render', parent).show();
}
dropdown_menu.slideUp(50);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-extra-field dropdown clearfix field-destination has-icon">
<i class="input-icon field-icon fa"></i>
<div class="dropdown" data-toggle="dropdown" id="dropdown-destination">
<label>Locatie</label>
<div class="render">
<span class="destination">Kies een plaats</span>
</div>
</div>
<input type="hidden" name="location_name" value="">
<input type="hidden" name="location_id" value="">
<ul aria-labelledby="dropdown-destination" class="dropdown-menu" tabindex="1">
<li class="item parent_li" data-country="" data-value=""><span class="parent">Country</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">City</span></li>
...
<li class="item parent_li" data-country="" data-value=""><span class="parent">Provinces</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">Province</span></li>
...
<li class="item parent_li" data-country="" data-value=""><span class="parent">Languages</span></li>
<li class="item" data-country="" data-value=""><i class="input-icon field-icon fa"></i><span class="lv2">language</span></li>
</ul>
</div>
Can anyone help me out?

Related

Dropdown submenu wont stay open

I am trying to make my dropdown open only on click. Currently, I can click to open the dropdown however when I move my mouse to the submenu or anywhere else the submenu disappears.
I have tried to use e.stopPropagation but no luck.
Is there a CSS or Javascript solution I can use to help.
HTML
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="menu-anchor" href="javascript:;">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants</a> <i class="dropdown-toggle" data-toggle="dropdown"></i>
<div class="dropdown-menu" id="myDropDown">
<div class="row">
<div class="col-xs-6 col-md-4">
<label for="activityCode">Activity Code</label>
<input name="activityCode" id="activityCode" class="form-control" type="text" maxlength="3" value={this.state.activityCode} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="awardId">Grant Number</label>
<input name="awardId" id="awardId" class="form-control" type="text" maxlength="10" value={this.state.awardId} onChange={this.handleValidateChange} />
</div>
<div class="col-xs-6 col-md-4">
<label for="granteeName">Grantee Name</label>
<input name="granteeName" id="granteeName" class="form-control" type="text" value={this.state.granteeName} onChange={this.handleChange} />
</div>
</div>
</div>
</li>
</ul>
</div>
JS
$('#myUlList').on({
"click":function(e){
e.stopPropagation();
}
});
$('#myDropdown').on({
"click": function (e) {
e.stopPropagation();
}
});
Use <a class="dropdown-toggle" data-toggle="dropdown" href="#"> to open/close a dropdown menu in Bootstrap. JQuery code for the dropdown is not needed. Ofcourse the jquery.min.js and bootstrap.min.js are required.
<div class="container">
<ul class="nav navbar-nav" id="myUlList">
<li id="search-box" class="dropdown dropdown-search">
<a class="dropdown-toggle menu-anchor" data-toggle="dropdown" href="#">
<i class="dropdown-search-icon glyphicon icon-search2"></i> Search Grants
</a>
<div id="myDropDown" class="dropdown-menu">
...
</div>
</li>
</ul>
</div>
I don't recognize your jquery as valid syntax. Try this to trigger a function on click.
$('#myUlList').on("click", function(e) {
e.stopPropagation();
});
$('#myDropdown').on("click", function(e) {
e.stopPropagation();
});

Semantic UI Dropdown Search - selecting with the enter key

I've been working with Semantic UI for a project. I'm using the Search Selection version of the dropdown (classes are 'ui fluid search selection dropdown'). Under each item, I have setup a custom data-dogs attribute, with either 0 or 1. If the selected item has a data-dogs value of 1, I need an item on my form to show, or hide if it's a 0.
It's working fine on the mouse click, but I'm rather rusty with JS, so I'm not sure if there is an easy way to get the same functionality with the enter key and up/down arrows).
The JS code I've made is below.
If anyone could give me some pointers, I'd very much appreciate it.
Many thanks in advance!
$('.item').on('click', function(){
if($(this).data('dogs')==1){
$('#dogCheckbox').removeClass('hidden');
console.log('Working?');
} else {
$('#dogCheckbox').addClass('hidden');
}
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="location" id="location_search">
<i class="dropdown icon"></i>
<div class="default text"></div>
<div class="menu">
<div class="item" data-value="1" data-dogs="0">A1</div>
<div class="item" data-value="2" data-dogs="0">A2</div>
<div class="item" data-value="3" data-dogs="0">A3</div>
<div class="item" data-value="4" data-dogs="0">A4</div>
<div class="item" data-value="5" data-dogs="0">A5</div>
<div class="item" data-value="6" data-dogs="0">A6</div>
<div class="item" data-value="7" data-dogs="0">A7</div>
<div class="item" data-value="8" data-dogs="0">A8</div>
<div class="item" data-value="9" data-dogs="1">A9</div>
<div class="item" data-value="10" data-dogs="1">A10</div>
<div class="item" data-value="11" data-dogs="1">A11</div>
<div class="item" data-value="12" data-dogs="0">A12</div>
<div class="item" data-value="13" data-dogs="1">A14</div>
<div class="item" data-value="14" data-dogs="1">A15</div>
<div class="item" data-value="15" data-dogs="1">A16</div>
</div>
</div>
<div class="ui checkbox hidden" id="dogCheckbox">
<input type="checkbox" tabindex="0" class="hidden" name="
form_dog">
<label>Dog friendly unit! Is a dog present?</label>
</div>
You can try this:
$(".item").keyup(function(event){
if(event.keyCode == 13){
$('.item').click();
}
});
13 is the Enter key code, so- when keyup event occurs, and the pressed key is Enter- do the click function.
Hope it helps

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

Jquery event.preventDefault() not working

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.

Categories