So I have a basic dropdown and each dropdown option has specific attributes. I'd like to pass those attributes (data name, description, and value) to a javascript function. code is below the console says "undefined " for everything I'm trying to pass. I've already tried changing .data() to .attr(). I really need something clean and simple. thanks!
HTML
<label class="dropdown" style="float: left" >
<div class="dd-button">Select a Plan</div>
<input type="checkbox" class="dd-input" id="test">
<ul id="dropdown" class="dd-menu">
<li data-description="description." data-name="Web" data-value="mmk">2</li>
<li data-description="description." data-name="Basic" data-value="basic">3</li>
<li data-description="description." data-name="Plus" data-value="plus">4</li>
</ul>
</label>
JS
var PLAN_CONFIG = {
id: '',
billing: '',
name: '',
description: '',
payment: true,
panelLabel: 'Confirm',
};
$('#dropdown').click(function () {
PLAN_CONFIG.id = $(this).data('value');
PLAN_CONFIG.name = $(this).data('name');
PLAN_CONFIG.description = $(this).data('description');
console.log(PLAN_CONFIG);
});
If you assign the click event handler to #dropdown, this in the callback function will be #dropdown too. You should assign the event handler to li elements instead:
$('#dropdown li').click(function () {
Demo:
var PLAN_CONFIG = {
id: '',
billing: '',
name: '',
description: '',
payment: true,
panelLabel: 'Confirm',
};
$('#dropdown li').click(function () {
PLAN_CONFIG.id = $(this).data('value');
PLAN_CONFIG.name = $(this).data('name');
PLAN_CONFIG.description = $(this).data('description');
console.log(PLAN_CONFIG);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="dropdown" style = "float: left" >
<div class="dd-button"> Select a Plan </div>
<input type="checkbox" class="dd-input" id="test">
<ul id = "dropdown" class="dd-menu">
<li data-description = "description." data-name = "Web" data-value="mmk" >2 </li>
<li data-description = "description." data-name = "Basic" data-value="basic" >3 </li>
<li data-description = "description." data-name = "Plus" data-value="plus" >4</li>
</ul>
</label>
Use this selector '#dropdown li'.
Your current code is binding the click event to your element dropdown rather than your li elements.
var PLAN_CONFIG = {
id: '',
billing: '',
name: '',
description: '',
payment: true,
panelLabel: 'Confirm',
};
$('#dropdown li').click(function() {
PLAN_CONFIG.id = $(this).data('value');
PLAN_CONFIG.name = $(this).data('name');
PLAN_CONFIG.description = $(this).data('description');
console.log(PLAN_CONFIG);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="dropdown" style="float: left">
<div class="dd-button"> Select a Plan </div>
<input type="checkbox" class="dd-input" id="test">
<ul id = "dropdown" class="dd-menu">
<li data-description = "description." data-name = "Web" data-value="mmk" >2 </li>
<li data-description = "description." data-name = "Basic" data-value="basic" >3 </li>
<li data-description = "description." data-name = "Plus" data-value="plus" >4</li>
</ul>
</label>
Related
I have a list displayed like a dropdown -
Each of the items except 'Create New Filter' is bound to a key so i can uniquely identify the li items.
I want to know how can i get the selected li item on save and do operations accordingly
What would be the good approach for this so i can understand when 'Create new filter' is clicked or when other li items are selected
Below is the code -
<ul>
<li v-on:click="create">Create New</li>
<li v-for="item in list" :key="item.id" v-on:click="Change(item.id,item.text)">{{ item.text }}</li>
</ul>
As per my understanding this approach is not good, I am not sure why you are building dropdown by using <ul> and <li> instead of select element as it is a form element and provide a better way to get the selected option value by the help of v-model directive.
Anyhow I worked as per your requirement and came up with the solution.
var app = new Vue({
el: '.dropdown',
data: {
list: [{
id: 1,
text: 'First Filter'
}, {
id: 2,
text: 'First Filter 2021'
}, {
id: 3,
text: 'Full Filter'
}],
selectedListItem: null
},
methods: {
create() {
console.log('New filter Create Called');
},
getSelected (item) {
this.selectedListItem = item;
},
save() {
if (this.selectedListItem) {
console.log(this.selectedListItem);
} else {
console.log('No list option selected');
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<input type="text" placeholder="Select Filter" class="dropdown-toggle" data-toggle="dropdown"/>
<ul class="dropdown-menu">
<li v-on:click="create">Create New</li>
<li v-for="item in list" :key="item.id" v-on:click="getSelected(item)">{{ item.text }}</li>
</ul>
<button #click="save">SAVE</button>
</div>
I'm try to catch 'banner name' in under code.
<div class = 'pdf-area'>
<ul class = 'pdf list'>
<li>
<span class="icon-left"></span> 'banner name'
</li>
</ul>
</div>
and here is my try.
$("div.pdf-area ul a").click(function(i) {
var txt = $(i.target).text();
console.log(txt);
});
When I run this code, I don't get the value I want.
How can I extract 'baaner name'?
(href= # -> it's not my code and don't have any autohrity that can modify this code . I only can extract value in this condition.)
You do not need to add the click event by using the selector. Simply pass this as the first parameter. Then inside the function use find() on that object to target the span.
Try the following:
function pdfDownload(el, link){
var name = $(el).find('span.icon-left').text();
console.log(name);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdf area'>
<ul class = 'pdf list'>
<li>
<span class="icon-left"> 'banner name'</span>
</li>
</ul>
</div>
OR: If you do not want to change the HTML
$(".pdfarea > ul a > span").click(function() {
var txt = $(this).text();
console.log(txt);
});
function pdfDownload(){}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdfarea'>
<ul class = 'pdflist'>
<li>
<span class="icon-left"> 'banner name'</span>
</li>
</ul>
</div>
If the banner name outside the span try the following:
$("div.pdf-area ul a").click(function() {
var txt = $(this).text();
console.log(txt);
});
function pdfDownload(){}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = 'pdf-area'>
<ul class = 'pdf list'>
<li>
<span class="icon-left"></span> 'banner name'
</li>
</ul>
</div>
<div class = 'pdf-area'>
<ul class = 'pdflist'>
<li>
<span class="icon-left"> 'banner name'</span>
</li>
</ul>
</div>
$(document).on('click','.pdflist a',function(){
alert($(this).text());
})
Above click event will give the text on the current element
Fiddle : https://jsfiddle.net/gokulmaha/vt3b0keu/2/
You can remove the $("div.pdf-area ul a").click(function(i).. and create pdfDownload function which will handle both
function pdfDownload(e, path) {
console.log(path)
e.preventDefault();
var txt = $(e.target).text();
console.log(txt);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pdf-area'>
<ul class='pdf list'>
<li>
<span class="icon-left"> 'banner name'</span>
</li>
</ul>
</div>
Hi Try this -
$("div.pdf-area ul a").click(function(i) {
var txt = $("div.pdf-area > ul.list > li a span.icon-left").text();
console.log(txt);
});
I have elements which have nested li elements and i made a click function to get the value. Every time i click i am getting the same value again and again.
<script type="text/javascript">
$('.cat-select').on('click',function(){
$('.cat-list').css('display','block');
$('.sub-list').css('display','block');
});
$(document).on('click','.cat-list>li',function(){
var selectedVal = $(this).clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text(); //get the text of elemen
console.log(selectedVal);
$('.cat-select').text(selectedVal);
});
</script>
<div class="form-group">
<label for="input-placeholder" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<style type="text/css">
.cat-list, .sub-list{ display: none; }
</style>
<div class="cat-group">
<button class="cat-select" type="button">Select Category</button>
<ul class="cat-list">
<li class="have-child">Electronics
<ul class="sub-list">
<li class="have-child"> Mobiles & Tablets
<ul class="sub-list">
<li>Mobiles</li>
<li>Tablets</li>
<li class="have-child">Accessories</li>
<ul>
<li>Power Bank</li>
<li>Phone Cases</li>
</ul>
</ul>
</li>
<li class="have-child">Cameras
<ul class="sub-list">
<li>DSLRs</li>
<li>Drones</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Every time i click i am getting the same value
https://jsfiddle.net/yx4Ldt80/
The issue you see is because you only attach the event handler to the child of the .cat-list through your use of the > operator.
To solve this, remove that from the selector and call stopPropagation() on the event to stop it bubbling up the DOM. Try this:
$(document).on('click', '.cat-list li', function(e) {
e.stopPropagation();
var selectedVal = $(this).clone().children().remove().end().text();
$('.cat-select').text(selectedVal);
})
$('.cat-select').on('click', function() {
$('.cat-list, .sub-list').toggle();
});
$(document).on('click', '.cat-list li', function(e) {
e.stopPropagation();
var selectedVal = $(this).clone().children().remove().end().text();
$('.cat-select').text(selectedVal);
})
.cat-list,
.sub-list {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-group">
<label for="input-placeholder" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div class="cat-group">
<button class="cat-select" type="button">Select Category</button>
<ul class="cat-list">
<li class="have-child">Electronics
<ul class="sub-list">
<li class="have-child">
Mobiles & Tablets
<ul class="sub-list">
<li>Mobiles</li>
<li>Tablets</li>
<li class="have-child">Accessories
<ul>
<li>Power Bank</li>
<li>Phone Cases</li>
</ul>
</li>
</ul>
</li>
<li class="have-child">
Cameras
<ul class="sub-list">
<li>DSLRs</li>
<li>Drones</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Also note that I fixed the HTML in your 'Accessories' ul as it was outside of the parent li.
"Never use" Event.stopPropagation()
The worst thing you can do (as suggested by answers here and around the web) is to use Event.stopPropagation().
Don't use Event.stopPropagation(), well, unless you really know what you're doing.
An Application should be always aware of every event happening in it's context.
Imagine you build a popup, modal, or a custom select-box that needs to close if you click anywhere else in the page. Well, congratulations, a LI element just stopped you from doing so.
Use Event.target instead
function myClickHandler(ev) {
if (ev.target !== this) return; // Ignore if non-this called the event
console.log( this.textContent );
}
Here's an example with your specific use-case:
const $cat = $('.cat-select');
$cat.on('click', function() {
$('.cat-list, .sub-list').toggle();
});
$(document).on('click', '.cat-list li', function(ev) {
if (ev.target !== this) return; // Ignore if non-this called the event
const value = $(this).contents().filter((i, el) => el.nodeType == 3)[0].nodeValue;
$cat.text(value);
});
// Than, 3000 lines later... THANK YOU BECAUSE:
$('body').on('click', function() {
// Close a popup or something
console.clear(); console.log(`YEY I registered an event!
Thank you for not using Event.preventDefault()`);
});
.cat-list,
.sub-list {
display: none;
}
<div class="form-group">
<label for="input-placeholder" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div class="cat-group">
<button class="cat-select" type="button">Select Category</button>
<ul class="cat-list">
<li class="have-child">Electronics
<ul class="sub-list">
<li class="have-child"> Mobiles & Tablets
<ul class="sub-list">
<li>Mobiles</li>
<li>Tablets</li>
<li class="have-child">Accessories</li>
<ul>
<li>Power Bank</li>
<li>Phone Cases</li>
</ul>
</ul>
</li>
<li class="have-child">Cameras
<ul class="sub-list">
<li>DSLRs</li>
<li>Drones</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Get the clicked element based the event.target property. Although you can avoid the clone by contents() and filter() methods which help to filter out text nodes.
$(document).on('click', 'li', function(e) {
// if target element is not `li` tag then get closest li tag
var selectedVal = (e.target.nodeType == 'LI' ? $(e.target) : $(e.target).closest('li'))
.contents() // get all children nodes
.filter(function() { // filter out text nodes
return this.nodeType === 3;
}).text(); // get text content
$('.cat-select').text(selectedVal);
})
$(document).on('click', 'li', function(e) {
// if target element is not `li` tag then get closest li tag
var selectedVal = (e.target.nodeType == 'LI' ? $(e.target) : $(e.target).closest('li'))
.contents() // get all children nodes
.filter(function() { // filter out text nodes
return this.nodeType === 3;
}).text(); // get text content
$('.cat-select').text(selectedVal);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="input-placeholder" class="col-sm-2 control-label"></label>
<div class="col-sm-10">
<div class="cat-group">
<button class="cat-select" type="button">
Select Category</button>
<ul class="cat-list">
<li class="have-child">Electronics
<ul class="sub-list">
<li class="have-child">Mobiles & Tablets
<ul class="sub-list">
<li>Mobiles</li>
<li>Tablets</li>
<li class="have-child">Accessories</li>
<ul>
<li>Power Bank</li>
<li>Phone Cases</li>
</ul>
</ul>
</li>
<li class="have-child">Cameras
<ul class="sub-list">
<li>DSLRs</li>
<li>Drones</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
i hope this one is helping u
$('.cat-select').each(function() {
$(this).on('click', function() {
$('.cat-list').css('display', 'block');
$('.sub-list').css('display', 'block');
});
});
$(document).on('click', function() {
$(this).each('.cat-list li', function() {
var selectedVal = $(this).clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text(); //get the text of elemen
console.log(selectedVal);
$('.cat-select').text(selectedVal);
});
});
I have this fragment of HTML containing a navigation menu:
<div class="inner-wraper clearfix">
<ul class="root">
<li ng-repeat="menu in menus" class="l_one selected">
{{menu.Title}}<span class="arr"></span>
<ul ng-show="getHasSubMenus(menu)" class="level sl">
<li ng-repeat="subMenu in menu.SubMenus" class="l_two">
<a ui-sref="site.shopbycategory({ departmentID: subMenu.DepartmentID , categoryID: subMenu.CategoryID, searchTerm: '' })" title="{{subMenu.Title}}">{{subMenu.Title}}</a>
</li>
</ul>
</li>
</ul>
</div>
I want to align the submenu to right position of containing 'li' element, I tried:
var theright = $(this).position().right;
and
var theright = $(this).offset().right - $(this).parent().offset().right;
and
var theright = $(this).css('right');
using the following jquery code but I always get Undefined and NAN instead of a numeric value.
$('.inner-wraper > ul').on('mouseenter', '> li', function (event) {
var theright = $(this).position().right;
//var theright = $(this).offset().right - $(this).parent().offset().right;
//var theright = $(this).css('right');
alert(theright);
$(this).children('ul').css('right', theright);
});
How do I get right position of li element?
<ul id="feature-deals" class="list-products">
<li>
pink
<span id="uid">021454</span>
<span id="qty">1</span>
</li><br>
<li>
yellow
<span id="uid">012447</span>
<span id="qty">1</span>
</li><br>
<li>
violet
<span id="uid">0127841</span>
<span id="qty">1</span>
</li><br>
</ul>
js script
$("#feature-deals li").click(function () {
$.ajax({
url: "phpPage.php",
type: "POST",
data: ({
productId: $(????).text(),
productType: $(????).text(),
productQty: $(???).text()
}),
success : function(data){
totalItemCart();
$("#div1").html(data);
}
})
.error(function(){
alert('error... ohh no!');
});
});
How can i get the entire li content (pname,uid,qty) from the selected li and pass it by .ajax()
heres what im trying to do:
li content --> get all info(pname,uid,qty) --> put to data of ajax --> pass to phpPage.php --> return result
Repeating ids are invalid in html, I would suggest using a class instead of an id, then select the descendants of the li with the specific class
<ul id="feature-deals" class="list-products">
<li>
pink
<span class="uid">021454</span>
<span class="qty">1</span>
</li><br>
<li>
yellow
<span class="uid">012447</span>
<span class="qty">1</span>
</li><br>
<li>
violet
<span class="uid">0127841</span>
<span class="qty">1</span>
</li><br>
</ul>
$("#feature-deals li").click(function () {
$.ajax({
url: "phpPage.php",
type: "POST",
data: ({
productId: $('.uid',this).text(),
productType: $('.pname',this).text(),
productQty: $('.qty',this).text()
}),
success : function(data){
totalItemCart();
$("#div1").html(data);
}
})
.error(function(){
alert('error... ohh no!');
});
});