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

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 ·

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 ·

Its a pity they don't currently support scss

Reply
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 ·

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 ·

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
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
Join the discussion

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

Join 33,665+ 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.