Ruby on Rails:带有Cocoon的Selectize.js [英] Ruby on Rails: Selectize.js with Cocoon

问题描述

我正在尝试在Ruby on Rails中创建一个表单以选择构造的一部分.新字段(零件条目-连接表)由Cocoon gem添加.一切正常，但是在尝试编辑保存的构造时，Selectize无法读取其当前零件的字段.

I'm trying to make a form in Ruby on Rails to select parts of the construction. New fields (part entries - the joining table) are added by Cocoon gem. Everything works fine but when trying to edit saved constructions Selectize cannot read its current parts' fields.

这是我的_part_fields.html.erb:

Here is my _part_fields.html.erb:

<li class="control-group nested-fields">
  <div class="controls">
    <%= f.input :quantity %>
    <%= f.select :part_id, options_from_collection_for_select(Thing.all, :id, :name), {:prompt => "Select or create a part..."}, {class => "construction_part_select"} %>

    <%= link_to_remove_association "remove", f %>
  </div>
</li>

application.js:

application.js:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require selectize
//= require bootstrap
//= require bootstrap-sprockets
//= require cocoon
//= require_tree .

jQuery(function () {
    console.log("jQuery");
    $("#construction_part_select").each(function () {
        console.log("iter1");
        $(this).selectize({
            create: true,
            sortField: "text"
        });
    });
});

var selectizeParts;
selectizeParts = function () {
    console.log("selectizeParts");
    $("#construction_part_select").each(function () {
        console.log("iter2");
        $(this).selectize({
            create: true,
            sortField: "text"
        });
    });
};

$(document).ready(function () {
    selectizeParts();

    $('#construction_parts').bind('cocoon:after-insert',
        function (e, inserted_item) {
            item = inserted_item.find('.construction_part_id');
            item.selectize({
                create: true,
                sortField: "text"
            });
        })
});
$(document).on("page:load", selectizeParts);

我该如何工作?

谢谢.

推荐答案

我通过在选择标签('to_select')中添加特殊参数解决了此问题，因为建议使用'data-data'(

I solved it by adding special parameter to my selection tag ('to_select') because recommended 'data-data' (https://github.com/brianreavis/selectize.js/issues/231) which should automatically select current value seems to not work in my case.

_part_fields.html.erb:

_part_fields.html.erb:

<li class="control-group nested-fields">
  <div class="controls">
    <%= f.input :quantity %>
    <%= f.select :part_id, options_from_collection_for_select(Thing.all, :id, :name), {:prompt => "Select or create a part..."}, {:class => "construction_part_select", :to_select => f.object.part.id} %>

    <%= link_to_remove_association "remove", f %>
  </div>
</li>

application.js:

application.js:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require selectize
//= require bootstrap
//= require bootstrap-sprockets
//= require cocoon
//= require_tree .

jQuery(function () {
    console.log("jQuery");
    $("#construction_part_select").each(function () {
        console.log("iter1");
        var $selectized;
        $selectized = $(this).selectize({
            create: true,
            sortField: "text"
        });
        // Set currently selected value after page (re)load because 'data-data' param is not working (https://github.com/brianreavis/selectize.js/issues/231)
        // get(0) returns DOM object on which we can invoke getAttribute()
        $selectized[0].selectize.setValue($(this).get(0).getAttribute("to_select"));
    });
});

var selectizeParts;
selectizeParts = function () {
    console.log("selectizeParts");
    $("#construction_part_select").each(function () {
        console.log("iter2");
        var $selectized;
        $selectized = $(this).selectize({
            create: true,
            sortField: "text"
        });
        // Set currently selected value after page (re)load because 'data-data' param is not working (https://github.com/brianreavis/selectize.js/issues/231)
        // get(0) returns DOM object on which we can invoke getAttribute()
        $selectized[0].selectize.setValue($(this).get(0).getAttribute("to_select"));
    });
};

$(document).ready(function () {
    selectizeParts();

    $('#construction_parts').bind('cocoon:after-insert',
        function (e, inserted_item) {
            item = inserted_item.find('.construction_part_id');
            item.selectize({
                create: true,
                sortField: "text"
            });
        })
});
$(document).on("page:load", selectizeParts);

这篇关于Ruby on Rails:带有Cocoon的Selectize.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！