Select Or Create Field With Selectize.js Discussion

Awesome! Would love more episodes like this. :)

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?

Its a pity they don't currently support scss

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.preventDefault();
// e.stopImmediatePropagation();
$.ajax({
method: "POST",
url: $(this).attr("action"),
data: $(this).serialize(),
success: function(response){
callback({ value: response.id, text: response.name});
console.log(response);
$('.category-modal').modal('hide');
$.rails.enableFormElements($('#new_category'));
}
});

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

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

Cool!
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')); "

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("hide.bs.modal", function(e) {
        if (selectizeCallback != null) {
            selectizeCallback();
            selectizeCallback = null;
        }

        $("#new_series").trigger("reset");
        var selectors = [$.rails.linkDisableSelector, $.rails.formEnableSelector].join(', ');
        $(selectors).each(function() {
            $.rails.enableElement(this);
        })
    });

    $("#new_series").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});
                $(".series-modal").modal('toggle');
            }
        });
    });

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

            $(".series-modal").modal();
            $("#series_name").val(input);
        }
    });
});

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("hide.bs.modal", function(e) {
if (selectizeCallback != null) {
selectizeCallback();
selecitzeCallback = null;
}

$("#new_category").trigger("reset");
$.rails.enableFormElements($("#new_category"));

});

Hey Chris,

I noticed you have created this... https://github.com/excid3/stimulus-slimselect can we expect a GoRails episode on this soon? Would you still recommend Selectize with Rails 6?

Cheers
Josh

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?

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"));