Rails rendering locals to partials in a loop and accessing them

Question

Hi I want to make a game application where users can participate in games and can create teams. Here is my code in games_controller.rb

def team_events
  @doubles = Game.where(game_type: Game::DOUBLES)
  @mixed_doubles = Game.where(game_type: Game::MIXED_DOUBLES)
  @others = Game.where(game_type: Game::OTHERS)
end

Code in my team_events.html.erb:

<div class = "container-fluid">
  <div class = "row">
    <%= render partial: "shared/table", locals: {doubles_games: @doubles} %>
  </div>
</div>

In the below partial I show a link "Create team" beside every game. When a user clicks it a modal dialog opens up which contains the form to create the team.

Code in _table.html.erb partial

<table class = "table table-hover">

  <thead>
    <tr>
      <th> Game </th>
      <th> Game Type </th>
      <th> Actions </th>
   </tr>
  </thead>

  <tbody>
    <% doubles_games.each do |game| %>
      <tr>
        <td><%= game.name %></td>
        <td><%= game.game_type %></td>
        <td>
          <a href="#" type="button" data-toggle="modal" data-target="#myModal">
          Create Team
          </a>
        </td>
      </tr>
    <% end %>
  </tbody>

</table>

bootstrap modal window

<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class= "modal-content">

      <div class="modal-body">
        <%= render partial: 'teams/form', locals: {game: game} %>
      </div>

    </div>
  </div>
</div>

Code in _form.html.erb

<%= simple_form_for Team.new, url: teams_path(game_id: game.id), method: :post do |f| %>
  <%= f.input :game_name, label: "Game", input_html: {value: "#{game.name}"}, disabled: true %>
  <%= f.input :game_type, label: "Type", input_html: {value: "#{game.game_type}"}, disabled: true %>
  <%= f.input :name, autofocus: true, required: false, hint: "Name your team" %>
  <%= f.input :members, as: :text, required: true, hint: "Enter the names seperated by comma" %>
  <%= f.submit "Create", class: "btn btn-success" %>
<% end %>

When a user clicks the "create team" link beside the game, the modal window opens and the form to create the team appears. Also in the modal window the game for which the user creates the team also appear(check disabled: true option in _form.html.erb). So When I click on Create team of table tennis. the following window appears

Here the problem is for any game the user clicks on the create team link, it shows the same game. So if I click create team for badminton or carrom. In window it is showing table tennis only Please let me know if you need more details

Answer 1

On the following line, you are using two colons, instead of one:

<%= render partial: "shared/table", locals: {:doubles_games: @doubles} %>

Correct code should be following:

<%= render partial: "shared/table", locals: { doubles_games: @doubles } %>

Answer 2

You have id 'myModal' and data-target="#myModal" for all the games. So it is opening the first modal with id 'myModal'. Id must be unique in a document. So try to use different ID for each modal to fix this issue.

You are having many forms (inside loop), so you can trigger a modal from javascript and pass the game type or id to avoid the more html content.