Question

我有一个使用cocoon的rails应用程序

= link_to_add_association

调用部分表单

主表单上的

我有咖啡脚本来加载select2元素的所有数据

当插入ajax部分时，select2元素不会出现。我需要实例化它。

这是我的咖啡/ js

  $(document).ready ->
   $(".select2").each (i, e) ->
    select = $(e)
    options = {}
    if select.hasClass("ajax")
      options.ajax =
        url: select.data("source")
        dataType: "json"
        data: (term, page) ->
          q: term
          page: page
          per: 10
        results: (data, page) ->
          results: data
      options.placeholder = "Select a value"
      options.allowClear= "true"
      options.dropdownAutoWidth = "true"
      options.initSelection = (element, callback) ->
        data = {id: element.val().split('||')[0], text: element.val().split('||')[1]};
        callback data
    select.select2 options
    return

如果我使用coocon - 在绑定后插入

  $('body').bind 'cocoon:after-insert', (e, inserted_item) ->
    $(".select2").each (i, e) ->
      select = $(e)
      options = {}
      if select.hasClass("ajax")
        options.ajax =
          url: select.data("source")
          dataType: "json"
          data: (term, page) ->
            q: term
            page: page
            per: 10
          results: (data, page) ->
            results: data
        options.placeholder = "Select a value"
        options.allowClear= "true"
        options.dropdownAutoWidth = "true"
        options.initSelection = (element, callback) ->
          data = {id: element.val().split('||')[0], text: element.val().split('||')[1]};
          callback data
      select.select2 options
      return

我刷新页面上的所有元素 - 当然我调用所有select2对象。我没有为select2 js编写这段代码。

所有现有的表单元素都可以，但是动态添加的元素会刷新 - 因此它们会丢失它们的值。

我想只选择添加的元素并使其工作。

如果我尝试

$('body').bind 'cocoon:after-insert', (e, inserted_item) ->
  $(inserted_item).find(".select2").select2
  return

它不起作用

尝试了很多选择，但我的头发很薄，我需要帮助。 JS是我的主要敌人，我真的觉得它很痛苦......

HELP！

Answer 1

$(document).ready ->
  $('body').bind "cocoon:after-insert", (e, inserted_item) ->
    select=$(inserted_item).find(".select2.ajax")
    options = {}
    if select.hasClass("ajax")
      options.ajax =
        url: select.data("source")
        dataType: "json"
        data: (term, page) ->
          q: term
          page: page
          per: 10
        results: (data, page) ->
          results: data
      options.placeholder = "Select a value"
      options.allowClear= "true"
      options.dropdownAutoWidth = "true"
      options.initSelection = (element, callback) ->
        data = {id: element.val().split('||')[0], text: element.val().split('||')[1]};
        callback data
    select.select2 options
    return

OMG。几个小时，然后我明白了......

cocoon select2 ajax load of partial - select2元素不加载

1 个答案: