边栏提交按钮和模态视图

Question

对不起，如果是菜鸟问题，已经在这里 100 次了。我有一个文章列表，上面是"购物车"按钮。我读了很多关于模态视图和轨道的信息，但它们都是link_to的，怎么做，如果我按下我的按钮，它会向我显示一个带有购物车的模态窗口？这是我代码的一部分，带有按钮（它没有form_tag等，它在：

- @articles.each do |art|
  = button_to 'В корзину', line_items_path(ART_ID: art), :id => "to-cart"

我希望，如果我单击它，控制器方法会执行 do 的操作，但它不会重定向到任何地方，我仍然必须在同一页面上，并且模态视图（使用 html 和 jquery）必须与我的购物车一起出现部分：

-unless cart.line_items.empty?
  %table.zebra
    %tr
      %th Наименование
      %th Артикул
      %th Производитель
      %th Количество 
      %th Сумма
    = render(cart.line_items)
  %p
    Общая сумма
    = cart.total_price
  %p
    Наименований (количество):
    = cart.total_count
  = button_to 'Очистить корзину', cart, method: :delete, confirm: 'Вы уверены?'
  -if current_user
    = button_to "Оформить заказ", new_order_path, method: :get
  -else
    %p
      Пожалуйста, для оформления заказа войдите в систему:
      %a#cartlogin{:href => "#"} Логин
    %p
      Если у вас нет аккаунта, зарегистрируйтесь:
      = link_to "Регистрация", new_user_path 
-else
  Увы, ваша корзина пуста

Answer 1

你想要的事情可以通过jQuery/JavaScript来完成。如果你正在寻找好看的模态，我建议你查看jQuery UI对话框。

应首先将事件处理程序附加到链接，如下所示。然后通过添加 event.preventDefault（） 行来禁用默认操作（可能是重定向）。然后，您可以使用 ajax（可能采用 JSON 格式）请求视图数据，并显示包含数据的模式。

$("#link").click(function(event) {
  event.preventDefault();
  //do an ajax call here and show modal
});

我建议您查看以下链接：

http://api.jquery.com/click/

http://api.jquery.com/event.preventDefault/

http://api.jquery.com/load/

..或者你可以看看这个插件，我自己还没有尝试过，但它看起来非常易于使用。

https://github.com/kylefox/jquery-modal