When I put onClick event in button element inside li element like below to make AJAX:
<ul>
<li><button value="orange" onClick="qCat(value)">Orange</button></li>
<li><button value="apple" onClick="qCat(value)">Apple</button></li>
</ul>
It works nicely.
But if I take away button to apply event directly to li element like below make AJAX:
<ul>
<li value="orange" onClick="qCat(value)">Orange</li>
<li value="apple" onClick="qCat(value)">Apple</li>
</ul>
It won't work. Anything wrong with my code? Pls advice. Thanks.
The value attribute of an li element is supposed to be a number. Furthermore it is only supported for Ordered Lists (ol).
The values can even be auto-incrementing by setting the first value to e.g. 100 and then the rest will follow.
If I test your code then the function qCat() receives a 0 (zero) parameter which is consistent with the above.
For additional info see here: https://www.w3schools.com/tags/att_li_value.asp
You just need to change the argument passed to your function (thanks to #epascarello for pointing that out). See the code below.
function qCat(val) {
console.log(val.getAttribute('value'));
}
<ul>
<li value="orange" onClick="qCat(this)">Orange</li>
<li value="apple" onClick="qCat(this)">Apple</li>
</ul>
function First(){
alert('it is the first option');
}
function Second(){
alert('it is the second option');
}
function General(){
alert('it is a shared option');
}
<ul>
<li><a href="#" onclick=First();>First option</a></li>
<li><a href="#"onclick=Second();>Second option</a></li>
<li><a href="#"onclick=General();>Third option</a></li>
<li><a href="#"onclick=General();>Forth option</a></li>
</ul>
Please have a look into this updated code.
function qCat(event){
debugger;
console.log($(event.target).attr('value'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li value="orange" onClick="qCat(event)">Orange</li>
<li value="apple" onClick="qCat(event)">Apple</li>
</ul>
The value attribute sets the value of a list item. The following list items will increment from that number.
The value must be a number and can only be used in ordered lists
In order to get the expected result use data-* (a HTML global attribute)
qCat = function(elm){
val = elm.getAttribute('data-value');
alert(val);
}
<ul>
<li data-value="orange" onClick="qCat(this)">Orange</li>
<li data-value="apple" onClick="qCat(this)">Apple</li>
</ul>
Related
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>
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 create a menu with ajax load. I have 4 zones and each zone have states. What i want is on hover on zone, i need to display all states in that zone. I write following code
HTML
<ul class="zoneLevel">
<li id="1" onmouseover="get_states_list(this.id);">East Zone
<span id="stateContainer" style="display:none;">States</span>
</li>
<li id="2">West Zone</li>
<li id="3">North Zone</li>
<li id="4">South Zone</li>
</ul>
JAVASCRIPT
<script>
function get_states_list(zone_id) {
//alert(zone_id);
var last_slug_a1 = $(".homeLeftContainer .single:last").attr("id");
$('span#stateContainer').html('<img src="img/loader.gif">');
$.post("modules/frontend/ajax/load_state.php?action=get&zone_id="+zone_id,
function(data){
if (data != "") {
$("span#stateContainer").html(data);
}
});
$(".stateContainer").css("display", "block");
$(".stateHederMenu").css("display", "block");
}
</script>
everything's good.
Problem started when i mouse hover to state (which i get with ajax file), it again call get_states_list(this.id) function. Can you please point the error.
It's because again you are hovering the li, the actual span is inside the li and hence the function is triggered again. So just use another tag maybe <a>,<p>,<span> or anything after li and close the word. so it wont trigger again unless you mouse over to the word.
<ul class="zoneLevel">
<li id="1" >
<a onmouseover="get_states_list(this.id);">East Zone</a>
<span id="stateContainer" style="display:none;">
States
</span>
</li>
<li id="2">West Zone</li>
<li id="3">North Zone</li>
<li id="4">South Zone</li>
</ul>
Example with jQuery
$('.zoneLevel li').one('mouseover',function (){
get_states_list($(this).attr('id'));
})
And fiddle for this situation fiddle
I need to get value form every list click
Here is my list:
<c:forEach items="${cmlist}" var="records">
<ol class="dd-list" id="chapterlist" >
<li id="cs" class="dd-item" data-id="1" value="${records.levelID}">
<div class="dd-handle">
Chapter: ${records.levelName}
</div>
</li>
</ol>
</c:foreach>
here is my click function code:
$(window).load(function(){
$("#chapterlist li a").on("click", function(){
level = $(this).parent('li').val();
console.log("level"+level);
});
});
Could you please help?
parent() function only goes up one level of DOM, so it gets to your <div> element and stops there. Use parents() instead.
JSFiddle
Note, that val() will only work if value is an integer. Shouldn't be a problem with an ordered list, though, where value is the number of an item.
You cannot use the value method to get the value attribute of this object.
Please, update your jsp by
<c:forEach items="${cmlist}" var="records">
<ol class="dd-list" id="chapterlist" >
<li id="cs" class="dd-item" data-id="1" data-value="${records.levelID}"><div class="dd-handle">Chapter: ${records.levelName} </div>
</li></ol></c:foreach>
And your javascript by
level = $(this).parent('li').data('value');
Fiddle to test this solution
I am facing a problem on getting the nearest parent element attribute value using Jquery. Can anyone help me on this. My element structure is as below,
<ul class="Someclass">
<li><span id=3 class="heading"></span>
<ul>
<li>
<ul> <li><span ><button onclick= "redirect()"></button></span</li>
<ul>
</li>
</ul>
</li>
<ul>
<script type="text/javascript">
function redirect() {
alert(....)
}
</script>
In the above code when i click that element having onclick event i want to get the value as 3 in alert() which is in the element having the class heading. The above code is in for loop so it will have more code like this in a same page.
Give this Try
function redirect(elem) {
alert($(elem).closest('.Someclass > li').children('span').attr('id'))
}
Change Markup to this:
<li><span><button onclick= "redirect(this)"></button></span</li>
this will reffer to the current object in DOM
By wrapping elem in $(elem) will convert it to jQuery object then you can traverse to the closest and find span
You can also filter that span with .children('span:first')
Fiddle Example
With your current code, pass the clicked element reference to the function like
<button onclick= "redirect(this)">asdf</button>
then
function redirect(el) {
alert($(el).closest('.Someclass > li').children('span').attr('id'))
}
Demo: Fiddle
Bu a more recommended way will be is to use jQuery event handlers like
<button class="redirect">asdf</button>
then
jQuery(function($){
$('.Someclass .redirect').click(function(){
alert($(this).closest('.Someclass > li').children('span').attr('id'))
})
})
Demo: Fiddle
This should do it.
alert($(this).closest('.heading').attr('id'));
$(".someclass li").click(function(){
$(this).closet('.heading').attr('id');
})
could you pass it on as a parameter to your redirect function? You'd somehow hold that value in a variable in your loop.
I got a solution if you can change the id and class to parent li
Working Demo
More about parent selector
Jquery
function redirect(elem) {
var myid = $(elem).parents(".heading").attr("id");
alert(myid);
}
HTML
<ul class="Someclass">
<li id="3" class="heading">
<ul>
<li>
<ul> <li><span ><button onclick="redirect(this)" id="haha">Go</button></span</li>
<ul>
</li>
</ul>
</li>
<ul>