在 best_in_place 更新后更新各种 DOM 元素 [英] Updating various DOM elements after best_in_place update

问题描述

我在使用 best_in_place 更新 DOM 元素后需要更新表中的各种值.在最佳就地更新后，如何触发名为update.js.erb"的create.js.erb"之类的 javascript 操作?

I have various values in a table that need to be updated after a DOM element is updated using best_in_place. How can you trigger a javascript action like "create.js.erb" called "update.js.erb" after a best in place update?

例如，我有一个商品价格表，我需要表格的总计"字段在用户更新单个商品数量后进行更新.

For example, I have a table of item prices, and I need the table's "total" field to update after a user updates an individual item quantity.

推荐答案

我看到很多人问这个问题，但没有找到满意的解决方案.我发现最好的方法是创建一个 javascript 函数来监视特定 DOM 元素在 ajax:success 后更新，然后使用 jQuery 更新指定的 DOM 元素.

I've seen many people asking this question, but haven't found a satisfactory solution. I found the best approach is to create a javascript function that watches for a particular DOM element to update after an ajax:success, and then use jQuery to update a specified DOM element.

在要更新的项目的控制器中，我打包了一个 JSON 响应，其中包含我的 javascript 更新 DOM 元素所需的所有信息.

In the controller of the item being updated, I package a JSON response that includes all of the information my javascript will need in order to update DOM elements.

您会看到我还将新表格行的部分呈现为 HTML 字符串，并将此字符串与 JSON 响应一起传递.

You'll see I also render the new table row's partial as an HTML string, and pass this string along with the JSON response.

___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"的表行.

Then in a .js file that gets loaded with the page (like application.js), I include a function that watches for a table row with class "row_class" to be updated.

$(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 对象中的变量.

You can modify the jQuery to update any DOM element you need. Also, if you need the results of ruby methods called on objects (such as a humanized total, tax total, etc) you can define these as variables in the JSON object in the controller.

最终最好是 best_in_place 会触发(在这种情况下)items/update.js.erb 脚本，但它看起来不像路线图上的那样.

Ultimately it'd be best if best_in_place would trigger (in this case) the items/update.js.erb script, but it doesn't look like that's on the roadmap.

这篇关于在 best_in_place 更新后更新各种 DOM 元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！