Rails submit button and modal view

Question

Sorry, if it is noob-question, which was here for 100-times. I have a list of articles, on which is button 'to cart'. I read a lot about modal view and rails, but all of them are for link_to, how to do that, if i press on my button, it's show me a modal window with my shopping cart? Here is part of my code, with button (it is free of form_tag etc, it is in:

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

I want, that if i click on it, controller method do what in do, but it doesn't redirect anywhere, i still must be on the same page, and modal view (using html and jquery) must appear with my shopping cart partial:

-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
  Увы, ваша корзина пуста

gerky · Answer 1 · 2012-08-13T18:06:50.563

0

The things you want can be done through jQuery/JavaScript. If you're looking for good looking modals, I suggest you checkout jQuery UI dialog.

You should first attach an event handler to the link, like so. Then disable the default action (which may be a redirect) by adding the event.preventDefault() line. Then you can request for the view data using ajax (probably in JSON format) and show the modal with the data.

$("#link").click(function(event) {
  event.preventDefault();

  //do an ajax call here and show modal
});

I suggest you check out these links:

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

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

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

..or you can check out this plugin, I haven't tried it myself but it looks really easy to use.

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

edited Aug 13 '12 at 18:06

answered Aug 13 '12 at 17:58

gerky

6,267
11
55
82

I done this by simple jquery, but i wanna do this in rails way. Becouse on my modal i want to render partial. How do this in only simple jquery? – byCoder Aug 13 '12 at 18:09
In order to render a partial in jQuery, you'll have to render the partial in your controller. I suggest you check out http://stackoverflow.com/questions/2229811/load-partial-with-jquery-and-rails, specifically the 3rd answer. – gerky Aug 13 '12 at 18:23

Rails submit button and modal view

1 Answers1