Question

正在使用data: {'js-item-form' => true}生成Rails表单，以便通过AJAX调用来更新视图

<div data-js-item-id=<%= item.id %>>   [...] </div>

控制器

render partial: 'item', locals: {item: @useritem}

和js

$(document).ready(function() {
  $('[data-js-item-form]').on("ajax:success", function(event, data, status, xhr){
    var item = $(xhr.responseText).hide();
    $('#items').append(item);
    item.fadeIn(1000);
  });

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

问题涉及将这些AJAX调用扩展到其他两个元素

render partial: 'variants', locals: {variants: @products}
render partial: 'suppliers', locals: {suppliers: @suppliers}

视图仍然指向同一项目的创建/更新，该项目应通过Jquery的replace调用触发更改

<span data-js-item-id=<%= item.id %>>
  <%= collection_select(:useritem, :product_id, @products, :id, :name, prompt: 'Select one (mandatory)') %>
</span>

[within a javascript block] data-js-item-id=<%= item.id %> 
  <%=raw @suppliers.to_json %>

由于不精通js，这个问题分为两个难题：

如何在javascript中注入由标识的rails集合 item.id
如何扩展js表单块
$('#items').append(item); item.fadeIn(1000);与替换功能

我意识到replace函数处理一个集合，而原始调用处理一个成员；因此命名项目/项目可能会很滑...

用jQuery3替换功能替换多个部分

0 个答案: