All threads / How Do I Use Selectize in Rails 6

Ask A Question

Notifications

You’re not receiving notifications from this thread.

How Do I Use Selectize in Rails 6

Jeremy Bray asked in Gems / Libraries

Hi there, I really love the selectize tutorial and would love to use it in a rails 6 application. What changes do I need to make to the tutorial.

can i just change

//= require selectize

to

$ yarn add selectize

Do I need to add Selectize to my environment.js like i would jquery

const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
        selectize: '?'
  })
)

And or Require selectize in application.js file.
require('selectize')

Hi @Jeremy, the following implementation works well for me in Rails 6:

yarn add selectize

app/assets/stylesheets/application.scss:

@import "selectize/dist/css/selectize";
@import "selectize/dist/css/selectize.default";

javascript/packs/application.js

require("selectize")
require("packs/language")

javascript/packs/language.js (code from video)

$(document).on("turbolinks:load", function() {
    var selectizeCallback = null;

    $(".language-modal").on("hide.bs.modal", function(e) {
        if (selectizeCallback != null) {
            selectizeCallback();
            selectizeCallback = null;
        }

        $("#new_language").trigger("reset");
        $.rails.enableFormElements($("#new_language"));
    });

    $("#new_language").on("submit", function(e) {
        e.preventDefault();
        $.ajax({
            method: "POST",
            url: $(this).attr("action"),
            data: $(this).serialize(),
            success: function(response) {
                selectizeCallback({value: response.id, text: response.name});
                selectizeCallback = null;

                $(".language-modal").modal('toggle');
            }
        });
    });

    $(".selectize").selectize({
        create: function(input, callback) {
            selectizeCallback = callback;

            $(".language-modal").modal();
            $("#language_name").val(input);
        }
    });
});

and finally the view on edit.html.erb

          <%= f.select :language_ids, Language.all.pluck(:name, :id), {}, { multiple: true, class: "selectize" } %>

                    <div class="modal fade language-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="mySmallModalLabel">Add Language</h4>
      </div>
      <div class="modal-body">
        <%= form_for Language.new do |f| %>
          <div class="form-group">
            <%= f.label :name %>
            <%= f.text_field :name, class: "form-control" %>
          </div>
          <div class="form-group">
            <%= f.submit class: "btn btn-primary" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>

That's it - hope it helps. Cheers

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 35,095+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.