无法使Ruby on Rails 4 Ajax与Checkbox配合使用-Update Firing：但未更改复选框或数据库

Question

I'm attempting to use Ajax with Ruby on Rails 4 to watch when the checkbox changes and submit the form and save the checkbox change to the database. Even with the debugger I'm not seeing any errors. Any thoughts?

I recently changed the path to edit because I was getting a 404. I did this to it matches a route.

I just added the success function to the ajax call and it appears to be firing.

This is what I have currently:

This is product_controller

def update
  if @product.update(safe_params)
    redirect_to [:edit, @product], flash: { notice: t('shoppe.products.update_notice') }
  else
    render action: 'edit'
  end
end

This is form in haml

= form_for product, :remote => true do |f|
    = f.check_box :active
    = f.label :active,  t('shoppe.products.active'), :remote => true

This is js:

$('#product_active').bind('change', function() {
    console.log('changed');
    var action = $(this).parents('form').attr('action')+"/edit";
    var method = "GET";
    var checked = $(this).attr('checked');
    var data = $(this).attr('value');
    data ^= 1;

    $.ajax({
      method: method,
      url: action,
      data: checked,
      success: function() {
        alert("AJAX Fired");  
      }
    })

    debugger;

});

This is from rake routes

products     GET      /products(.:format)            shoppe/products#index
             POST     /products(.:format)            shoppe/products#create
new_product  GET      /products/new(.:format)        shoppe/products#new
edit_product GET      /products/:id/edit(.:format)   shoppe/products#edit
product      GET      /products/:id(.:format)        shoppe/products#show
             PATCH    /products/:id(.:format)        shoppe/products#update
             PUT      /products/:id(.:format)        shoppe/products#update
             DELETE   /products/:id(.:format)

UPDATE: I ended up putting a hidden submit button with the form and changing my js to and adding in a class to the form to allow me to hit all ajax with one set of code:

$('.ajax').bind('change', function() {
    $(this).parents('form').submit();
});

Answer 1

You need to hit the update endpoint of your routes not the edit. The edit route is usually to load the edit view.

You'll also want to return a json encoded response in the update action and handle the success jquery callback and from there you would redirect in the client side or do whatever you want to do to update the UI. A redirect would be only useful from within your rails code if you were actually submitting a form and not doing ajax.