CODEWITHSUNDEEP
javascriptjqueryparametersplayframeworkplayframework-2.1
Jack Holmes
Jack Holmes

Reputation: 99

Get parameter of template in Play Framework

I have a template with parameter like this :

@(people: List[models.Person])
<html>
<head>      
</head>
<body>
<table class="centered" id="table_people">
 <thead>
   <tr class="table_header">
        <th></th>
        <th class="people_column">Name</th>
        <th class="people_column">Active</th> 
    </tr>
 </thead>
 <tbody>     
    @for(p <- people) {
     <tr>
        <td><button id="timesheet_view_" >View</button</td>
        <td><b>@p.getName()</b></td>
        <td>@p.isActive()</td>          
    </tr>           
   }
</tbody>
</table>

That code shows a list of people. And now, i wanna when click on button view, it shows information of people. To do that, i have to write something like that:

    <script>
    $( "#timesheet_view_<%= people[i].id %>" )
      .button()
      .click(function() {
         people = '<%= people[i].name %>';
         showTimeSheet('current', '<%= people[i].name    %>');              
            })
   </script>

But i can't find how to get value people parameter of template in Javascript. I try to use @ character, but it doesn't work.

Upvotes: 0

Views: 1372

Answers (2)

gfjr
gfjr

Reputation: 1388

First, you have to fix your HTML code: <td><button id="timesheet_view_" >View</button</td>:
close the button element correctly: </button with a '>'.

Second, you have to give every button a unique ID:

Your code:

@for(p <- people) {
  <tr>
    <td><button id="timesheet_view_" >View</button</td>
    <td><b>@p.getName()</b></td>
    <td>@p.isActive()</td>          
  </tr>           
}

Try it with: 

@for(p <- people) {
  <tr>
    <td><button id="[email protected]">View</button></td>
    <td><b>@p.getName()</b></td>
    <td>@p.isActive()</td>          
  </tr>           
}

<script>
  $(document).ready(function() {
    // There are better ways to do this, but it's just for your example
    @for(p <- people) {
      $("#[email protected]").click(function(e) {
        ... // your javascript code here
      });
    }
  });
</script>

In my opinion it's better to use a link here (instead of a button), because for every button you need to code extra javascript for the onclick event. Try it with a link and Play! will do the work for you:

@for(p <- people) {
  <tr>
    <td><a class="btn" href="@routes.Application.view(p.id)">View</a></td>
    <td><b>@p.getName()</b></td>
    <td>@p.isActive()</td>          
  </tr>           
}

Btw, if you use Twitter Bootstrap you can use class="btn" and your link looks like a button.

Start your Play! application and have a look in the HTML source code. You will see your code <button id="[email protected]">View</button> will looks like this:

<button id="timesheet_view_1">View</button>

<button id="timesheet_view_2">View</button>

...

<button id="timesheet_view_9">View</button>

Hope this helps.

Best regards, gfjr

Upvotes: 1

maba
maba

Reputation: 48075

You can't do it that way. Javascript is running client-side whereas Play is running server-side.

At the time your Javascript is running, the page has already been rendered and Play has done it's part.

What you can do is to capture relevant data from people and put it in data attributes.

<tbody>     
  @for(p <- people) {
    <tr data-people-id="@p.getId()" data-people-name="@p.getName()">
      <td><button class="timesheet_view" >View</button</td>
      <td><b>@p.getName()</b></td>
      <td>@p.isActive()</td>          
    </tr>           
  }
</tbody>

And in your script you can get the data attributes.

<script>
  $( ".timesheet_view" )
    .button()
    .click(function() {
      var row = $(this).closest("tr");
      var peopleId = row.data("peopleId");
      var peopleName = row.data("peopleName");
      // Do whatever you want with this data...
      // Not sure how the showTimeSheet is working so leave it up to you
      //showTimeSheet('current', '<%= people[i].name    %>');              
  });
</script>

Upvotes: 0

Related Questions