如何将数据属性从按钮传递到它对应的模态

Question

在我的 rails 应用程序中，我有一个包含一些图像的视图。

<div class="item-images">
  <div class="row">

    <% @user_item.user_item_images.each_with_index do |image, index| %>
      <% if (index + 1) % 5 == 0 %>
        </div><div class="row">
      <% end %>
      <div class="image-container">
        <a class="fancybox" rel="group" href="<%= image.picture.large.url %>"><img class="img-thumbnail img-circle" src="<%= image.picture.thumb.url %>" alt="" /></a>

        <% if @user.eql?(current_user) && @user_item.primary_image_id != image.id %>
          <button class="btn btn-xs btn-danger delete-image" data-id="<%= image.id %>" data-toggle="modal" data-target="#delete-image-modal">
            <i class="fa fa-trash-o fa-lg"></i>
          </button>
          <% if @user_item.primary_image_id != image.id %>
            <button class="btn btn-xs btn-info make-primary" data-id="<%= image.id %>" data-toggle="modal" data-target="#make-primary-modal">
              <i class="fa fa-thumb-tack fa-lg"></i>
            </button>
          <% end %>
        <% end %>


      </div>
    <% end %>

如您所见，我有两个按钮与每个图像相关联。对应的模态：

<!-- Delete Image Modal -->
<div id="delete-image-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="delete-image" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="delete-image">Are you sure you want to delete this image?</h4>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <%= link_to 'Delete', '', method: :delete, :class => 'btn btn-danger' %>
      </div>
    </div>
  </div>
</div>

<!-- Make Primary Modal -->
<div id="make-primary-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="make-primary" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 id="make-primary">Are you sure you want to make this the primary image for your item?</h4>
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <%= link_to 'Make Primary', make_primary_path(????), :class => 'btn btn-info' %>
      </div>
    </div>
  </div>
</div>

make_primary_path 将我们带到控制器操作，该操作更改模态关联图像的属性：

  def make_primary
    @user_item = UserItemImage.find(params[:user_item_image_id]).user_item
    @user_item.update_attributes(primary_image_id: params[:id])
    flash[:notice] = "primary image set"
    redirect_to :back
  end

这个动作的路线：

get 'user_item_images/:user_item_image_id/make_primary', to: 'user_item_images#make_primary', as: :make_primary

我的问题是在 "Make Primary Modal" 中生成 link。如何从按钮中获取 data-id 并在 link_to 助手中使用它？

Answer 1

一种选择是使用 ajax 并将其绑定到 link 的点击事件。类似于：

$('.btn-info').on('click', function(e){
  e.preventDefault()
  var imageId = $('make-primary').data('id');
  $.ajax({
    type: 'GET', // either
    url: '/user_items/make_primary',
    data: {
      image_id: imageId
    }
  }).done(function(ajax_success){
     // use jquery to update whatever you need to on the page
     // close modal
  })
})

Answer 2

您还可以使用 rails，例如： <%= button_to '>Are you sure you want to make this the primary image for your item?', make_primary_path(image_id: image.id), :remote=>true, :method=>:post %>

Answer 3

我最终这样做了：

  $('.make-primary').on('click', function() {
    $('#make-primary-modal').find('a').attr('href', '/user_item_images/' + $(this).data('id') + '/make_primary');
  });

并更改 link_to 助手：

<%= link_to 'Make Primary', '', method: :post, :class => 'btn btn-info' %>

如何将数据属性从按钮传递到它对应的模态

How to pass data-attribute from a button to it's corresponding modal

ruby-on-rails

twitter-bootstrap

bootstrap-modal