trying to get the value from the <li> in JQuery click event.
I'm using an unordered list as a selection table in place of a real dropdown list.
HTML:
<ul id="dropdown">
<li value="1">user name</li>
<li value="2">user age</li>
<li value="3">user height</li>
</ul>
JS:
$('#contactdiv1 #dropdown li').click(function(e) {
var selection = $(this).text(); //this alerts name
var selection = $(this).value(); // this fails object undefined
var selection = $(this).find("value").text(); // this is blank
alert(selection);
//populateTableRow($('#customer-title'), data, selection);
});
First of all, you should not be using value attribute on <ul> it is reserved only for <ol>.
You could allways use $("selector").attr("attribute") to get the value of any attribute present in your element.
As told in the comments, you should be using a data-* attribute for everything that is not pure HTML.
Get attribute using .attr value works on form/input elements its not a valid attribute for li
$('#dropdown li').click(function(e) {
alert($(this).attr("value"))
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="dropdown">
<li value="1">user name</li>
<li value="2">user age</li>
<li value="3">user height</li>
</ul>
Related
I have the following example code:
<ul class="name_of_class" id="TEST">
<li class="foo">1</li>
<li class="boo">2</li>
<li class="goo">3</li>
<ul>
When a specific <li> is selected, the class changes to whatever the name is, plus sortUp or sortDown.
Example:
<ul class="name_of_class" id="TEST">
<li class="foo">111</li>
<li class="boo sortDown">222</li>
<li class="goo">333</li>
<ul>
I am trying to get the value of the actual text inside the <li>, but I keep getting undefined.
var li = document.getElementById('TEST');
alert($('#TEST').filter('.sort').html());
I tried using different ways but no matter what I do I can't get the actual value, which in this case should be 222.
Any idea what I am doing wrong?
You can select the li with either sortUp or sortDown by using the [attribute*="value"] selector,
The [attribute*="value"] selector is used to select elements whose
attribute value contains a specified value.
const li = document.querySelector('[class*="sort"]');
console.log(li.textContent);
li.style.background = "red";
<ul class="name_of_class" id="TEST">
<li class="foo">111</li>
<li class="boo sortDown">222</li>
<li class="goo">333</li>
<ul>
See css attribute selectors
I'm not sure what the classes have to do with your requirement to get the text of the clicked li element. Just set up a click event handler on the ul and then in the handler, check the event target to ensure it was an li, then just get the text of the event target.
document.getElementById("TEST").addEventListener("click", function(evt){
if(evt.target.nodeName==="LI"){
alert(evt.target.textContent);
}
});
<ul class="name_of_class" id="TEST">
<li class="foo">1</li>
<li class="boo">2</li>
<li class="goo">3</li>
<ul>
Maybe you can try this:
alert($('#TEST').find('li[class^='sort']').html());
You will find a li element that has a class that starts with "sort".
You can see more of this selector here.
I am trying to get the value of very next element of the current/selected element for example here is the list
<ul>
<li class="abc selected">test </li>
<li class="abc">test1 </li>
<li class="abc">test2 </li>
</ul>
From the above code I am trying to get the value of "a" tag which is very next to the selected li, in above case I am try to get the value of a tag which is test1 and this "a" tag is within the very next li after the selected one.
I tried to use the jQuery below but its fetching the empty result. Any help
var linktext1= jQuery(".selected").next("li a").text();
alert (linktext1);
The selector string passed to .next will filter out the next element if it doesn't match the selector string. But the next element is a li, not an a, so .next('li a') won't work.
Use .next("li").find('a') instead:
var linktext1 = jQuery(".selected").next("li").find('a').text();
console.log(linktext1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="abc selected">test </li>
<li class="abc">test1 </li>
<li class="abc">test2 </li>
</ul>
In this particular situation, though, there's no need for a li selector to pass to .next, because what is .selected will be a li, so any of its siblings will also be lis:
var linktext1 = jQuery(".selected").next().find('a').text();
console.log(linktext1);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="abc selected">test </li>
<li class="abc">test1 </li>
<li class="abc">test2 </li>
</ul>
I think you should remove "li a" and it works. Below is the code
var linktext1= jQuery(".selected").next().text();
alert (linktext1);
Here is the example jsfiddle
I have list elements as below :
<ul id="listSet">
<li id="dy1">Dynamic values</li>
<li id="dy2">Dynamic values</li>
</ul>
id of li is dynamic and populated from database.
When i click any item i.e Dynamic Values their id is shown as alert .
Code to show alert :
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
var ul = document.getElementById('listSet');
ul.onclick = function(event) {
var target = getEventTarget(event);
alert(target.id);
};
But i have multiple sets of ul which are retrieved from database , for example as :
<ul id="listSet">
<li id="dy1">Dynamic values</li>
<li id="dy2">Dynamic values</li>
</ul>
<ul id="listSet">
<li id="dy3">Dynamic values</li>
<li id="dy4">Dynamic values</li>
</ul>
<ul id="listSet">
<li id="dy5">Dynamic values</li>
<li id="dy6">Dynamic values</li>
</ul>
Using same script for alert , shows click alert for only first set of ul ,
How to show alert when click any item under li with ul id = "listSet" ?
Thanks
There must not be multiple elements in a document that have the same id value.
Use class instead of ID attribute and getElementsByClassName or querySelectorAll to select elements.
[].forEach.call is used to iterate elements having length property, for-loop could be used as well.
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
var ul = document.getElementsByClassName('listSet');
[].forEach.call(ul, function(el) {
el.onclick = function(event) {
var target = getEventTarget(event);
alert(target.id);
};
});
<ul class="listSet">
<li id="dy1">Dynamic values</li>
<li id="dy2">Dynamic values</li>
</ul>
<ul class="listSet">
<li id="dy3">Dynamic values</li>
<li id="dy4">Dynamic values</li>
</ul>
<ul class="listSet">
<li id="dy5">Dynamic values</li>
<li id="dy6">Dynamic values</li>
</ul>
The HTML spec required the ID attribute to be unique in a page:
This attribute assigns a name to an element. This name must be unique in a document.
If you have several elements with the same ID, your HTML is not valid.
So, getElementById() should only ever return one element. You can't make it return multiple elements.
You can use getElementByClassName then use some kind of loop on all retrieved elements and attach events on them.
elements can't have same ID but could have same class name anyway with do not need class name or id attr of ul element,
it's easy to handle it with Jquery
use below code
$("li").on("click",function(){
id=$(this).attr("id");
alert(id);
});
and see the live demo at below link
https://jsfiddle.net/kjakzc7d/
I am working on a node.js application which generates a html page. This html page displays a list of associates built according to the data passed onto this page. A list is built something like as follows:
<ul class="notification-body" style="">
//loop for all assocaite id's passed to this page
<li class="testClass" data-associateid="<%= assocID %>">
<span>
<span class="subject">
<label class="btnClass label label-info">ClickMe!</label>
</span>
</span>
</li>
The generated html src looks something like this:
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01">
<li class="testClass" data-associateid="AA02">
<li class="testClass" data-associateid="AA03">
I am trying to get the value of the data attribute using Jquery & I tried the following:
$(".btnClass").click(function(){
console.log($".testClass").attr("data-associateid"));
});
But this outputs'AA01'everytime i click on the btn and I am not getting the expected output in the console:
AA01
AA02
AA03
I tried the following also but it gives me undefined:
$(".btnClass").click(function(){
console.log($(this).find(".testClass").attr("data-associateid"));
});
You need to use jQuery.data().
I've created a jsFiddle to show this working.
I've closed the LI because AR.
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01">1</li>
<li class="testClass" data-associateid="AA02">2</li>
<li class="testClass" data-associateid="AA03">3</li>
</ul>
Here's the JavaScript:
$(document).ready(function() {
$('.testClass').on('click', function(){
alert( $(this).data('associateid') );
});
});
Anytime you have an attribute that starts with data-, you can reference the string after the dash as a data container. Here, I'm calling jQuery.data() on an object (the LI) and asking for the data in the container associateID.
What you are currently doing:
$(".btnClass").click(function(){
console.log($(".testClass").attr("data-associateid"));
});
Will match the first instance of .testClass and print the data-associateid attribute. What you seem to want to do is to iterate over all .testClass and print their data-associateid values:
$(".btnClass").click(function(){
$(".testClass").each(function() {
console.log($(this).attr('data-associateid'));
});
});
Based on your updated HTML you would do this:
$(".btnClass").click(function() {
var id = $(this).parents('.testClass').attr('data-associateid');
console.log(id);
});
This will search the parents of the clicked on .btnClass to find elements with the class .testClass.
To get the data for that instance you simply need to traverse to the parent <li>.
Within an event handler, this is the element that the event occured on. Use closest() to access the parent <li>
$(".btnClass").on('click', function(){
alert( $(this).closest('li').data('associateid') );
});
Assign different classes to your li elements like this:
<ul class="notification-body" style="">
<li class="testClass1" data-associateid="AA01">test 1</li>
<li class="testClass2" data-associateid="AA02">test 2</li>
<li class="testClass3" data-associateid="AA03">test 2</li>
</ul>
Note, that I closed your li and ul tags to have valid HTML.
And then you can select an element with its own class:
console.log($(".testClass2").attr("data-associateid"));
I created a JSFiddle for you:
http://jsfiddle.net/8rLpbk5m/
I had hoped you could do it with just a find but apparently not. You have to use each to loop through all the elements.
$(".btnClass").click(function(){
$(".testClass").each(function() {
console.log($(this).attr('data-associateid'));
});
});
View it here: http://jsfiddle.net/rt677qp5/
Using .data() is more logical in this case.
$(".btnClass").click(function() {
$(".testClass").each(function() {
alert($(this).data("associateid"));
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="notification-body" style="">
<li class="testClass" data-associateid="AA01"></li>
<li class="testClass" data-associateid="AA02"></li>
<li class="testClass" data-associateid="AA03"></li>
</ul>
<button class="btnClass"></button>
I'm trying to have items in two similar fields (language and deliverables) pre-selected.
<div class="fields-wrapper">
<div class="language-field">
<ul>
<li value="1">EN</li>
<li value="2">ES</li>
<li value="3">NL</li>
</ul>
</div>
<div class="deliverables-field">
<ul>
<li value="1">A</li>
<li value="2">B</li>
<li value="3">C</li>
</ul>
</div>
</div>
In my Javascript, I'm trying the below two ways to have the respective items selected, but to no avail.
<script type="text/javascript">
$(document).ready(function() {
$(".language-field ul li").val(["1"]).addClass('selected');
$(".deliverables-field ul li").eq(0).addClass('selected');
});
You need to use the attribute selector here. .val() is used to get/set the value of an input field.
In your case since you are dealing with li the value is an attribute of the element.
$(function(){
$('.language-field ul li[value="1"]').addClass('selected');
$(".deliverables-field ul li").eq(0).addClass('selected');
})
Demo: Fiddle