Develop Reference

Getting html data from template generated list - JQuery

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

How to change the href through javascript or jquery? [duplicate]

This question already has answers here:
Find element without class or id within element - jQuery
(6 answers)
Closed 1 year ago.
<div id="div-id"><ul><li><a target="_blank" href="www.google.com">google</a> </li></ul></div>
How to change the href through javascript(not through getElementById,as it is not mentioned in html) or jquery?

$("body").ready(function() {
$("ul li a").attr("href", "http://www.stackoverflow.com/")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul> <li> <a target="_blank" href="www.google.com">google</a> </li> </ul>
This is a simple way of doing it, but right now it applies this to all Links because you have no selector(class or id)

To be more precise and make it work only for a particular anchor element
$("body").ready(function() {
$("ul >li >a:contains("google").attr("href", "http://www.stackoverflow.com/")
})

document.getElementById() is not the only way to find an element in the document. You can use fairly robust selectors with something like document.querySelector(). As an extremely simple example:
<ul>
<li>
<a target="_blank" href="www.google.com">google</a>
</li>
</ul>
<script type="text/javascript">
var element = document.querySelector('a');
element.href = 'http://example.com';
</script>
Since, in the given markup, the link being targeted is the only a element in the DOM, the simple selector 'a' will identify it. In a more complex document, you can use more complex selectors. For example:
document.querySelector('ul > li > a')
Or even:
document.querySelector('a[href="www.google.com"]')
Since you've also tagged the question with jQuery, you can use the same concept of selectors there as well. Something like:
$('a').attr('href', 'http://example.com');
or:
$('a[href="www.google.com"]').attr('href', 'http://example.com');

Using JQuery to replace text in HTML but ignoring certain HTML id's

So I'm currently using Handlebars to grab data from a JSON file to show its data on the screen. Right now it's looking similar to this:
<div class="content" id = "topic">
{{#each topics}}
<a href="{{topic}}" id = "ignore">
<h2>{{topic}}</h2>
</a>
{{/each}}
</div>
I want to replace specific characters within the word topic with another one, for example if the {{topic}} was "Hi%3F" I want to replace the "%3F" part with a '?' everywhere except the part with id="ignore". The replace function I'm using right now is:
$("#topic").html($("#topic").html().replace(/%3F/g,'?'));
this manages to replace everything so far, but I'm not sure how to get it to ignore the tags with the id="ignore". There's probably an easier way to make the link portion work like its supposed to but this is what I have gotten now and I don't want to mess around or change too much.
Thanks!

Is not legal html to duplicate Ids. Ids need to be unique. I'd suggest adding a class="unique" to your anchor tag and use
<div class="content" id = "topic">
<a href="Hi%3F" class = "topic">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic ignore">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic">
<h2>Hi%3F</h2>
</a>
<a href="Hi%3F" class = "topic ignore">
<h2>Hi%3F</h2>
</a>
</div>
<script>
$("a.topic").not(".ignore").each(function() {
$(this).html($(this).html().replace(/%3F/g,'?'));
});
</script>
http://jsbin.com/huquyufafe/edit?html,output

jquery .load() only loads the first request

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>

Method to select matching data elements using jQuery

I'm new to jQuery and have a question that goes beyond my knowledge. I have a link with a unique data-number and a div with a matching data-number. The goal is to hide all divs and when each link is clicked by the user the div would be displayed with the matching data-number.
The part that's difficult for me to figure out is how to iterate through all of the links and divs matching them up so when each link is clicked ONLY the matching div with the same data-number will be displayed.
Here is what I have so far in Coffeescript:
$('#task-item').on('click', (event) ->
n = $(#).data('number')
if (n > 0)
event.preventDefault()
$('#task-info').fadeToggle(600)
)
Sample html link:
<li id="task-item" data-number="3">
<span class="label label-purple"> Task</span>
<i class="icon-angle-right"></i>
<span class="label label-success">Open</span>
NEW SAVE METHOD FOR TASKS
..... additional HTML....
</li>
Sample div html:
<div id="task-info" data-number="3" class="span8">
..... #MORE HTML HERE ....
</div>
If there is a better way to accomplish this I'm open to any suggestions.

Firstly, I assume the li and div in your example are repeated multiple times, so you should be using a class to identify them. Secondly, you can use filter to find the element by the required data attribute. Try this:
$('.task-item').on('click', (event) ->
var $item = $(this);
$('.task-info').filter(function() {
return $(this).data('number') == $item.data('number');
}).fadeToggle(600);

Look into jQuery attribute selectors
http://api.jquery.com/attribute-equals-selector/
You should be able to select the div you want like this:
$("div[data-value='3']")

First thing I would recommend is change the li ids to class like <li class="task-item">
Then
<div class="task-info" data-number="3" class="span8">
JS
$(".task-item").click(function(e){
var itemNumber=$(this).data('number');
$('.task-info').filter(function() {
return $(this).data('number') == itemNumber
}).fadeToggle(600);
});