i will make it simple:
I have:
<a id="edit" data-link="mylink">Edit</a>
<a id="edit" data-link="mylink2">Edit2</a>
<div id="modal">
</div>
<script>
$('#edit').click(function(){
var href = $(this).data('link');
$( "#modal" ).load( href );
});
});
</script>
It works but only with the first button,not with the first request, only first button, it could be the 10th request and only the first button loads, the other ones dont load and i checked the links and the work.
ID of an element must be unique.
ID - attribute
The id attribute specifies its element's unique identifier (ID). The
value must be unique amongst all the IDs in the element's home subtree
and must contain at least one character. The value must not contain
any space characters
Use class attribute to group similar elements
<a class="edit" data-link="mylink">Edit</a>
<a class="edit" data-link="mylink2">Edit2</a>
then use class selctor
$('.edit').click(function(){
var href = $(this).data('link');
$( "#modal" ).load( href );
});
});
When you use id-selector it will fetch the first element with the given id so your click handler gets registered only to the first link element
<a **id="edit"** data-link="mylink">Edit</a>
<a **id="edit"** data-link="mylink2">Edit2</a>
Duplicate id here. ID must be unique.
When you select using an ID selector, jQuery would return only one element because IDs must be unique on a page. Thus only one href is getting loaded. YOu must change your selector to a class Selector as follows. Note that the two links now have different IDs and have a common class. Multiple elements can have the same class and the jQuery selector will return all the elements with that particular class ("editLink" in this case)
<a id="edit1" class="editLink" data-link="mylink">Edit</a>
<a id="edit2" class="editLink" data-link="mylink2">Edit2</a>
<div id="modal">
</div>
<script>
$('.editLink').click(function(){
var href = $(this).data('link');
$("#modal").load( href );
});
});
</script>
Related
I am generating a list from a template engine (Template7) and adding a userID to the data tag in each list item. For example
<li>
<a id='user' data-user-id='5'>
<div>content here</div>
</a>
</li>
<li>
<a id='user' data-user-id='6'>
<div>content here</div>
</a>
</li>
I am trying to get the "user-id" data of the list item clicked on using jQuery, but what I seem to be doing instead is getting the user-id of the first list item - in this case always 5.
$(document).on("touchend", "#user", function(e) {
e.preventDefault();
var userItem = $("#user");
var userID = userItem.data("user-id");
console.log(matchID);
});
Where am I going wrong? A unique ID for each item would work, but then it would need to be parsed etc so there must be a better way! Is there a best practice for this kind of thing?
try replacing #user with this should work in your case
Id selector always selects first element with matching Id. it is advisable not to have multiple element with same id. try to use class name instead.
any ways for your query you can use below code.
$(document).on("touchend", "#user", function(e) {
e.preventDefault();
var userID = $(this).data("user-id");
console.log(userID);
});
Use a css class on each anchor item, like this:
<li>
<a class='user' data-user-id='5'>
<div>content here</div>
</a>
</li>
Id attributes are meant to be unique to that element.
To get the content of the attribute **data-user-id** like in <a id='user' data-user-id='5'> you have to use
$(this).attr("data-user-id") // will return the string "5"
or .data() (if you use newer jQuery >= 1.4.3)
$(this).data("user-id") // will return the number 5
I gave my link a an id where if I click the link, I want my javascript to adjust the background image. I made a js-fiddle of a simple version of what I want here:
https://jsfiddle.net/qp8d390b/
<body background="http://www.blueskiescareers.co.uk/wp-content/uploads/2014/05/blue-sky-clouds.jpg">
<li>
<a id = "attempt1" href="#top">SNOOPY1</a>
</li>
<li>
<a>SNOOPY2</a>
</li>
<li>
<a>SNOOPY2</a>
</li>
<div id= "#top">TOP PART </div>
</body>
$(document).ready(function() {
$("a[id='attempt1']").click(function(e) {
e.preventDefault();
alert('works');
document.body.background = "https://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg";
});
});
I'm new to selecting with javascript. Any help would be appreciated!
try to use $("#attempt1")
use # to get any id in html
Firstly your HTML is invalid; li must be in either a ul or ol and all a elements must have either a name or href attribute.
Secondly, jQuery uses CSS rules, so to select by id is $('#attempt1').
Lastly, to change the background CSS property to an image the URL string should be wrapped in url(). Try this:
$(document).ready(function() {
$("#attempt1").click(function(e) {
e.preventDefault();
$('body').css('background', 'url("https://upload.wikimedia.org/wikipedia/commons/0/02/Fried_egg,_sunny_side_up.jpg")');
});
});
You can select it with :
$('#attempt1')
You should use id-selector in this case
https://api.jquery.com/id-selector/
$("#attempt1")
The selector you used which is attribute selector is more used in inputs than in links (a elements)
https://api.jquery.com/attribute-equals-selector/
You can find more info on jQuery selectors in
https://api.jquery.com/category/selectors/
Hope it helps
I am pretty new in JQuery and I have the following problem. So I have a JSP page that contains this HTML code:
<!-- Bottone relativo ai progetti WIFI: -->
<a title="WIFI" href="javascript: void(0)" id="showWifi_${item.index}">
<div class="news_box news_box_01"></div>
</a>
<!-- Bottone relativo ai progetti PNSD: -->
<a title="PNSDe" href="javascript: void(0)" id="showPnsd_${item.index}">
<div class="news_box news_box_02"></div>
</a>
As you can see the id of these a tag** are something like id="showWifi_${item.index}" and id="showPnsd_${item.index}". So these id is creating retriving the item.index (a progressive int) that render uniquie id like showWifi_1, showWifi_2**, etcetc.
Now I have to use JQuery to handle the situation in which the user click on these links and into this JQuery script I have to retrieve the specific id of the specific clicked link.
So for example if the user click on the a tag having id showWifi_1 this value have to be retrieved.
If I have not this progressive value at the end of the id (the ${item.index}) I know that I can do something like this:
$(document).ready(function(){
// Select the
$("#showWifi").click(function(){
//$("p").hide();
alert("SHOW WIFI");
});
$("#showPnsd").click(function(){
//$("p").show();
aler("SHOW PNSD");
});
});
The problem is that not I can't use $("#showWifi") and $("#showPnsd") to select my a tag because the id are followed by the ${item.index}.
How can I handle this situation? Can I see something like: when the user click on an a tag having an id that begin with showWifi_ or showPnsd_ perform the script and retrieve the numeric value after the _ character?
Tnx
Try to use attribute starts with selector,
$("[id^='showWifi_']").click(function(){
and
$("[id^='showPnsd_']").click(function(){
But instead of using an attribute selector, you better set a class to those elements and bind events for it with a class selector. Class selector will be more efficient than an attribute selector.
You can use wildcard or startsWith selector:
$("[id^='showWifi_']")
$("[id^='showPnsd_']")
The above selects the id starting with showWifi_ and showPnsd_. If you wanna confine your selection to the <a> element, then you can use:
$("a[id^='showWifi_']")
$("a[id^='showPnsd_']")
Need to pass information from one class to another in a way that will validate. Current approach is a mess- works but does not validate.
I need to pass text inside a p tag to another element on the page. Right now i'm using a tag attributes to pass this info along. Super messy.
<div class="element-item">
<div class="text-panel">
<div class="text-cell">
<a class="ajax" href="ajax/bkdesks.html" id="Brooklyn Desks" dir="BROOKLYN, NY">
<p class="link"><img src="img/chainlink.png" width="60" height="60" alt="link" alt=""/></p>
<p class="name">Brooklyn Desks</p>
<p class="dir">Brooklyn, NY</p>
</a>
</div>
</div>
And then jQuery:
$('.ajax').click(function(e) {
e.preventDefault();
$('#projects-head .titlehead').text($(this).attr('id'));
$('#projects-head .subhead').text($(this).attr('dir'));
$('#project').load($(this).attr('href'));
});
titlehead and subhead are the other elements on the page whose content is being replaced. I would much rather grab the contents of the p tags below than put everything in the a id & dir. But i cant figure out the jquery to target them.
The p.name and p.dir elements are descendant elements of the clicked .ajax element so you can use .find()
$('.ajax').click(function (e) {
e.preventDefault();var $this = $(this);
$('#projects-head .titlehead').text($(this).find('.name').html());
$('#projects-head .subhead').text($(this).find('.dir').html());
$('#project').load($(this).attr('href'));
});
This question already has answers here:
How can I apply a jQuery function to all elements with the same ID?
(4 answers)
Closed 9 years ago.
I am using the "replace" function to remove all non-numeric values in a div.
It seems Jquery replace only affects the first element.
Here is my Jquery:
$('#comment').each(function() {
var thz = $(this);
var repl = thz.html(thz.html().replace(/\D+/g, ''));
});
HTML Code:
<a id="comment1" href="#"> c2fđf011. </a>
<a id="comment1" href="#"> c20ff113. </a>
<a id="comment1" href="#"> c201gf76341. </a>
Result:
2011 c20ff113. c201gf76341.
The result I want is:
2011 20113 20176341
You have duplicate ids, Which is invalid and also jQuery ID selector(or any other id selector like document.getElementById which internally jQuery uses because element with ids are indexed by most browsers and are meant to be unique) will return only the first one that appears in DOM. Change it to class and see it working:
$('.comment').each(function() {
var thz = $(this); var repl =
thz.html(thz.html().replace(/\D+/g, ''));
});
HTML
<a class="comment1" href="#"> c2fđf011. </a>
<a class="comment1" href="#">c20ff113. </a>
<a class="comment1" href="#"> c201gf76341. </a>
By the way had your id been like this:-
<a id="comment1" href="#"> c2fđf011. </a>
<a id="comment2" href="#">c20ff113. </a>
<a id="comment3" href="#"> c201gf76341. </a>
Starts with Attribute selector will help you (But slow you down literally, since this is an attribute selector and lose the advantage of using IDs).
$('[id^=comment]').each(function() { // While using this better give a container context $('[id^=comment]', 'container').each(function...
var thz = $(this);
var repl = thz.html(thz.html().replace(/\D+/g, ''));
});
Demo
Moral: IDs must be unique
ID in a HTML page is supposed to be unique
That is the reason it targets only the first instance of the element found.
Replace the elements with class instead
$('.comment').each(function() {
// Your code
});
$('.comment').each(function() { var thz = $(this); var repl = thz.html(thz.html().replace(/\D+/g, '')); });
replace ur element with id comment to a class comment.
If you use ID several times on elements the selector will only pick the first element with that ID.
But when you use class instead, the selector will pick all the element having that class.
If you really don't want to change the html you can use selector by attribute. But as others suggested, using class instead of id is the best option here.
$('div[id="comment"]').each(function(){})