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

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

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

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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
82
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваша функция 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.

Спасибо, это помогает! Любая идея, как лучше всего передать идентификатор позиции в вызов ajax и использовать его в маршруте? Также есть ли способ использовать маршруты рельсов вместо подпутей URL?

Michael 07.04.2019 18:48

Невозможно использовать помощники, потому что javascript выполняется на стороне клиента и на стороне сервера Ruby. Вы можете передать свой маршрут напрямую, как они описаны в маршрутах рельсов, например, если вы прикрепите идентификатор к родительскому контейнеру, вы можете построить маршрут следующим образом: ` /cart/${ e.parentNode.id } `

Giorgio Zanni 07.04.2019 22:30

Другие вопросы по теме