使用 Rails、jquery 和 best_in_place gem 就地编辑

Posted

技术标签:

【中文标题】使用 Rails、jquery 和 best_in_place gem 就地编辑【英文标题】:In-place editing with Rails, jquery and best_in_place gem 【发布时间】:2013-03-06 07:56:03 【问题描述】:

我有一个任务列表应用程序,其中任务按类别显示。

我在两个地方列出了类别。我允许使用 best_in_place gem 就地编辑类别名称。我的工作正常。我的问题是,由于我在两个地方都有类别名称,并且我只是在原地编辑它的一个出现,所以我需要在表单提交后用新名称更新未编辑的名称的另一个外观.刷新/重新加载受影响类别名称的最佳方式是什么?

谢谢。

【问题讨论】:

【参考方案1】:

你需要使用回调。

使用 gem 的描述 (https://github.com/bernat/best_in_place) 我得到了这个:

<%= best_in_place @user, :name, :data => :user_name => @user.name, :classes => 'custom_class'  %>

$('.custom_class').bind("ajax:success", function() alert('Name updated for '+$(this).data('userName')); );

所以在你的情况下,你需要做这样的事情:

$("#other_ocurrence_id").html($(this).data('userName'));

【讨论】:

这行不通。最好的 :data 绑定将存储引用的属性的原始值。您必须对 dom 进行一些解析才能获得新值。看我的回答。【参考方案2】:

如果你有这个代码(haml)

= best_in_place @user, :name, :classes => 'name-edit'

您确实需要回调。但是,在回调处理程序的上下文中,“this”表示调用的元素,所以你可以这样做

$('.name-edit').on 'ajax:success', (event, data, status, xhr) ->
  $('.some-other-widget').html this.innerHTML

并以这种方式将新值传递给另一个小部件。回调处理程序中的事件还具有 currentTarget 作为属性,它是启动 ajax 请求的小部件。但是,我认为没有必要。

【讨论】:

以上是关于使用 Rails、jquery 和 best_in_place gem 就地编辑的主要内容,如果未能解决你的问题,请参考以下文章

Rails 远程和 jquery ajaxStop

在 Rails 应用程序中结合 Scriptaculous 和 jQuery

Rails 6 和 Jquery 插件错误:$(...).validate 不是函数

rails3 rails.js 和 jquery 捕获 ajax 请求的成功和失败

rails 和 jquery post

如何使用 rails 和 jquery 优化 ajax 搜索