best_in_place update後更新各種DOM元素

Question

在使用best_in_place更新DOM元素後，需要更新的表中有不同的值。在最佳就地更新之後，如何觸發像「create.js.erb」這樣的名爲「update.js.erb」的JavaScript動作？

例如，我有一個項目價格表，我需要在用戶更新單個項目數量後更新表格的「總計」字段。

Answer 1

我見過很多人問這個問題，但還沒有找到滿意的解決方案。我發現最好的方法是創建一個javascript函數，該函數監視特定DOM元素在ajax：success後更新，然後使用jQuery更新指定的DOM元素。

在正在更新的項目的控制器中，我打包了一個JSON響應，其中包含我的JavaScript將用於更新DOM元素的所有信息。

你會看到我也將新錶行的部分呈現爲HTML字符串，並將此字符串與JSON響應一起傳遞。

___Item Controller_____ 

    respond_to do |format| 
    if @item.update_attributes(params[:item]) 

    #json response variables to refresh table row after update 
    id = [@item] 
    new_row = render_to_string('items/_item.html', :layout => false, :locals => { :item => @item }) 
    #----------json-variables-----------# 

    format.json { render :json => { new_row: new_row, id: id, :status => 200 }} 
    format.js 
    else 
    format.json { render :json => @item.errors.full_messages, :status => :unprocessable_entity } 
    format.js 
    end 
end 

然後在被加載的頁面（如application.js中）.js文件，我包括手錶帶班「row_class」要更新的錶行的功能。

$(document).ready(function(row_class, row_id_prefix){ 

$("." + row_class).on("ajax:success",function(event, data, status, xhr){ 
    var parsed_data = jQuery.parseJSON(data); //parses string returned by controller into json object 

    var id = parsed_data["id"]; 
    var new_row = parsed_data["new_row"]; //this is an html string that replaces the existing table row 

    $('tr#' + row_id_prefix + id).replaceWith(new_row); 
    $('tr#' + row_id_prefix + id).effect('highlight'); 
    $('.best_in_place').best_in_place(); //activates in-place-editing for newly added content.  
}));   

您可以修改jQuery來更新您需要的任何DOM元素。此外，如果您需要在對象上調用的ruby方法的結果（例如人性化總數，稅務總額等），則可以將其定義爲控制器中JSON對象中的變量。

最終，如果best_in_place會觸發（在本例中）items/update.js.erb腳本，但它看起來不像路線圖中那樣。