Ruby on Rails: Selectize.js with Cocoon

Question

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.

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:

//= 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);

How can I get this working?

Thanks in advance.

Answer 1

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:

<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:

//= 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);