2016-03-25 24 views
0

Raylarım uygulamasında bazı görüntülerle ilgili bir görünümüm var.Veri özniteliğini bir düğmeden karşılık gelen modele aktarma

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

Gördüğünüz gibi her görüntü ile ilişkili iki düğmem var. İlgili modals:

<!-- 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 modal olarak en ilişkili görüntünün bir öznitelik değiştiren bir denetçi eylemine getiriyor:

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 

Bu eylem için rota:

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

Benim Sorun "Birincil Modal Yap" bölümünde bağlantı oluşturuyor. Düğmeden data-id'u nasıl alabilirim ve bunu link_to yardımcısında kullanabilir miyim?

+0

'Nasıl veri kimliğini düğmeden alıp link_to yardımcısında bunu kullanabilir miyim? bootstrap modal olayı '$ (' modalselector ')' ın yardımı ('show.bs.modal', function (e) {// yapmak istediğiniz şeyi yapın}); ' – Shehary

cevap

0

:

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

ve link_to yardımcı değişen:

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

Bir seçenek ajax kullanmak ve bu bağlantıya bir tıklama olayı bağlamak olacaktır. Bir şey gibi:

$('.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 
    }) 
}) 
0

Ayrıca gibi raylar kullanabilirsiniz: bitti bunu yaparken <%= 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 %>

İlgili konular