jquery: populate textbox with value of hyperlink

Question

I have some javascript on a view that makes an ajax call to my controller. I'm looping through the data and i'm building a table. What I need to do is for each item in the table, make it a hyperlink, and then when the user clicks on any of the links, i want to populate a textbox with the value of the link.

So far, my code to loop through the json data and build my table works. Here's a snippet of the code:

            htmlstring = htmlstring + "<th>VlanId</th><th>Name</th>";
    for(i = 0; i < returnDataFromController.length; i++) {
        //alert(returnDataFromController[i].VlanId);
        htmlstring = htmlstring +  "<tr><td><a href=''>"+returnDataFromController[i].VlanId+"</a></td><td>"+ returnDataFromController[i].Name+"</td></tr>";          
    }
    submitFormHTML = "<input type='text' id='newVlanID' style='width:5em;height:1.5em'/>&nbsp;&nbsp;<button class='btn' id='saveVlan' style='width:10em;height:2em'>Reassign Vlan</button>";
    $('#clientajaxcontainer').html(htmlstring);
    $('#newvlanform').html(submitFormHTML);

In order to accomplish what I want to do, do I need to give each tag a unique name or can i just assign it to a class? It'd be nice if I could assign every a tag a certain class - eg) classX... and then write a jquery handler for click event of tags of type classX. Is this possible? Thanks for taking the time to read this post.

Edit:

I am using jquery version 1.8. In addition the code above, I've added some more javascript to try to autopopulate the textbox based on a click event:

 $('clientajaxcontainer').on("click", "td:first-child a", function(ev) {
  ev.preventDefault();
  $('#newVlanID').val($(this).text());
  });

If I understand correctly, the ev.preventDefault() should stop the browser from redirecting me to another page. But that doesn't seem to be working. When I click on any of the hyperlinks, it reloads the current page.

'when the user clicks on any of the links, i want to populate a textbox with the value of the link.' - Can you explain this a little further? You are loading a table from an ajax call, and you want to make the content of each table cell a link. Then when a user clicks the link, it will load data into a separate textbox. Where does the data from the click come from? — AndrewR, Sep 05 '12 at 19:08
@AndrewR. Check out the example from Andreas posted below. That's exactly what I'm trying to do. I just can't get mine working... But I think it'll clarify what I'm after. — dot, Sep 05 '12 at 19:41

Andreas · Accepted Answer · 2012-09-05T19:41:28.167

1

Use the delegate version of .on() and add a click handler to your ajax container.

$("#clientajaxcontainer").on("click", "td:first-child a", function(ev) {
    ev.preventDefault();

    $("#newVlanID").val($(this).text());
});

Example from another question but it is really close to this solution just without the link tag :)

Edit
For jQuery versions below 1.7 you can use .delegate() instead

$("#clientajaxcontainer").delegate("td:first-child a", "click", function(ev) {
    ev.preventDefault();

    $("#newVlanID").val($(this).text());
});

edited Sep 05 '12 at 19:41

answered Sep 05 '12 at 19:15

Andreas

21,535
7
47
56

thanks for that. I'm getting an error though that #clientajaxcontainer is not a function. I've added your snippet of code after my #availVLANS.click logic. – dot Sep 05 '12 at 19:30
The full error message is: [15:28:10.086] TypeError: $("#clientajaxcontainer").on is not a function @ http://mysite/myapp/index.php/mycontroller/method. I'll take a closer look at the code example you posted to see if I can figure it out. – dot Sep 05 '12 at 19:33
@dot Looks like you're using an older version of jQuery (below 1.7). I've edited my answer accordingly – Andreas Sep 05 '12 at 19:42
I will try to get the latest version and use your original snippet. Probably a good idea to get the newest version anyways! Thanks again. – dot Sep 06 '12 at 13:18
I've upgraded to jquery 1.8 - using the min version. But it's still not happy with me. NO errors. But it just reloads the current page instead of populating the textbox. I'm going to update my post to show you the latest code. – dot Sep 06 '12 at 13:29
The .delegate method does work BTW. Should I be worried that the .on is not? – dot Sep 06 '12 at 13:34
just sticking with the .delegate method. Thanks a lot @Andreas! – dot Sep 06 '12 at 13:56
They should do the same... But without any code I can only guess :-) – Andreas Sep 06 '12 at 17:08

score 0 · Answer 2 · answered Sep 05 '12 at 19:14

I wouldn't create the links as an HTML string but create them as jQuery elements, so you can assign a click listener to them:

var link = $("<a href=#>"+ yourVar +"</a>");
link.click(function(){
  alert("Do something with "+ $(this).html());
  return false;
});
$(yourDomElement).append(link);

jquery: populate textbox with value of hyperlink

2 Answers2

Linked