Episodes
almokhtar said about 1 year ago on Slim Select with Stimulus :
copilot looks so useful !!

Crispin PRO said about 1 year ago on Slim Select with Stimulus :
You can browse additional documentation via the select dropdown (of course :-) ) on their webpage:

The "Options" and "Methods" selections are particularly useful, but for some reason direct links to those pages don't seem to work.

David Kimura PRO said about 1 year ago on Slim Select with Stimulus :
  Wow... That really would have been helpful. It didn't jump out and bite me! It definitely would have made the episode prep a lot easier!

dev said about 1 year ago on Slim Select with Stimulus :
Thanks for the episode, David!
As a bonus, how would you implement the "addable" function into our Rails app (create tag if doesn't exist yet)?

David Kimura PRO said about 1 year ago on Slim Select with Stimulus :
It looks like if it doesn't exist, it would send the values over to the app. But, likely, it would just send the Value back to the server. From here, we could separate values from integer and strings and create the new categories. This can be nice too since we can limit who can make these changes.

Tim Dowling PRO said about 1 year ago on Slim Select with Stimulus :
Slim select seems to throw a CSS export error on the latest version of webpacker just FYI incase anyone is running into that issue

atstockland said about 1 year ago on Slim Select with Stimulus :
Hi Dave!  I'm swapping select2 for slim-select.  I followed this video, but have run into a snag I can't seem to solve.

the view

  <%= f.select :location_id,
    [@existing_location&.name],
    { },
    class: "form-control select",
    data: { controller: 'slimselect', 'slimselect-url-value': ajax_locations_url } %>

locations_controller

  def ajax_locations
    if params[:q].present?
      @locations = Location.where('municipality iLIKE :q OR state iLIKE :q OR local_code iLIKE :q OR name iLIKE :q OR country iLIKE :q', q: "%#{ params[:q] }%")
      render json: @locations.map { |loc| { value: loc.id, text: loc.name } }
    else
      render json: []
    end
    skip_authorization
  end

slimselect_controller.js

  connect() {
    let url_val = this.urlValue
    new SlimSelect({
      select: this.element,
        searchingText: "Searching...",
        ajax: function (search, callback) {
          if (search.length < 3) {
            callback('need 3 characters to search')
            return
          }

          let url = new URL(url_val)
          url.search = new URLSearchParams({ q: search })
          console.log(`url: ${ url }`)

          fetch(url)
            .then(response => response.json())
            .then(json => callback(json))
            .catch(error => callback(error))
        }
    })
  }


I'm not getting any console errors, and I can manually render the url in a separate window and see the result.  Example: http://localhost:3000/ajax_locations.json?q=reno
[{"value":22500,"text":"Reno, NV  (US/Pacific)"},{"value":22080,"text":"KRTS - Reno, NV  (US/Pacific) [KRTS]"}]
However, nothing happens in the view...no options are added to the select input.  Can anyone see where I may have gone wrong?

EDIT:  the problem was the initial value being set in the select.  By setting the select f.select [], {} it now works.  So, now I need to figure out how to set/select an initial value (like on edit).

Thanks so much!

David Kimura PRO said about 1 year ago on Slim Select with Stimulus :
  I found it a bit strange on single selects not behaving the same as multiple selects. 

atstockland said about 1 year ago on Slim Select with Stimulus :
Hi Dave - I'm still unsuccessful in rendering a slim-select menu with options loaded from Ajax, where an initial value is selected.  I have a field that auto-populates based on the users input selection from their previous record.  So, the slim-select will load pre-selected to their last saved selected, with the option to search for a different selection.  This is tough.  It seems doable, but I haven't figured out the secret sauce, yet.  In your travels with slim-select did you see/learn anything to pull this off?

I find that adding the option and marking it "selected" in the view actually blocks slim-select from loading options from Ajax.  I'm not sure why, you'd think the new Ajax call would over write the existing select options, but instead it chokes...and nothing happens in the view.

Thanks!  I'll post back if I find a solution to this.

David Kimura PRO said about 1 year ago on Slim Select with Stimulus :
  That was my findings as well. It is rather annoying. I wasn't able to find a suitable solution except to just display what is selected.



If you don't change the value of the select then it will not change the persisted value. But since we are not pre-populating the list, it will allow you to select from the ajax list. I agree, it is rather annoying. I would see this as a defect in slim-select as the same behavior doesn't happen with their multiple select.

atstockland said about 1 year ago on Slim Select with Stimulus :
Wow, that was a quick response!!  Thanks for the info.  Maybe I'll post an issue with slim-select...they seem very responsive.

atstockland said about 1 year ago on Slim Select with Stimulus :
...responsive minus the 60 open issues currently.

atstockland said about 1 year ago on Slim Select with Stimulus :
If anyone experiences the issue I posted...follow along here https://github.com/brianvoe/slim-select/issues/276.  Some good info, and a few ideas.  Downgrading to 1.26.1 worked for a few people.  The gem seems to be in maintenance limbo at the moment.

arnaudrioche PRO said about 1 year ago on Slim Select with Stimulus :
Hi Dave! 
Thanks for the episode. Super clear and helpful as usual!
I did something really similar as the example for an app I am coding. It works perfectly in local host.
However, when I push to Heroku, looks like the slim select.css is never imported.

In local:



On Heroku:


I tried to move the line import "slim-select/dist/slimselect.css" from the stimulus controller to the app.js and to the app.scss with no result. I have no error thrown in the console.

Any idea?

Thanks for your help!

David Kimura PRO said about 1 year ago on Slim Select with Stimulus :
  Do you have <%= stylesheet_pack_tag 'application' %> in the layouts?

arnaudrioche PRO said about 1 year ago on Slim Select with Stimulus :
Hi  ,
Oops, I didn't. Only had:
<%= stylesheet_link_tag 'application',
          media: 'all',
          'data-turbolinks-track': 'reload' %>

    <%= javascript_pack_tag 'application',
          'data-turbolinks-track': 'reload',
          defer: true %>

Added the line <%= stylesheet_pack_tag 'application' %> and now it works.

Thank you very much for your help

Zaraka said 6 months ago on Slim Select with Stimulus :
Hello, I'm trying to use this in Rails 7 with importmaps, I've replaced stimulus with hotwired stimulus and it runs fine but I'm unable to import slim select stylesheet.
If I keep 
import "slim-select/dist/slimselect.css"
in stimulus controller I receive following javascript error in console
Uncaught Error: Unable to resolve specifier 'slim-select/dist/slimselect.css' from http://0.0.0.0:3000/...
I have only limited knowledge with stimulus and importams, but the slim-select itself is pinned and I have slim-select package in node_modules, so what I'm doing wrong?

Thank you for your help

David Kimura PRO said 6 months ago on Slim Select with Stimulus :
I think that this is where importmaps adds a bit of confusion. It's only going to pin the javascript assets and won't include the CSS bits of the library. Have you tried adding CSSbundling to import in the CSS assets?

Zaraka said 6 months ago on Slim Select with Stimulus :
That explains a lot of my confusion, I started digging and I'm using cssbundling-rails with tailwind, so I have tailwind.application.css, what I understood is I can't use import in tailwind.application.css and I should use tailwind in postcss or set a separate preprocessor altogether.   
So I have tried to install css:install:postcss rename my application.postcss.css to somethingelse.postcss.css my stylesheet link also requires my "somethingelse"
in package.json I have updated build:css command to include both preprocessorlike this 

"build:css": "postcss ./app/assets/stylesheets/somethingelse.postcss.css -o ./app/assets/builds/somethingelse.css --watch && tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css"

Well it will compile both files, and both files are also included in the page, but the import statements are not working (in somethingelse.postcss.css @import "slim-select/dist/slimselect.css"; resolves to nothing) and also my now my profile which contains 

css: yarn build:css --watch
is unable to actually watch any of the files, I have to build css manually.

This is so confusing, the rails docs are missing documentation on this subject I have little to no idea what I should do.

David Kimura PRO said 6 months ago on Slim Select with Stimulus :
This is in part why I prefer esbuild via jsbundling-rails over importmaps. It seems like it brings the familiarity of the asset pipeline (either via sprockets or propshaft) and what we've become accustomed to with Webpacker, but without all of the headaches.

Zaraka said 6 months ago on Slim Select with Stimulus :
I understand that decision.
Anyway, if anyone else runs into these issues, the solution is to use tailwindcss command with --postcss argument, then if postcss-import package is installed import commands starts working correctly and slim-select is resolved and bundled.    

kjk.kuk said 4 months ago on Slim Select with Stimulus :
Hello. If I want to show all categories (about 5 in list with scrolling) with search, so what I should add to controller? In multiple select. smth like this:

rafal.siepak PRO said about 2 months ago on Slim Select with Stimulus :
Hello,

I have encountered two issues:

1) I get the following error with css: 

