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')

Reply

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

Reply

Thank you for that answer.

I would like to use TailwindCSS, instead of Bootstrap. What changes should I make to this code? or would that code work without Bootstrap installed. Currently I try to work it out and I get an error.

submissions.js:33 Uncaught TypeError: $(...).modal is not a function
at Selectize.create (submissions.js:33)
at Selectize.createItem (selectize.js:2196)
at Selectize.onOptionSelect (selectize.js:1235)
at HTMLDivElement. (selectize.js:687)
at HTMLDivElement.dispatch (jquery.js:4658)
at HTMLDivElement.elemData.handle (jquery.js:4478)
create @ submissions.js:33
createItem @ selectize.js:2196
onOptionSelect @ selectize.js:1235
(anonymous) @ selectize.js:687
dispatch @ jquery.js:4658
elemData.handle @ jquery.js:4478

Reply

The error is for this portion of code:

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

        $(".tag-modal").modal();
        $("#tag_name").val(input);
    }
});
Reply
Join the discussion
Create an account Log in

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

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

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

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2023 GoRails, LLC. All rights reserved.