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.

Answer 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());
});