Я ищу способы обновить корзину в моем игрушечном приложении электронной коммерции без перезагрузки страницы, и я следил за ручкой это.
Например, код, который обновляет количество продукта, выглядит следующим образом:
$('.product-quantity input').change( function() {
updateQuantity(this);
});
Он работает хорошо, но база данных, конечно, не обновляется на данный момент.
Мне было интересно, как лучше всего обновить интерфейс и базу данных с количеством продуктов или аналогичными операциями? Я, вероятно, ищу AJAX, но не уверен, каковы последние передовые практики (в идеале с как можно меньшим количеством JS).



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Ваша функция 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) и обработать успешный ответ. в джс. В этом представлении у вас есть доступ ко всем переменным экземпляра, объявленным в вашем методе. Например:
# => 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.
Невозможно использовать помощники, потому что javascript выполняется на стороне клиента и на стороне сервера Ruby. Вы можете передать свой маршрут напрямую, как они описаны в маршрутах рельсов, например, если вы прикрепите идентификатор к родительскому контейнеру, вы можете построить маршрут следующим образом: ` /cart/${ e.parentNode.id } `
Спасибо, это помогает! Любая идея, как лучше всего передать идентификатор позиции в вызов ajax и использовать его в маршруте? Также есть ли способ использовать маршруты рельсов вместо подпутей URL?