如何同时更新响应式前端和数据库？

Question

I am looking for ways to update the cart in my toy e-commerce application without having to reload the page and I was following this pen.

For example the code that is updating a product's quantity is the following:

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

It works nicely but the database is not updating of course at this point.

I was wondering what is the best way to update both the front-end and the database with products' quantities or similar operations? I am probably looking for AJAX but not sure what the latest best practices are (ideally with as less JS as possible).

Answer 1

Your updateQuantity() function has to make an ajax call to a method in your controller that handles the change in the database and responds to either json or js to manipulate the 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
    }
  });
}

I'd suggest attaching the id of the product you want to update to the input's parent so you can pass it to your route and remember to pass the value under the required scope so you can sanitize the input in your controller via strong_params.

In your controller:

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

If you decide to respond in js instead of json, you need to create a view with the same name as your method with a .js or .js.erb extension (instead of .html/.html.erb) and handle the successful response in js. In this view you have access to all the instance variables declared in your method. For example:

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

If you go this route, remember to delete the success part of your ajax call.