Инкрементный столбец в модели с Ajax в рубине на рельсах

Question

Я новичок в рельсах, и мне не удается увеличить целочисленный столбец (количество) для модели продаж в моем приложении rails.Пользователи могут увеличивать количество товара в приложении, используя кнопки, подобные этой:

Sales / show.html.erb

 <tbody>
 <% @ven_pros.each {|s| %>
                  <tr>

                    <td><%= link_to ' + ', "/sale_products/#{params[:id]}/increment/#{s.id};", class: "btn btn-md btn-primary" %></td>

                  </tr>

                <% } %>
 </tbody>

это мой маршрут для него

rout.rb

get   'sale_products/:id/increment/:product_id' , to: 'sale_products#increment'

и это мое действие для увеличения

sale_products_controller.rb

  def increment
@pro = SaleProduct.find(params[:product_id])
@pro.increment!(:quantity)

@pro.save!
respond_to do |format|
  format.html { redirect_to sale_url(params[:id]), notice: 'Quantity was successfully increment.' }
  format.json { head :no_content }
end
end

, который работает для меня, но это загружает страницу каждый раз, когда пользователь хочет увеличить количество

, как я не могу сделать это, используя ajax / javascript

Answer 1

Другим способом было бы сделать удаленный вызов

<%= link_to ' + ', "/sale_products/#{params[:id]}/increment/#{s.id};", class: "btn btn-md btn-primary", remote: true %>

, затем в контроллере в вашем методе приращения:

def increment
  @pro = SaleProduct.find(params[:product_id])
  @pro.increment!(:quantity)
end

создать файл дляобрабатывать jquery, и он должен иметь то же имя, что и метод.

файл будет: increment.js.erb

содержимое этого файла:

$('.quantity-updated').html('<%= @pro.quantity %>');

ивсе готово

Answer 2

Используйте параметр remote: true для link_to:

<%= link_to ' + ', "/sale_products/#{params[:id]}/increment/#{s.id};", class: "btn btn-md btn-primary", remote: true %>

Посмотрите, как это работает: https://guides.rubyonrails.org/working_with_javascript_in_rails.html#built-in-helpers

Чтобы все работало должным образом, файл application.js должен включать RailsФайл UJS.Если вы создали приложение с нуля с помощью стандартной команды rails new, оно должно быть уже там.В противном случае вы можете добавить его вручную:

//= require rails-ujs

ОБНОВЛЕНИЕ:

Если вы хотите не просто отправить AJAX-запрос, но и получить ответ от сервераи обновите некоторую часть вашей страницы, тогда написание вашего собственного обработчика JS неизбежно.Нажав на вашу ссылку, обработчик инициирует запрос, проанализирует ответ и обновит данные на странице.

Используя JQuery, это можно сделать следующим образом:

1. Добавьте к своей ссылке специальный класс для отлова кликов:

   <%= link_to ' + ', '#', data: { url: "/sale_products/#{params[:id]}/increment/#{s.id}" }, class: "btn btn-md btn-primary incrementor" %></td>
   

2. Убедитесь, что действие вашего контроллера отвечает данными, которые вы хотите отобразить на странице:

   format.json { render json: { quantity: @pro.quantity } }
   

3. Наконец, добавьте этот фрагмент кода JS в свой JS:

   $(function() {
     $(document).on('click', '.incrementor', function(e) {
       e.preventDefault();
       var $this = $(this);
       var url = $this.data('url');
   
       $.ajax({
         url: url,
         type: 'GET',
         beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))}
   
       }).done(function(data) {
         if (data.quantity) {
           $('.quantity-updated').html(data.quantity);
         }
       });
     });
   });
   

   Что делает этот код: при нажатии на ссылку с классом incrementor он выбирает URL из HTML-Атрибут data элемента url отправляет GET-запрос на этот URL-адрес, анализирует ответ и, если он имеет ключ quantity, заменяет содержимое HTML-элемента с классом quantity-updated новым количеством.(quantity-updated дан только для иллюстрации; наверняка вам нужно указать собственный метод поиска элемента для обновления.)