Question

我在表中有各种值，需要在使用best_in_place更新DOM元素后进行更新。如何在最佳到位更新后触发名为“update.js.erb”的“create.js.erb”等javascript操作？

例如，我有一个项目价格表，我需要在用户更新单个项目数量后更新表格的“总计”字段。

Answer 1

我见过很多人都在问这个问题，但还没有找到满意的解决方案。我发现最好的方法是创建一个javascript函数，在ajax：success之后监视特定DOM元素的更新，然后使用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

然后在一个加载了页面的.js文件中（比如application.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脚本，那将是最好的，但它看起来不像路线图上那样。

在best_in_place更新后更新各种DOM元素

1 个答案: