Rails 5 交叉模型 ajax 表单未更新索引

Question

Class Actual 正在管理 class Friendgroup 中对象的创建和删除。表单页面

<ul id=friendgroups>   <%= render @friendgroups %> </ul>

<%= form_with model: Friendgroup.new, data: {'js-friendgroup-form' => true} do |form| %>   
  Name <%= form.text_field :name %>
  <%= form.submit %> 
<% end %>

在页面加载时正确调用朋友组集合，朋友组控制器确实创建记录：

  def create
    params[:friendgroup][:user_id] = current_user.id
    @friendgroup = Friendgroup.new(friendgroup_params)
    authorize @friendgroup
    if @friendgroup.save
      render partial: 'friendgroup', locals: {friendgroup: @friendgroup}
    end  
  end

页面加载时，加载现有对象：

<li data-js-friendgroup-id=<%= friendgroup.id %>>
  <%= friendgroup.name %> <%= link_to "Delete", friendgroup, remote: true, method: :delete, data: { confirm: "Are you sure you want to delete '#{friendgroup.name}'?" } %>

然而，AJAX 操作并没有渗透回索引，这让我得出结论，javascript 函数没有绑定到正确的 classes/items:

//= require jquery3
//= require jquery-ui
//= require rails-ujs
$(document).ready(function() {
  $('[data-js-friendgroup-form]').on("ajax:success", function(event, data, status, xhr){
    var friendgroup = $(xhr.responseText).hide();
    $('#friendgroups').append(friendgroups);
    friendgroup.fadeIn(1000);
//    $('#friendgroups').append(xhr.responseText);
  });

  $('[data-js-friendgroup-id]').on("ajax:success", function(event, data, status, xhr){
    var friendgroup_id = xhr.responseJSON.id;
    $('[data-js-friendgroup-id=' + friendgroup_id + ']').hide();
  });
});

另一个可能的罪魁祸首是控制台错误 TypeError: url.indexOf is not a function 被 jQuery3 激活，但这与上面的代码关系不大。

这些跨模型动作如何运行正确？

Answer 1

眼睛不好的问题

    $('#friendgroups').append(friendgroup);

而不是

    $('#friendgroups').append(friendgroups);

Rails 5 交叉模型 ajax 表单未更新索引

Rails 5 cross model ajax form not updating index

javascript

ruby-on-rails-5.2