All threads / Select Or Create Field With Selectize.js Discussion
Ask A Question


You’re not receiving notifications from this thread.

Select Or Create Field With Selectize.js Discussion

Awesome! Would love more episodes like this. :)

Ehsan Asgari ·

Hi, Thank you for this episode, is there anyways you could maybe explain how to deal with validation errors? Is it handled by ajax failed?

Jeremy Christopher Bray ·

Its a pity they don't currently support scss

Ninad Phadke ·

Hey Chris! Very cool episode. I almost have this working but there is one major issue.
When I submit the Ajax form, the client is sending two post requests (duplicating). I've looked at a lot of posts on Stack Overflow but none seemed to address what to do when e.preventDefault doesn't work...(if that indeed is the issue).

So what is there in this code that causes a duplicate submission of the POST request?

$('#new_category').on("submit", function(e){
// e.stopImmediatePropagation();
method: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(response){
callback({ value:, text:});

NOTE - Based on the posts on Stack Overflow I tried e.stopImmediatePropagation() this works on the first POST request, but subsequent POST requests cannot be sent at all without a form refresh

EDIT 1 - The actual behaviour is even freakier than that....if I'm adding only tag then only 1 POST request is sent. For the second tag -> two are sent; for the third -> three and so on...

Abdelkrim Tabet Aoul ·

excellent tutorial!
for Add.... (create option) if it possible to have this option enabled on focus i mean before typing a value on categories input

Giacomo Bertoldi ·

Just want to point out one thing to help who got stuck like me :)
Rails ujs is now part of Rails 5.1 and use vanilla js instead of jquery as some functions have been moved.
So to re-enable the submit button of the modal you should use something like
" Rails.enableElement($('selector-for-submit-button')[0]); "
instead of
" $.rails.enableFormElements($('selector-for-modal-form')); "


First of all, fantastic episode!

Quick question... 

Is it possible to remove the "Add..." if the category name is already in the database?
Otherwise it's easy to get duplications... 


Hi Chris Great Tutorial and it works for me! BUT I have one question. I'm trying to associate one or various categories to one post and see them on post show views?.

You have has_many_trhough association but in your controllers I didn't see anything related with this type of associations. I'm searching about that and I found things like append, create, build and other methods. Then the question is, how can I associate one or various categories to one post on post show views for this particular tutorial?? I was spend 2 hours on that and I can't figure it out :(

If you can help me... Thanks!

There exist any chance to create only by clic on enter key? I wan't to use the modal to submit/create a category.

How to handle and display errors in case validations fail?

for those of you loveing this but pulling your hair out as to why your modal will not close and you hit errors

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

    $(".series-modal").on("", function(e) {
        if (selectizeCallback != null) {
            selectizeCallback = null;

        var selectors = [$.rails.linkDisableSelector, $.rails.formEnableSelector].join(', ');
        $(selectors).each(function() {

    $("#new_series").on("submit", function(e) {
            method: "POST",
            url: $(this).attr("action"),
            data: $(this).serialize(),
            success: function(response) {
                selectizeCallback({value:, text:});

        create: function(input, callback) {
            selectizeCallback = callback;


just change series-modal to your modal name and #new_series to your model name

Nice tutorial! Would love to see this tutorial with simple_form and with form errors being displayed :)

Anyone have a solution for displaying form validation errors?

What do I do in the case when I'm using Tailwindcss instead of bootstrap. How do I rewrite this part:

$(".category-modal").on("", function(e) {
if (selectizeCallback != null) {
selecitzeCallback = null;



Because at this moment when create a new category (or characteristic in my case) and close the characteristic modal before saving then afterwards I'm not able to continue creating new characteristics (typing is blocked).

Hey Chris,

I noticed you have created this... can we expect a GoRails episode on this soon? Would you still recommend Selectize with Rails 6?


Hello everybody,

I have the following issues. While trying to install the code as provided, I get an error:

Uncaught TypeError: $(...).modal is not a function
at Selectize.create (post.js:34)

Do you think you can help?

can you show me the line 34 of your post.js file?


Jeremy, do you think if I provide you with the source code it would help?

Hey @rafal, sorry I missed this show me the post.js

Hi, when I do this in an app with Rails 6. I get the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'enableFormElements').

When I have the following line in the javascript code $.rails.enableFormElements($("#new_product"));

Join the discussion

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

Join 70,078+ 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.

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

    © 2023 GoRails, LLC. All rights reserved.