Ask A Question

Notifications

You’re not receiving notifications from this thread.

Select Or Create Field With Selectize.js Discussion

Awesome! Would love more episodes like this. :)

Reply
Ehsan Asgari 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?

Reply
Jeremy Christopher Bray Jeremy Christopher Bray

Its a pity they don't currently support scss

Reply
Ninad Phadke 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.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...

Reply
Abdelkrim Tabet Aoul 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

Reply
Giacomo Bertoldi Giacomo Bertoldi

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

Reply

omg thank you! <3

Reply
Hey!!

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

Thanks
Reply

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!

Reply

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

Reply

How to handle and display errors in case validations fail?

Reply

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

Reply

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

Reply

Anyone have a solution for displaying form validation errors?

Reply

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

});

Reply

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

Reply

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

Reply

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?

Reply

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

Reply
        $(".category-modal").modal();
Reply

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

Reply

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

Reply

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

Reply
Join the discussion
Create an account Log in

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

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

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