Dynamically appending value to a link produces wrong results

Question

I have this simple table containing user details (user id in the provided example). There's a link available for each record. This link (in real) is dynamically generated based on no.of records. each record will have a link. And upon clicking this link, that corresponding user's id has to be passed (appended) to another link (which I refer as user link in the example).

My HTML Code:

<a id="abc" href="aa/">User Link</a>
<hr>

<table border="1">
<tr>
    <td><a id="xyz" data-userid="100" href="#">first user</a></td>
    <td>100</td>
</tr>

<tr>
    <td><a id="xyz" data-userid="200" href="#">second user</a></td>
    <td>200</td>
</tr> 

<tr>
    <td><a id="xyz" data-userid="300" href="#">third user</a></td>
    <td>300</td>
</tr>     
</table>

jQuery:

$(document).on('click','#xyz',function(e){
     var uid = $(this).attr('data-userid');
     $('#abc').attr('href',$('#abc').attr('href')+uid);
});

I am appending the user id to the User Link based on the above jQuery code.

This is what I am trying to achieve:

<a id="abc" href="aa/100">User Link</a> for first user

<a id="abc" href="aa/200">User Link</a> for second user

<a id="abc" href="aa/300">User Link</a> for third user

which I get partially.

Issue:

When I click a second link after clicking a previous one, both the values are appending to the end of User Link.

For example, If I click first user initially, User Link becomes

<a id="abc" href="aa/100">User Link</a>

and then if I click second user, User Link becomes

<a id="abc" href="aa/100200">User Link</a>

and so on...which is not what I am trying to get. Where did I make mistake???

FIDDLE.

P.S: use Inspect Element from browser to see this mess in live action.

`id="xyz"`. Two or more elements cannot have same ID : Invalid HTML — Shaunak D, May 18 '15 at 09:24
Actually this User Link is in a popup modal which is used for all records. @Tushar — version 2, May 18 '15 at 09:27
U cant say Forget ID.. Modify the question and are you expecting the result to be href="aa/100/200"..? — Riddler, May 18 '15 at 09:30
What is the point of making users click 2 times ? Why don't you generate the user links with the corresponding url ? — w35l3y, May 18 '15 at 09:51
Actually this is not how it originally looks. On clicking the link from table, a modal pop-up will show & some operations there & inside that modal pop-up, there's a link to which I have to append the value. For simplicity, I made it look like this. @w35l3y — version 2, May 18 '15 at 10:00
No I am not expecting that. I have included the sample result in the question itself. @Riddler — version 2, May 18 '15 at 10:01

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

First and foremost, do not have multiple elements with the same id. See

Why is it a bad thing to have multiple HTML elements with the same id attribute?

Second, store the initial href in a var like

var initialHref = $('#abc').attr('href');

and change

$('#abc').attr('href',$('#abc').attr('href')+uid);

to

$('#abc').attr('href',initialHref+uid);

See it working here

edited May 23 '17 at 12:29

Community

1
1

answered May 18 '15 at 09:31

AmmarCSE

30,079
5
45
53

This doesn't work if link is something link gotohere.com/abc/ggg/another/ @AmmarCSE – version 2 May 18 '15 at 09:39

score 0 · Answer 2 · answered May 18 '15 at 09:34

Few issues:

Change IDs to classes in your markup class="xyz" and in the click handler .xyz
Store the initial href value to access it on subsequent clicks.

Updated Fiddle

var initHref = $('#abc').attr('href')
$(document).on('click','.xyz',function(e){
     e.preventDefault();                      // Prevent default action of `<a>`
     var uid = $(this).attr('data-userid');   //or $(this).data('userid');
     $('#abc').attr('href',initHref+uid);
});

lshettyl · Answer 3 · 2015-05-18T09:40:31.197

You may want to store the href of the user link and use it later to append the new value, like below.

P.S. please change ID xyz to class

Demo@Fiddle

$(function() {
    var userLink = $('#abc')[0];
    var linkHref = userLink.href;

    $(document).on('click','.xyz',function(e) {
        e.preventDefault(); //Cancels the default behaviour
        var uid = $(this).attr('data-userid');
        userLink.href = linkHref + uid;
    });
})

w35l3y · Answer 4 · 2015-05-18T10:22:09.243

0

The same way you used data-userid, you may use data-href in the first link to store your initial and unmodified url.

And then use something similar to:

$(function() {
    $(document).on("click", ".xyz", function (e) {
        e.preventDefault();

        var userLink = $("#abc");
        userLink.attr("href", userLink.attr("data-href") + $(this).attr("data-userid"));
    });
});

edited May 18 '15 at 10:22

answered May 18 '15 at 10:08

w35l3y

8,613
3
39
51

Dynamically appending value to a link produces wrong results

4 Answers4