CODEWITHSUNDEEP
ruby-on-railstwitter-bootstraplink-to
Alice clv
Alice clv

Reputation: 11

link_to ruby rails modal bootstrap

I'm building my index html page and I'd like to have for each of my elements (in this case, restaurants) one modal appearing with more restaurant details.

Here is my code :

<div class="container text-centered">
  <h1>Welcome to La Cuillère</h1>
   <h2>Restaurants you can go to</h2>

 <ul>
   <% @restaurants.each do |r| %>
     <li>
       <%= link_to r.name, {"data-toggle" => "modal", "data-target" => "#restaurant_modal_#{r.id}"} %>
       <%= render "restaurant_modal", restaurant: r %>
     </li>
   <% end %>
 </ul>
  <%= link_to 'Add a new restaurant', new_restaurant_path, class: 'btn btn-danger' %>
</div>

And then there is a partial (restaurant_modal.htlm.erb) with the code of my modal inside:

<div class="modal fade" id="restaurant_modal_<%= restaurant.id %>">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Could you please help me and tell me what's wrong in this code.

Upvotes: 0

Views: 1127

Answers (2)

betomoretti
betomoretti

Reputation: 2196

the link must not have href. Try using remote: true or remove the link href.

Read this for remote option: Javascript with rails

Upvotes: -1

user997786
user997786

Reputation: 

<%= link_to r.name, "#", "data-toggle" => "modal", "data-target" => "#restaurant_modal_#{r.id}" %>

Upvotes: 0

Related Questions