rails bootstrap modal partial

Question

Using Rails 4.2.6, Bootstrap-saas 3.2.0 I have a collection of products which i'm rendering in my index view like this. Using bootstrap gridsystem

.row
  =render partial: 'product', collection: @products

The product partial

   .col-sm-6.col-md-4
    .thumbnail
    %h2 My Box
    %ul
      %li=product.name
      %li=product.brand
      %li=product.model
      %li="$#{product_price(product.price)}"
      =link_to 'more info', '#dialog', 'data-toggle' => 'modal'

I want to display a modal for each rendered product with product.description,product.name displayed in the modal. The problem I'm having is, the modal is only loading with the first product information only. It's supposed to show product information for each product. my modal html markup

    #dialog.modal.fade{'aria-hidden' => 'true', 'aria-labelledby' =>         'myModalLabel', 'data-backdrop' => 'static', 'data-keyboard' => 'true', :role => 'dialog', :tabindex => '-1'}
  .modal-dialog
    .modal-content
      .modal-header
        %button.close{'aria-label' => 'Close', 'data-dismiss' => 'modal', :type => 'button'}
          %span{'aria-hidden' => 'true'} ×
        %h3.modal-title=product.name
      .modal-body
        %h2=product.desc
      .modal-footer
        =button_tag 'close', 'data-dismiss' => 'modal'

Answer 1

You are using a CSS id for your modal with '#dialog' selector. Your CSS id s must be unique on your page.

So, you would have to add a unique identifier for your modal boxes. For example adding a product.id to its id :

=link_to 'more info', "#dialog-#{product.id}", 'data-toggle' => 'modal'

and in your modal partial:

.modal.fade{id="dialog-#{product.id}", 'aria-hidden' => 'true', 'aria-labelledby' => 'myModalLabel', 'data-backdrop' => 'static', 'data-keyboard' => 'true', :role => 'dialog', :tabindex => '-1'}
  .modal-dialog
    .modal-content
      -# etc.