[ERROR] Could not resolve "slim-select/dist/slimselect.css"
13:16:32 js.1   | 
13:16:32 js.1   |     app/javascript/controllers/select_controller.js:3:7:
13:16:32 js.1   |       3 │ import "slim-select/dist/slimselect.css"
13:16:32 js.1   |         ╵        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
13:16:32 js.1   | 
13:16:32 js.1   |   The path "./dist/slimselect.css" is not exported by package


2) In case of multiple select I get the following error:


undefined local variable or method `group' for #<ActionView::Base:0x00000000028e60>

                group.decks.map { |c| [c.name, c.id] }, {},
                ^^^^^
Did you mean?  group_url

Could you help here? Thank you. 

rafal.siepak PRO said about 2 months ago on Slim Select with Stimulus :
For the first issue, just to let you know. I am using rails 7 with Taiwlind and esbuild. What should I do to make it working?

David Kimura PRO said about 2 months ago on Slim Select with Stimulus :
  rafal.siepak You may want to try and put the css imports in the CSS file. For example, using bootstrap with css-bundling, if I put the @use in the top of the file, it works.

@use "slim-select/dist/slimselect.css";
@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons';
@import 'drifting_ruby';

rafal.siepak PRO said about 1 month ago on Slim Select with Stimulus :
I have made it work by putting directly @import "slim-select/dist/slimselect.css" into application.tailwind.css.

Another question I have is I want to render html under index page, but right now after applying the code I only render json. How to make both work HTML and json?

class CategoriesController < ApplicationController
  def index
    @categories = Category.where("name like ?", "%#{params[:query]}%")
    render json: @categories.map { |c| { value: c.id, text: c.name } }
  end
end

rafal.siepak PRO said about 1 month ago on Slim Select with Stimulus :
I am trying to do apply such.code, but it does not work:

def index
    @decks = Deck.all
    respond_to do |format|
      format.html
      format.json {
        @decks = Deck.where("name ILIKE ?", "%#{params[:query]}%")
        render json: @decks.map { |c| { value: c.id, text: c.name } }}
    end
  end

David Kimura PRO said about 1 month ago on Slim Select with Stimulus :
That was going to be similar to my suggestion. What doesn't work with it? Does the search not work or does the html visit not work?

rafal.siepak PRO said about 1 month ago on Slim Select with Stimulus :
Search does not work, I see results in the dropdown, but as I type it does not provide choices at all. 

David Kimura PRO said about 1 month ago on Slim Select with Stimulus :
  rafal.siepak   It's hard to troubleshoot without more information. But if I had to guess, the logs would probably look something like this.

Processing by CategoriesController#index as */*
  Parameters: {"query"=>"something"}
No template found for CategoriesController#index, rendering head :no_content

If that is the case, then the code for the format.json will not get picked up. You should update your URL in the view where you're passing in the URL into the stimulus controller with the json format. Something like this should work. 

'select-url-value': categories_url(format: :json)

By doing that, it should then respond with the proper format.

Processing by CategoriesController#index as JSON

rafal.siepak PRO said about 1 month ago on Slim Select with Stimulus :
Now it works. Thank you so much David!

Login to Comment