Ruby on rails 3 - 更新后best_in_place更新各种 DOM 元素



我在表中有各种值,在使用 best_in_place 更新 DOM 元素后需要更新这些值。如何在最佳更新后触发像"create.js.erb"这样的javascript操作,称为"update.js.erb"?

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

我见过很多人问这个问题,但没有找到令人满意的解决方案。我发现最好的方法是创建一个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

然后在随页面一起加载的.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 脚本,但它看起来不在路线图上。

相关内容

  • 没有找到相关文章

最新更新