рельсы Crud с помощью Jquery поповер через бутстрапе

Question

Я пытался добавить Jquery поповер к рельсам по умолчанию cruds вместо redireting для взглядов и то, что я делаю это делает форму в Jquery пирог:

<%= content_tag_for :tr, @order.order_items do |i| %> 
<a class='btn btn-mini label-with-popover' id=<%=i.id%>><%= t('helpers.links.edit_html') %> </a> 
<% end %>  

<script type="text/javascript"> 
    $(function() { 
     $('.label-with-popover').popover({ 
     html : true, 
     content: "<%= escape_javascript(render :partial => 'form_item') %>" , 
     placement: 'top' 
     }); 
    }); 
    </script> 

и вот мой form_item:

<%= simple_form_for :order_item, url: admin_shop_order_path, :html => { :class => 'form-horizontal' } do |f| %> 
    <div class='form-inputs'> 
    <%= f.input :item_id , :collection => @shop.products.collect{|b| b.variants}.flatten.map{|variant| ["#{variant_full_title(variant)}", variant.id]}%> 
    <%= f.input :quantity %> 
    </div> 
    <div class="form-actions"> 
    <%= f.button :submit, :class => 'btn-primary' %> 
    <%= link_to t("helpers.links.cancel"), admin_shop_orders_path, :class => 'btn' %> 
    </div> 
<% end %> 

но проблема появляется на кнопке редактирования. для визуализации формы редактирования нам нужен объект, который мы хотим изменить (: order_item я имею в виду), и способ получить это с помощью идентификатора, и именно поэтому я установил идентификатор тега привязки. теперь мы должны получить этот идентификатор привязки внутри функции popover, но $ (this) .id не работает. любое предложение?

Answer 1

В jQuery вам нужно использовать attr ('id'), чтобы получить идентификатор элемента. Попробуйте заменить $ (это) .id с: документация

$(this).attr('id') 

знакомства JQuery для получения более подробной информации: http://api.jquery.com/attr/

Но в предпочитаемой способ достижения этой цели, как правило, использовать атрибуты данных. Это чистый способ передачи данных с вашего вида на некоторый JS-код. Ваша ссылка будет выглядеть следующим образом:

<a class='btn btn-mini label-with-popover' data-item-id=<%=i.id%>>...</a> 

И в файле JS, вы получите это значение с помощью: документация

$(this).data('item-id') 

JQuery в: http://api.jquery.com/data/

Answer 2

Вы отрисовка неправильно, я думаю, вы должны попытаться сделать частичное с местными жителями. Вы также можете передавать локальные переменные в частичные, делая их еще более мощными и гибкими.

В вашем случае, при визуализации в тег сценария вашей частичной form_item, так что вы можете написать это:

<script type="text/javascript"> 
    $(function() { 
     $('.label-with-popover').popover({ 
     html : true, 
     content: "<%= escape_javascript(render :partial => 'form_item', :locals => {order_item: @order_item}) %>" , 
     placement: 'top' 
     }); 
    }); 
    </script> 

и в вашей форме вы сможете получить к нему доступ нравится:

<%= form_for(order_item) do %> 

# write your form stuff %> 

<% end %> 

Таким образом вы можете обрабатывать форму для создания или редактирования операций.

Сначала я предлагаю вам передать идентификатор с текстом добавленным к нему (я заменил идентификатор с "link_<%= i.id%>") Второй вызов функции OnClick на вашем теге:.

<%= content_tag_for :tr, @order.order_items do |i| %> 
<a class='btn btn-mini label-with-popover' id="link_<%=i.id%>" ><%= t('helpers.links.edit_html') onclick="javascript:openPopup(this.id)" %> </a> 
<% end %> 

и последнее, но не в последнюю очередь, получить идентификатор в функции, и передать его через ваш частичный.

<script type="text/javascript"> 
    function openPopup(a_id) { 
     var id = a_id.split("link_")[1]; 
     $('.label-with-popover').popover({ 
     html : true, 
     content: "<%= escape_javascript(render :partial => 'form_item', locals => {:id => id}) %>" , 
     placement: 'top' 
     }); 
    }); 
    </script> 

Я не силен в JavaScript, но из моего ответа, вы получите то, что я хотел объяснить вам. и я уверен, что вы будете найти более совершенный способ сделать это. И если вы это сделаете, пожалуйста, отправьте его здесь. Надеюсь, это поможет. Спасибо