CODEWITHSUNDEEP
javascriptajax
KirstenKali
KirstenKali

Reputation: 453

Adding a href to an Ajax generated table in html

I have implemented this with thymeleaf before and have struggled to implement it with javascript and Ajax get request.

Basically the table is generated and in my html script the Ajax get request gets and displays a list of teams into this table, is there a way to include a href or even a button after each row that passes the teams Id to my controller upon clicking the link?

Here is my controller:

$(document).ready(function() {

        // DO GET
        $.ajax({
            type : "GET",
            url : "/all",
            success: function(result){
                $.each(result, function(i, team){

                    var customerRow = ' <tr>' +
                                        '<td>' + team.id + '</td>' +
                                        '<td>' + team.teamName.toUpperCase() + '</td>' +
                                        '<td>' + team.teamAddress + '</td>' +
                                        '<td>' + team.level + '</td>' +
                                        '<td>' + '<a href="@{/viewteam/{id}(id={team.id})}">' + View Team + '</a></td>' +
                                      '</tr>';

                    $('#customerTable tbody').append(customerRow);

                });

                $( "#customerTable tbody tr:odd" ).addClass("info");
                $( "#customerTable tbody tr:even" ).addClass("success");
            },
            error : function(e) {
                alert("ERROR: ", e);
                console.log("ERROR: ", e);
            }
        });

        // do Filter on View
        $("#inputFilter").on("keyup", function() {
            var inputValue = $(this).val().toLowerCase();
            $("#customerTable tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(inputValue) > -1)
            });
        });
    })

You can see my attempt to implement it at the 5th <td> tag.

This will be the controller I am passing the id variable to, just incase.

  @RequestMapping(value="/viewteam/{id}", method=RequestMethod.GET)
   public String ViewTeam(Model model, @PathVariable Long id) {



       Team team = teamRepository.findOne(id);

    //the code below should ideally return all the players associated with the above team id in an array list, this array list will be passed via thymeleaf to display all players


       model.addAttribute("team", team);


       return "singleteam";
   }

Upvotes: 3

Views: 2042

Answers (1)

Phillip Thomas
Phillip Thomas

Reputation: 1469

Looks like you may be over complicating this using the inline .Net syntax. Considering you already have the data back from the ajax you should be able to set the string (like @Musa mentioned) like this:

'<td><a href="/viewteam/"' + team.id + '">View Team</a></td>' +

Just as a robust example:

var team = {
  id: 1,
  teamName: "Capitals",
  teamAddress: "Capital One Arena",
  level: 9001,
};
var customerRow = ' <tr>' +
      '<td>' + team.id + '</td>' +
      '<td>' + team.teamName.toUpperCase() + '</td>' +
      '<td>' + team.teamAddress + '</td>' +
      '<td>' + team.level + '</td>' +
      '<td>' + '<a href="/viewteam/' + team.id + '">View Team</a></td>' +
    '</tr>';

$('#customerTable tbody').append(customerRow);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="customerTable">
  <tbody>
  </tbody>
</table>

Upvotes: 1

Related Questions