Wie man Datenattribute von einer Schaltfläche an das entsprechende Modal übergibt

Question

In meiner Rails App habe ich eine Ansicht mit einigen Bildern.

<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 %> 

Wie Sie sehen können, habe ich zwei Schaltflächen mit jedem Bild zugeordnet. Die entsprechenden Modalverben:

<!-- 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> 

Die make_primary_path bringt uns zu einer Controller-Aktion, die ein Attribut des modalen des zugehörigen Bild ändert:

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 

Die Route für diese Aktion:

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

Meine Problem erzeugt den Link in "Make Primary Modal". Wie bekomme ich die data-id von der Schaltfläche und verwenden Sie diese in der link_to Helfer?

Answer 1

ich am Ende tun dies:

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

und Ändern der link_to Helfer:

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

Answer 2

Eine Option wäre, Ajax zu verwenden und es an ein Klickereignis für diesen Link zu binden. Etwas wie:

$('.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 3

Sie können auch Schienen wie verwenden: <%= 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 %>