轨道上的红宝石 - 我正在尝试重写button_to

Question

我正在尝试重写以下按钮代码，以便它不会将我重定向到show页面，它只是创建对象并且当前页面保持显示状态。

<div class="colors">
    <li class="colors" id="greys">
        <%= button_to "some text", votes_path(color: 'grey', kid_id: current_kid, scoop_id: scoop.id, :method => :create), class: 'grey color-button' %>
    </li>
</div>

Answer 1

您应该使用远程标志通过 javascript 发送请求。并可能向用户提供反馈。

要通过 js 在 rails 中发送请求，您必须将remote: true添加到选项哈希中：

<div class="colors">
    <li class="colors" id="greys">
        <%= button_to "some text", votes_path(color: 'grey', kid_id: current_kid, scoop_id: scoop.id, :method => :create), class: 'grey color-button', remote: true %>
    </li>
</div>

在控制器中，您可以通过响应 js 来执行特殊响应

#votes controller
def create
  # ...
  respond_to do |format|
    format.js render
  end
end

在你的create.js.erb中，你可以用嵌入的Ruby编写javascript代码来给出响应。您甚至可以在此处渲染部分。

alert('create.js.erb')

Answer 2

首先，为您的按钮准备一些id：

<%= button_to "some text", votes_path(color: 'grey', kid_id: current_kid, scoop_id: scoop.id, :method => :create), class: 'grey color-button' id: 'buttonID' %>

然后，在您的 Javascript 代码中，每当单击该按钮时，都会向服务器发送请求，创建新记录，然后更新当前页面，以便它显示记录已创建。

我会告诉你如何做到这一点的雕塑：

$("buttonID").click(function() {
    $.ajax({
        url: "some_url" // Your URL, for example, /votes
        type: "POST", // The type of request
        data: { color: "grey" } // Send data to server in this format
        success: function() {
            // Here you can update the page so that the user could
            // know the data has been posted, and no need to press 
            // the button again
        } 
    });
});