CODEWITHSUNDEEP
javascriptjqueryruby-on-railstwitter-bootstrap
AfDev
AfDev

Reputation: 1242

rails bootstrap modal partial

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'

Upvotes: 1

Views: 831

Answers (1)

Uzbekjon
Uzbekjon

Reputation: 11813

You are using a CSS id for your modal with '#dialog' selector. Your CSS ids 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.

Upvotes: 2

Related Questions