How do i differentiate auto generated links with JavaScript?

Question

(Hi Dr.Nick)

I am pretty new to JavaScript and still i'm trying to build a website with asp.net EF JavaScript and so on...

I have genereated links from the information I have in my database and I want the name of that link to appear in my textbox but as you can see from this picture, no matter what link I press I will get entity... (if i press alfk i get entity).

My links get generated like this (for each entry in database):

<span>
  <a id="myLink" title="tagLink" value = @i.ID
    href="PleaseEnableJavascript.html" onclick="MyFunction();return false;">@i.Name</a>
</span>

and my JavaScript looks like this:

$( '#myLink' ).click(function () { MyFunction(); return false; });
function MyFunction() {
    document.getElementById( 'textTemp' ).value += document.getElementById( 'myLink' ).text + " ";
}

We can all see the problem... All my links have the same ID thus javascript will take the first one... But how do I solve this problem?

Vanojx1 · Answer 1 · 2015-07-31T08:03:34.150

3

Don't use id to catch dynamic content, use a class like this:

<span>
  <a class="myLinks" title="tagLink" value=@i.ID
    href="PleaseEnableJavascript.html" >@i.Name</a>
</span>

manage the click event inside the js or on your html, never both. Then to select the specific clicked element use $(this)

$('.myLinks').click(function (e) {
     e.preventDefault();
     document.getElementById('textTemp').value += $(this).text() + " ";
});

edited Jul 31 '15 at 08:03

answered Jul 31 '15 at 07:50

Vanojx1

5,574
2
23
37

The problem here is that the site wants to submit and i just want the text into my text box. – strscrm Jul 31 '15 at 07:57

score 2 · Accepted Answer · edited May 23 '17 at 11:45

You specify the onclick event twice. Once here: onclick="MyFunction();return false;" and once with jQuery here: $('#myLink').click(function () { MyFunction(); return false; }); You should only use one of these and I would recommend to use the latter.

You should always give your elements unique ID's. myLink is obviously not unique. Fortunately you have something unique right next to it: @i.ID. Why not combine these values so you get myLink1, myLink2, myLink3, etc.

Changing these ID's would break the jQuery selector $('#myLink'). Best would be to add a class to your a-tags and use that as the selector.

Finally you want your function to know what value to retrieve. You can do this by reading the event data that gets passed to your click event. Here's an answer that shows just how to do that: Getting the ID of the element that fired an event

I used that sulotion but I get into an error that states: The resource you are looking for has been removed, had its name changed, or is temporarily unavailable. But I can still see that it has added the right names before. — strscrm, Jul 31 '15 at 08:06
Nvm! Got it! Theeenks, I forgot return false in the end. Im gonna edit my answer with the right way! — strscrm, Jul 31 '15 at 08:09

strscrm · Answer 3 · 2015-08-04T06:45:07.707

1

Solved it!

Here's a solution.

<a id="myLink @i.ID" title="tagLink" value=@i.ID href="Index.html" >@i.Name</a>

And the JavaScript:

$(document).ready(function () {
        $(".someIdentifier .a").click(function (event) {
            document.getElementById('textTemp').value += $(this).text() + " ";
            return false;
        });
    });

edited Aug 04 '15 at 06:45

answered Jul 31 '15 at 07:52

strscrm

69
8

This will break all other links you add to the page. – nickles80 Jul 31 '15 at 23:07
Yes i noticed that so I added more identifiers inside $("a").click(function (event) so it looks more like $(".specialIdentifier .a").click(function (event) – strscrm Aug 03 '15 at 07:00

How do i differentiate auto generated links with JavaScript?

3 Answers3