如何在不刷新的情況下在頁面上提交表單和更新元素，在 Rails 4 中

Question

我在嘗試做一些我認為相當簡單的事情時遇到了很多麻煩。

我有一個項目清單，比如說，待辦事項。 在該列表的底部，我有一個文本字段，我可以在其中向該列表添加新項目。 我想讓它動態地將新項目添加到該列表的底部，而不像在聊天窗口中那樣刷新整頁。

我將提交表單設置為remote: true並且它在不重新加載頁面的情況下成功提交，但我無法同時讓新項目出現在列表底部。 我必須刷新頁面才能看到更改。

我嘗試了在 SO 上找到的幾種不同方法（這里不乏類似的問題）和網絡，甚至是一個名為 Sync 的 gem，但它們每個都有自己的錯誤和問題，我無法解決任何問題適當地。 他們每個人都可以是它自己的 SO 問題。 所以我問：是否有一個“食譜”可以確保在 Rails 4 中成功實現這一點？

Answer 1

比方說，現在你有一個用戶表單要提交，

<%=form_for @user,remote: true%><%end%>

你還有一個控制器，

UsersController

在您的控制器中，您有一個功能，

def create
  #something
end

這是表格。

您唯一需要做的就是修改函數，例如

def create
  #something
  respond_to do |format|
    format.js
    format.html
  end
end

然后在您的視圖端，在 view/users/ 目錄下，創建一個 create.js 文件，在該文件中，您可以執行 js 操作，例如獲取新記錄，並將新記錄附加到用戶列表中。

參考：

http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html#form-for

Answer 2

有多種方法可以完成您的要求。 我的方法是：

• 創建對傳遞表單參數的控制器的AJAX調用

• 在控制器內部，您保存/更新內容，然后返回一個JSON對象

• 在AJAX函數的success回調中，您使用對象值附加一個列表項/表行

代碼可能是這樣的：

模型.js

$(function() {
  $("#submit_button").on("click", function(event) {
    event.preventDefault();
    $.ajax({
      type: "POST",
      url: "your_controller_url",
      data: "your_form_data"
      success: function(result) {
        // Append the result to a table or list, $("list").append(result)
      },
    });
  });
});

控制器文件

def your_action
  # Do your stuff
  # return JSON to the ajax call
end

好吧，這只是一個骨架。 我更喜歡以這種方式做事。 （因為我討厭 js.erb 方法）

Answer 3

這是 rails 5，希望它會幫助某人（它仍然適用於 rails 4）：

試試這個 ajax 示例：

在“routes.rb”中：

# set the route that ajax can find the path to what controller in backend
get   '/admin/some_great_flow',   to: 'great_control#great_flow'

在“great_control_controller.rb”控制器中：

 # this function in controller will response for ajax's call
 def great_flow
    # We can find some user or getting some data, model here.
    # 'params[:id]' is passed by ajax that we can use it to find something we want.
    @user = User.find(params[:id]) 

    # print whole data on terminal to check it correct.
    puts YAML::dump(@user.id) 

    # transform what you want to json and pass it back.        
    render json: {staff_info: @user } 
end

在“app/views/great_control/index.html.erb”視圖中：

<div>
     <label>Staffs</label>
     <%=select_tag(:staff, options_from_collection_for_select(@staffs, :id, :name), id:"staff_id", required: true)%>
</div>
<script>
//every time if option change it will call ajax once to get the backend data.
$("#staff_id").change(function(event) {
    let staff_id = $("#staff_id").val()
    $.ajax({
        // If you want to find url can try this 'localhost:prot/rails/info/routes'
        url: '/admin/some_great_flow', 
        type: 'GET',
        dataType: 'script',
        data: { id: staff_id },
        // we get the controller pass here
        success: function(result) {
             var result = JSON.parse(result);
             console.log(result['staff_info']);
             // use the data from backend for your great javascript.
        },
    });
});
</script>

我是為自己寫的。

Answer 4

您可以使用 javascript 查看更改。 例如，讓我們考慮一個帶有操作索引的控制器 Mycontroller 並且您正在提交表單上的索引。 然后在視圖 my_controller/index.js.erb 中創建一個文件

要反映更改，請在此模板中使用 javascript。 肯定是遠程發送 ajax 調用，因此要查看更改，您需要使用 javascript 進行一些操作。

謝謝