How to add anchor to tag in jquery

Question

$.each(obj.query, function(k,v) {
  var tbl_row = "";

  $.each(this, function(k , v) {
    tbl_row += "<td>"+v+"</td>";
  })
  tbl_row += "<td><a href='#' onclick='"+javascript:makeajaxcall(v.uID);+"'>Delete</a></td>";
  tbl_body += "<tr>"+tbl_row+"</tr>";                
})
$("#201").html(tbl_body);

I need to add a link to a tab and call a javascript function and if I just add the <a> tag it will work but when I add href="" and onclick="" it will not work. This is an AJAX call data printed in dynamic table.

Look at the code highlighting in the question. Do you see what might be the problem? — JJJ, Sep 09 '13 at 17:01
Put single quotes around # - not double quotes. They're the delimiter for the string you're constructing. — Reinstate Monica Cellio, Sep 09 '13 at 17:02
@user2422387 do you notice anything odd about the color of the text in your question? like turning from red to gray? — omma2289, Sep 09 '13 at 17:04
@koala_dev thats not me it is edited and higlight by holodoc — user2422387, Sep 09 '13 at 17:07
no, that is you, that's how your original question looked, see @chris' answer below — omma2289, Sep 09 '13 at 17:08
@user2422387 I only made a few corrections to your text and removed the redundant `CodeIgniter` tag. The code is exactly the way you wrote it. — , Sep 09 '13 at 17:09

zhumingvictor · Answer 1 · 2013-09-09T17:24:05.373

0

Best way to do this is using jquery's "on" event listener which allows bind event listener to dynamic added html elements. Here is what I suggest:

First change:

tbl_row += "<td><a href="#" onclick='"+javascript:makeajaxcall(v.uID);+"'>Delete</a></td>";

to:

tbl_row += '<td><a href="#" id="makeajaxCallTirggerId" data-ajaxParam=' + v.uID + '>Delete</a></td>';

Then in your java script do the following;

$(document).on('click', '#makeajaxCallTirggerId', function(e){
   makeajaxcall($(this).attr('data-ajaxParam'));
});

edited Sep 09 '13 at 17:24

answered Sep 09 '13 at 17:05

zhumingvictor

109
2
6

3

How did you manage to repeat the very same mistake that OP made and give an answer to, well something, in the process? – Sep 09 '13 at 17:06
@zhumingvictor copy/paste syntax error still exists in your "to" section – chris.nesbit1 Sep 09 '13 at 17:06
This is ok i am set the values in anchor tag but cannot do now because makeajaxcall is called outside – user2422387 Sep 09 '13 at 17:15
The parameter to the function can be save in the anchor dom, and then retrieved from dom. See the changes I did. – zhumingvictor Sep 09 '13 at 17:24

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

At the risk of doing the work for you...

change

tbl_row += "<td><a href="#" onclick='"+javascript:makeajaxcall(v.uID);+"'>Delete</a></td>";

to

tbl_row += "<td><a href='#' onclick='"+javascript:makeajaxcall(v.uID);+"'>Delete</a></td>";

...notice the difference in the syntax highlighting, that gives the answer away...

The problem is that you're trying to add href="" and onclick="" to a string surrounded by " ". You need to be adding href='' and onclick='' instead. see this post for a similar situation Are single quotes allowed in HTML?

EDIT If I understand correctly, the actual problem the OP is facing is that if the call to javascript:makeajaxcall(v.uID); fails, the creation of the table also fails. So what it appears that the OP actually needs is a way to gracefully continue with the creation of the table, even if an error occurs.

The best way to deal with that is to wrap the contents of the function in a try/catch. If you do that inside the makeajaxcall function, it'd be best.

The code we really need to see is the code in your makeajaxcall function, as that seems to be where the problem lies.

edited May 23 '17 at 12:20

Community

1
1

answered Sep 09 '13 at 17:05

chris.nesbit1

333
2
9

1

It's likely that the OP meant to write `onclick="makeajaxcall(v.uID);"` instead of concatenating the function's return value. – JJJ Sep 09 '13 at 17:11
1

@user2422387 "not working" has no meaning, on Stack Overflow. Are you getting an error message, or is there an error showing in the web/js console of your favorite browser? – chris.nesbit1 Sep 09 '13 at 17:14
@Juhana this could be. user2422387 could you clarify if that's the case? – chris.nesbit1 Sep 09 '13 at 17:15
hey there is no error it is not working if there is a small problem in ajax call even no error messages do you know @chris.nesbit1 – user2422387 Sep 09 '13 at 17:18

score 0 · Answer 3 · answered Sep 09 '13 at 17:06

0

This probably doesn't do what you want because of your quotes. You're not ending them when you want and the onclick function should be in HTML quotes. It should look something like this.

tbl_row += "<td><a href='#' onclick='javascript:makeajaxcall(v.uID);'>Delete</a></td>";

That's why in JavaScript and PHP I always use single quote(') and in HTML I always use double quote(").

answered Sep 09 '13 at 17:06

Gabriel Limon

1

Well that's because your onclick doesn't work. You want it to make an ajax call on the click. The link doesn't know anything about v when it's clicked. I suggest putting in some IDs but if you know this format isn't going to change you could do this `onclick='makeajaxcall(this).parent().first());'` – Gabriel Limon Sep 10 '13 at 17:13

How to add anchor to tag in jquery

3 Answers3