Working a page of buttons which populates a textarea with the value of the buttons.
This works fine for items that are buttons, but cannot get it working for list items.
I have to use a list item since some buttons have a drop down.
jsfiddle shows the list item alerting 0 even thought it does have a value.
http://jsfiddle.net/hsw32zv8/
<li class='item_value' value='value'>
<a href='#'>Click</a>
</li>
<br><br>
<button type='button' class='btn btn-success item_value' value='value2'>Click 2</button>
jQuery:
$(".item_value").on('click',function(){
alert(this.value);
});
value is not a valid attribute for the li element (unless it's in an ol, but that seems unlikely given your issues and the fact the value of the attribute you had was a string not a number), nor does the DOMElement for that tag type have a value property.
Adding non-standard attributes to your markup will render the page invalid and may lead to JS and UI problems. If you want to create a custom attribute, use data-*:
<li class="item_value" data-value="value">
Click
</li>
$('.item_value').on('click', function(){
alert($(this).data('value')); // = 'value'
});
li element doesn't have value attribute. However if you still want to get it use attr method:
$( this ).attr( 'value' );
jsFiddle
A list item <li> haves a value but it only takes numbers (note they should be in an <ol>). You gave a string (at interpreted that as 0) so for example:
<li class='item_value' value='1010'>
Click
</li>
Will show up as a value of 1010. You can get around this by adding a data- attribute instead: data-value="someStringHere"
just modified your this.value to $(this).attr('value').
so the complete code:
$(".item_value").on('click',function(){
alert($(this).attr('value'));
});
hopefully helping
Related
I have an oracle apex page. I defined a tabscontainer region in it. There are two sub regions to this region. There is a hyper link inside each sub region, which is coded like
<a class="t-Tabs-link" href="#SR_R1" role="presentation" tabindex="-1">
<span>1</span>
</a>
in first region and
<a class="t-Tabs-link" href="#SR_R2" role="presentation" >
<span>2</span>
</a>
in second region.
I want to remove tabindex property of first region from this code using javascript and add property tabindex="-1" to second region.I can not add an id to this hyper link since oracle apex do not allow to edit default html attributes. How can I do this without assigning id ? or is there any way that I can assign id to this hyper link?
You can use document.querySelector and you don't need to know <a>'s ID.
You can remove tabindex by this.
document.querySelector('.t-Tabs-link:first-child').removeAttribute('tabindex');
You can set tabindex by this.
document.querySelector('.t-Tabs-link:last-child').setAttribute('tabindex', -1);
Use Jquery removeAttr to remove the attribute from any element.
Select the first index element and simply remove attribute from it
$(".t-Tabs-link").eq(0).removeAttr("tabindex");
You can also set attribute via Jquery attr() function
$(".t-Tabs-link").eq(1).attr("tabindex" , -1);
example
I know questions with similar titles have been asked before and I seen the answers.
I have a ul element in HTMl:
<ul class="collection with-header"></ul>
In this element li elements are added dynamically through JavaScript:
$('.collection').append('<li class="collection-item">'+'Hello'+'</li>');
Now,for each li element,I want to add a number to it's class attribute to identify every li element uniquely so that I can assign different id attributes to them.For that I wrote:
var j = 1;
$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');
$('.collection-item'+j).attr("id",list[i].username);
j++;
When I try to fetch id of li elements by hover event:
$('.collection-item').hover(
function(){
var idd = $(this).attr('id');
console.log(idd);
}
);
Undefined is printed in the console.
What is wrong in this implementation?
EDIT:
The value of list[i].username is working fine,it's value is coming from another file and it's not causing any trouble.
As far as I can see, your placement of i within that string results in i being outside the html className attribute, infact not inside any html attribute at all. Your code:
$('.collection').append('<li class="collection-item"'+j+'>'+ 'Hello'+'</li>');
would result in this final markup:
<li class = "collection-item"0>Hello</li>
<li class = "collection-item"1>Hello</li>
The zero has no HTML signficance and is out of place.
#sphinx's comment is the correct answer, but it is "not being fired" because his code results in each list item having a unique class name with its number at the end like so:
<li class = ".collection-item0">Hello</li>
<li class = ".collection-item1">Hello</li>
when you add the on hover action, you select these elements by the class ".collection-item", not a unique class.
Your solution would look like this:
$('.collection').append('<li class="collection-item '+j+'">'+ 'Hello'+'</li>');
$('.collection-item.'+j).attr("id",list[i].username);
and with this, in your final markup, each list item will have two classes - a shared "collection-item" class, and a numerical value like so:
<li class="collection-item 0"></li>
<li class="collection-item 1"></li>
now you can select each list item (in this example list item 4) by two classes with the selector $(".collection-item.4") as well as apply an action to all collection items with the selector $(".collection-item").
I find this code somewhat ugly looking and I'm not sure if I would be happy with it myself in terms of structure if it were mine, but here is a jsfiddle as a proof of concept :
https://jsfiddle.net/0wqeouxo/ (click on each list item and it will alert its id)
I think you could get more mileage out of jquery's functionality in that loop rather than defining classes inline.
Use this instead
var j = 1;
$('.collection').append('<li class="collection-item'+j+'">'+ 'Hello'+'</li>');
$('.collection-item'+j).attr("id",list[i].username);
j++;
There is a syntax error in your code, please use the above code.
For hover to work, do this
$('.collection-item'+j).hover(
function(){
var idd = $(this).attr('id');
console.log(idd);
}
);
As jQuery operates asynchronously, when you try to set the id, the element is might not be in the dom yet. You could set the id before appending the element, for example:
$('<li class="collection-item '+j+'">'+ 'Hello'+'</li>')
.attr("id",list[i].username)
.appendTo('.collection');
It a dynamically append element .so you could use on().and change the selector like this .[class^="collection-item"] It will match same class name element contain with some other name in the class
$(document).on('hover' ,'li[class^="collection-item"]',function(){
var idd = $(this).attr('id');
console.log(idd);
});
Im doing server side rendering with the help of Django. In my django templates Im looping through all the values obtained from my Database. In jquery while selecting a single value, JS gives me all the values obtained from database, but I wanted only selected values
Views.py
def theme(request):
context={}
context['All']=Theme.objects.all().count()
for t in ThemeCategory.objects.all():
context[t.categoryName]= t.theme_set.count()
context=collections.OrderedDict(sorted(context.items()))
return render(request,'theme-list.html',{'category_name':context})
In templates
<ul class="pick-tags" >
{% for category_name,count in category_name.items %}
<li id="item_cat">
<span id="item_cat_name">{{ category_name }}</span>
</li>
{% endfor %}
</ul>
In jquery Im selecting the required value
$('li#item_cat').on('click', function () {
alert($('span#item_cat_name').text())
})
But instead of giving me a single value, It me all the value obtained from DB.
How should I get only one value when click on <li>
Any help in obtaining selected value would be helpful
First of all, id of each HTML element should be unique. And you are creating multiple li and span elements with the same id. Make sure it's unique to prevent undesired bugs. it's better to use class and data attributes if needed.
Second, you need to get text of selected element, not any element, so you need to use this:
$(this).find('span').text()
In your template, you're giving every <span> element the same identifier (item_cat_name). Your second jQuery selector selects all <span> elements with that identifier.
To resolve this, change your jQuery to something like:
$('li').on('click', function () {
alert($(this).children('span').text())
});
This would only show the texts of <span> elements directly below the clicked <li> element (using $(this) is the key here).
Also, I would advise to give every <span> element an unique identifier, e.g. the primary key of the ThemeCategory; so that you can then base your further actions on that.
I have detected a problem with datepicker. I'm adding controls dinamically, and one of them is a datepicker, along side a couple of selects and a textarea.
Well, whenever i add a datepicker, lets say i have 3 datepickers, i set the date of the first, then i try to set the date of either the second or third, well, my problem is that setting the date of the second or third sets it to the first one
Refer to this fiddle to see the problem reproduced. Just add 2 or 3 datepicker clicking the add button and try to set the dates. Any idea on why is this and how can it be solved will be pretty much appreciated
That's because you are using the same ID when you clone the element, if you are using the same ID there is no way for the JavaScript to differentiate between them.
If you switch the IDs to classes it will work, see here: http://jsfiddle.net/j72UG/2/
HTML
<input type='button' value="add" id="addLi" />
<ul class="list">
<li class="dateLi">
<input type='text' class='date' />
</li>
</ul>
JS
var liClone;
$(function () {
liClone = $(".dateLi").clone(true);
$(".dateLi").remove();
$("#addLi").click(function () {
var clonado = liClone.clone(true);
clonado.appendTo(".list");
clonado.find("input").datepicker();
});
});
When you're cloning, all your elements retain the same ID. In a given DOM structure, only one (1) element can have a specific ID at any given time. So give your list items a class or an ID ending with a serial instead, in order to avoid this problem in the future.
var li = $('<li class="dateLi"><input type="text" /></li>');
See this updated jsfiddle.
that's because you have to change the id of each input and li.
try this:
jsfiddle.net/LgRR7/
I have a list here
<ul id="demo2" data-name="demo2">
<li data-value="here">here</li>
<li data-value="are">are</li>
<li data-value="some...">some</li>
<!-- notice that this tag is setting a different value :) -->
<li data-value="initial">initial</li>
<li data-value="tags">tags</li>
</ul>
Where each li item has a custom data attribute. On JQuery how would get all of the values of each li element which has an attribute of data-value? I want to get their value.
but this code of mine doesn't seem to be working
$('#view-tags').click(function(){
$('li[data-value]').each(function(){
alert($(this).data("value"));
})
});
The whole code on jsfiddle: http://jsfiddle.net/Zn3JA/
You are pretty close. You can use jQuery's .data() method to read attributes that start with data-. So in your case .data("value") since your attribute is data-value="some".
This should do it:
$('li[data-value]').each(function(){
alert($(this).data("value"));
});
Here is a working fiddle as well: http://jsfiddle.net/nuphP/
$(this).attr('data-value')
should also work.
You can use in your case:
jQuery(this).data("value");
in order to retrieve the value.
$(this) refers to the current li element hence you get the element alerted.
You can try what the others have suggested i.e $(this).data("value")
$('#view-tags').click(function(){
$('li[data-value]').each(function(){
var value = $(this).attr('data-value');
alert(value);
})
}); // this work normally
Takes the attribute value and stores the variable value
var value = $ (this) .attr ('date value');
After this warning the variable value
alert (value);