Как обновить как адаптивный интерфейс, так и базу данных? - PullRequest
Новая
       3

Как обновить как адаптивный интерфейс, так и базу данных?

0 голосов
/ 07 апреля 2019

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

Например, код, который обновляет количество товара, следующий: 

$('.product-quantity input').change( function() {
  updateQuantity(this);
});

Работает хорошо, но база данных не обновляется, конечно.

Мне было интересно, как лучше всего обновить как интерфейс, так и базу данных количествами продуктов или аналогичными операциями? Я, вероятно, ищу AJAX, но не уверен, какие последние передовые практики (в идеале с как можно меньшим количеством JS).

1 Ответ

1 голос
/ 07 апреля 2019

Ваша updateQuantity() функция должна выполнить ajax-вызов метода в вашем контроллере, который обрабатывает изменения в базе данных и отвечает либо на json, либо на js, чтобы манипулировать dom.

function updateCart(e){
  $.ajax({
    type: "patch",
    url: 'your_route_to_method', //point to the route that updates the item
    data: {
      your_resource_scope: { quantity: e.value } //sanitize input in strong params
    },
    success: function (response) {
      //response is the json you get back from your controller
      //handle the logic of whatever happens in the dom after you update the quantity
    }
  });
}

Я бы предложил прикрепить идентификатор продукта, который вы хотите обновить, к родительскому элементу ввода, чтобы вы могли передать его на свой маршрут и не забудьте передать значение в требуемой области, чтобы вы могли санироватьвведите в ваш контроллер через strong_params.

В вашем контроллере: 

def update
  respond_to do |format|
  if @your_resource.update(your_resource_params)
    format.json { render json: { key: value } } #build the json you want to return
  else
    #handle failiure
  end
end

Если вы решите отвечать в js вместо json, вам нужно создать представление с тем же именем, что и ваш методс расширением .js или .js.erb (вместо .html / .html.erb) и обработайте успешный ответ в js.В этом представлении у вас есть доступ ко всем переменным экземпляра, объявленным в вашем методе.Например: 

# => update.js.erb or your_custom_method_name.js.erb
$('#resource_#{ @your_resource.id }_price').replaceWith('<p>#{ @your_resource.quantity * @your_resource.price }</p>');

Если вы идете по этому маршруту, не забудьте удалить часть success вашего вызова ajax.

...