Rails update a field without form

Question

I've Rails 4.0 application with 'order' model which has a status field. While invoking a 'show' action to get 'order' object details, I want to add additional buttons on the 'Show page', in addition to 'Edit' and 'Back'. First one to mark 'update status' which will only update status of this order object to '1' and the second button to mark 'close order' which will only update status of this order object to 2. How can I achieve this without an 'Edit' action/view? Do I need to use form_tag to add these buttons and do I need to write 2 new methods in OrdersController to update the status?

Following is my show.html.erb with two buttons I want add...

<p>
  <strong>Name:</strong>
  <%= @order.name %>
</p>
<p>
  <strong>Status:</strong>
  <%= @order.status %>
</p>
<%= link_to 'Edit', edit_order_path(@order) %> |
<%= link_to 'Back', orders_path %> |
<%= link_to 'Shipped', '#', :name => 'shipped_button' %> |
<%= link_to 'Close',   '#', :name => 'close_button' %>

If I click on 'Shipped' or 'Close' button they both will be called on to 'OrdersController' as a 'GET' request as shown below,

.. Started GET "/orders/1?name=shipped_button" for 127.0.0.1 at 2014-11-21 15:40:38 -0800
Processing by OrdersController#show as HTML
Parameters: {"name"=>"shipped_button", "id"=>"1"}
Order Load (0.1ms) SELECT "orders".* FROM "orders" WHERE "orders"."id" = ? LIMIT 1 [["id", 1]]
Rendered orders/show.html.erb within layouts/application (1.9ms)
Completed 200 OK in 50ms (Views: 47.8ms | ActiveRecord: 0.1ms)

How can I update the model with appropriate status field update. 'status' is an integer field in the 'orders' model.

Answer 1

I would do that with ajax:

You need something like that in your routes.rb file.

resources :orders

orders/show.html.erb:

<div id="order" data-order-id="<%= @order.id %>"></div>

<p id="notice"><%= notice %></p>

<p>
  <strong>Status:</strong>
  <%= @order.status %>
</p>

<p>
  <strong>Name:</strong>
  <%= @order.name %>
</p>

<%= link_to 'Edit', edit_order_path(@order) %> |
<%= link_to 'Back', orders_path %>
<%= link_to 'Shipped', '',id: "ship" %> |
<%= link_to 'Close',   '', id: "close" %>



<script> 
$(function () {
    var orderId = $('#order').data("order-id");
    var shippButton = $('#ship');

    var closeButton = $('#close');
    alert(orderId);



    closeButton.on("click", function() {
        $.ajax({
            url: '/orders/'+orderId,
            type: 'PATCH',
            dataType: 'json',
            data: {"order": { "status": "4"}},
            complete: function (jqXHR, textStatus) {
                // callback
            },
            success: function (data, textStatus, jqXHR) {
                // inform user that it was a sucess like:
                alert("successfully changed the order to closed");
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // do something if the request fails
            }
        });
    });

    shippButton.on("click", function() {
        $.ajax({
            url: '/orders/'+orderId,
            type: 'PATCH',
            dataType: 'json',
            data: {"order": { "status": "3"}},
            complete: function (jqXHR, textStatus) {
                // callback
            },  
            success: function (data, textStatus, jqXHR) {
                // inform user that it was a sucess like:
                alert("successfully changed the order to shipped");
            },  
            error: function (jqXHR, textStatus, errorThrown) {
                // do something if the request fails
            }   
        }); 
    });
});

</script>