如何从 javascript 中调用 Rails 方法

Question

I'm new in ruby on rails, I want to call controller method from javascript

show.html.erb

<label class="switch">
  <%if @vehicle.parking%>
    <input type="checkbox" checked onchange="parkingMode(<%= @vehicle.id %>)">
  <%else%>
    <input type="checkbox" onchange="parkingMode(<%= @vehicle.id %>)">
  <%end%>
  <span></span>
</label>

vehicle_controller.rb

def change_parking
  vehicle = Vehicle.find(params[:vehicle_id])
  if !vehiculo.parking
    vehicle.parking = true
    vehicle.save
  else
    vehicle.parking = false
    vehicle.save
  end
end

vehicle.js

function parkingMode(id){
    console.log(id)
}

Answer 1

You can't call a Rails controller method directly from within the view, you need to send a request to it.

A good way to do this is with a form:

<%= form_for(@vehicle) do |f| %>
  <input name="parked" type="checkbox" checked="<%=@vehicle.parked%>" />
  <input type="submit" />
<%= end %>

Then your controller could update the vehicle depending on whether params[:parked] is checked and redirect back to the same page

def change_parked
  @vehicle.update_column(:parked, params[:parked])
  redirect_to vehicle_path(@vehicle.id)
end

The benefit of this is that you don't need any JavaScript to make changes to the vehicle. However, if you want to avoid a page refresh...

To do this without a form, you will need to use JavaScript and Ajax to ping the endpoint that routes to that controller method.

So, your parkingMode JavaScript method could be something like (I'm using jQuery for ease here)

const request = $.post('/vehicles/change_parking')
request.done((response) => {
  console.log('Do something here')
})

This would call your controller method, which could return JSON as a result:

def change_parking
  vehicle = Vehicle.find(params[:vehicle_id])
  if !vehiculo.parking
    vehicle.parking = true
    vehicle.save
  else
    vehicle.parking = false
    vehicle.save
  end

  render json: { vehicle: vehicle }, status: 200
end

Then you would need to change the checked value of the checkbox:

const request = $.post('/vehicles/change_parking')
request.done((response) => {
  $('input[type="checkbox"]).attr('checked', response.responseJSON.vehicle.parked)
})

There's a couple of things I want to address.

Firstly, you're using an if statement in your view when you could simplify it to something like:

<input type="checkbox" checked="<%= @vehicle.parked %> onchange="parkingMode(<%= @vehicle.id %>)">

This means that the checkbox will only be checked if the vehicle is parked.

Secondly, in your change_parking method, you only need to call save once

def change_parking
  vehicle = Vehicle.find(params[:vehicle_id])
  if !vehiculo.parking
    vehicle.parking = true
  else
    vehicle.parking = false
  end

  vehicle.save
end

You could also do something like vehicle.parking = !vehicle.parking and remove the if statement.

Answer 2

You can call a controller action using JS. But not directly. However, you can use the tools already provided by Rails to do so.

First, we render a remote checkbox:

check_box_field 'parking_mode_toggle', '1', false, remote: true, data: { url: '/change_parking' }

Even though it's not given in the official document , if you read the Rails UJS code , you'll see that the UJS driver will make the request as soon as the checkbox is ticked/un-ticked.

Then, in your controller, you can do:

def change_parking
  # TODO: Change your database state according to the +params+ received

  respond_to do |format|
    format.js { render js: 'parkingMode()' }
  end
end