<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: marelons1337</title>
    <description>The latest articles on DEV Community by marelons1337 (@marelons1337).</description>
    <link>https://dev.to/marelons1337</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F808557%2Fd390a0d6-4ac6-4cf0-923c-45ddc72c162d.jpeg</url>
      <title>DEV Community: marelons1337</title>
      <link>https://dev.to/marelons1337</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/marelons1337"/>
    <language>en</language>
    <item>
      <title>Specifying a polymorphic has_many through: association in Rails</title>
      <dc:creator>marelons1337</dc:creator>
      <pubDate>Wed, 14 Dec 2022 23:10:36 +0000</pubDate>
      <link>https://dev.to/marelons1337/specifying-a-polymorphic-hasmany-through-association-in-rails-42e7</link>
      <guid>https://dev.to/marelons1337/specifying-a-polymorphic-hasmany-through-association-in-rails-42e7</guid>
      <description>&lt;p&gt;In my recent project that I'm working on I faced this problem where I have a &lt;code&gt;Client&lt;/code&gt; model and two different models for properties, &lt;code&gt;Sale&lt;/code&gt; and &lt;code&gt;Rental&lt;/code&gt;. To avoid having multiple tables for &lt;code&gt;ClientSales&lt;/code&gt; and &lt;code&gt;ClientRentals&lt;/code&gt; I wanted to just have &lt;code&gt;ClientProperties&lt;/code&gt;, and for that I need a polymorphic &lt;code&gt;has_many through:&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In Ruby on Rails, the &lt;code&gt;has_many :through&lt;/code&gt; association is a way of creating a many-to-many connection with an extra model. This association is often used to create a join table that connects two other tables.&lt;/p&gt;

&lt;p&gt;In my example I have three models a &lt;code&gt;Property::Rental&lt;/code&gt;, &lt;code&gt;Property::Sale&lt;/code&gt; model and a &lt;code&gt;Customer::Client&lt;/code&gt; model. A rental can have multiple clients(tenants), and a client can buy multiple properties. To create this association, we need to create a join table called &lt;code&gt;client_properties&lt;/code&gt; that has foreign keys for the client, and property. Since we want to only use one model called &lt;code&gt;Property::ClientProperty&lt;/code&gt; for both of these, we need a polymorphic association.&lt;/p&gt;

&lt;p&gt;First, we our table for &lt;code&gt;property_client_properties&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;CreatePropertyClientProperties&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;ActiveRecord&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Migration&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mf"&gt;7.0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;change&lt;/span&gt;
    &lt;span class="n"&gt;create_table&lt;/span&gt; &lt;span class="ss"&gt;:property_client_properties&lt;/span&gt; &lt;span class="k"&gt;do&lt;/span&gt; &lt;span class="o"&gt;|&lt;/span&gt;&lt;span class="n"&gt;t&lt;/span&gt;&lt;span class="o"&gt;|&lt;/span&gt;
      &lt;span class="n"&gt;t&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;references&lt;/span&gt; &lt;span class="ss"&gt;:client&lt;/span&gt;
      &lt;span class="n"&gt;t&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;integer&lt;/span&gt; &lt;span class="ss"&gt;:property_id&lt;/span&gt;
      &lt;span class="n"&gt;t&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;string&lt;/span&gt; &lt;span class="ss"&gt;:property_type&lt;/span&gt;

      &lt;span class="n"&gt;t&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;timestamps&lt;/span&gt;
    &lt;span class="k"&gt;end&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;:property_type&lt;/code&gt; column will be used to store which model we are actually referring to when passing an id. Let's run &lt;code&gt;rails db:migrate&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Now in our &lt;code&gt;Property::ClientProperty&lt;/code&gt; we only need a few adjustments.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="c1"&gt;# app/models/property/client_property.rb&lt;/span&gt;

&lt;span class="n"&gt;belongs_to&lt;/span&gt; &lt;span class="ss"&gt;:client&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;class_name: &lt;/span&gt;&lt;span class="s1"&gt;'Customer::Client'&lt;/span&gt;
&lt;span class="n"&gt;belongs_to&lt;/span&gt; &lt;span class="ss"&gt;:property&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;polymorphic: &lt;/span&gt;&lt;span class="kp"&gt;true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now that we have a polymorphic &lt;code&gt;:property&lt;/code&gt; association, we can refer to this model outside of it as &lt;code&gt;:property&lt;/code&gt;. Here's how we can use this association with one of our models, for example &lt;code&gt;Property::Sale&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="c1"&gt;# app/models/property/sale.rb&lt;/span&gt;

&lt;span class="n"&gt;has_many&lt;/span&gt; &lt;span class="ss"&gt;:client_properties&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;as: :property&lt;/span&gt;
&lt;span class="n"&gt;has_many&lt;/span&gt; &lt;span class="ss"&gt;:clients&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;through: :client_properties&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;With this setup we can now add a &lt;code&gt;client&lt;/code&gt; to &lt;code&gt;sale&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight irb"&gt;&lt;code&gt;&lt;span class="gp"&gt;irb(main):004:0&amp;gt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;sale&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Property&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Sale&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;last&lt;/span&gt;  
&lt;span class="p"&gt;=&amp;gt;&lt;/span&gt;                                               
&lt;span class="c"&gt;#&amp;lt;Property::Sale:0x0000000109bdd738&amp;gt;
&lt;/span&gt;&lt;span class="err"&gt;
&lt;/span&gt;&lt;span class="gp"&gt;irb(main):005:0&amp;gt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;client&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Customer&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Client&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;last&lt;/span&gt;
&lt;span class="p"&gt;=&amp;gt;&lt;/span&gt;                                
&lt;span class="c"&gt;#&amp;lt;Customer::Client:0x0000000118086308&amp;gt;
&lt;/span&gt;&lt;span class="err"&gt;
&lt;/span&gt;&lt;span class="gp"&gt;irb(main):006:0&amp;gt;&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="n"&gt;sale&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;clients&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&amp;lt;&lt;/span&gt; &lt;span class="n"&gt;client&lt;/span&gt;
&lt;span class="p"&gt;=&amp;gt;&lt;/span&gt;                                
&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="kt"&gt;#&amp;lt;&lt;/span&gt;&lt;span class="no"&gt;Customer&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Client&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mh"&gt;0x0000000118086308&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="no"&gt;Customer&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Client&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="mh"&gt;0x0000000107454018&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, two things are happening when we append another client to this association. One is creating our &lt;code&gt;Property::ClientProperty&lt;/code&gt; record by running INSERT and two, returning a relation with this new record already in it. We can access clients for this sale using normal association methods like &lt;code&gt;sale.clients&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;To finish this up, we want it to be bidirectional, so let's add the rest of the logic on the client side.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="c1"&gt;# app/models/customer/client.rb&lt;/span&gt;

&lt;span class="n"&gt;has_many&lt;/span&gt; &lt;span class="ss"&gt;:client_properties&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;class_name: &lt;/span&gt;&lt;span class="s1"&gt;'Property::ClientProperty'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="ss"&gt;dependent: :destroy&lt;/span&gt;

&lt;span class="n"&gt;has_many&lt;/span&gt; &lt;span class="ss"&gt;:sales&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;through: :client_properties&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;source: :property&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="ss"&gt;source_type: &lt;/span&gt;&lt;span class="s1"&gt;'Property::Sale'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;class_name: &lt;/span&gt;&lt;span class="s1"&gt;'Property::Sale'&lt;/span&gt;

&lt;span class="n"&gt;has_many&lt;/span&gt; &lt;span class="ss"&gt;:rentals&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;through: :client_properties&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;source: :property&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="ss"&gt;source_type: &lt;/span&gt;&lt;span class="s1"&gt;'Property::Rental'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;class_name: &lt;/span&gt;&lt;span class="s1"&gt;'Property::Rental'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, we specify the source_type which is exactly what is going to be inserted into our &lt;code&gt;property_type&lt;/code&gt; column.&lt;br&gt;
And that's it!&lt;/p&gt;

</description>
      <category>rails</category>
      <category>ruby</category>
      <category>webdev</category>
      <category>programming</category>
    </item>
    <item>
      <title>Rails + Stimulus.js sorting filter on select</title>
      <dc:creator>marelons1337</dc:creator>
      <pubDate>Tue, 29 Nov 2022 22:32:45 +0000</pubDate>
      <link>https://dev.to/marelons1337/rails-stimulusjs-sorting-filter-on-select-27oi</link>
      <guid>https://dev.to/marelons1337/rails-stimulusjs-sorting-filter-on-select-27oi</guid>
      <description>&lt;p&gt;In my new project I wanted to introduce sorting on the index page for my records and I came up with this simple Stimulus.js solution.&lt;/p&gt;

&lt;p&gt;First, I created the select&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;select&lt;/span&gt; &lt;span class="na"&gt;aria-label=&lt;/span&gt;&lt;span class="s"&gt;"select"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"id desc"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Latest&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"id asc"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Oldest&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"name asc"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;A-Z&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;option&lt;/span&gt; &lt;span class="na"&gt;value=&lt;/span&gt;&lt;span class="s"&gt;"name desc"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Z-A&lt;span class="nt"&gt;&amp;lt;/option&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/select&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then once i have my element in place I can create a Stimulus controller&lt;/p&gt;

&lt;p&gt;&lt;code&gt;rails g stimulus select&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;And also attach it to my select&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;select&lt;/span&gt; &lt;span class="na"&gt;data-controller=&lt;/span&gt;&lt;span class="s"&gt;"select"&lt;/span&gt; &lt;span class="na"&gt;aria-label=&lt;/span&gt;&lt;span class="s"&gt;"select"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="c"&gt;&amp;lt;!-- content --&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/select&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now, let's attach the action to our element that is responsible for selecting.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="kd"&gt;extends&lt;/span&gt; &lt;span class="nx"&gt;Controller&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;params&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nx"&gt;URLSearchParams&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;search&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="nx"&gt;connect&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// attach action to the element&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dataset&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;action&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;change-&amp;gt;select#filter&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
    &lt;span class="c1"&gt;// set initial params after page load&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sort&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="nx"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;query&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;set&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;sort&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;query&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="nb"&gt;window&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;location&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;search&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;params&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toString&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The reason I'm setting this.element.value in my &lt;code&gt;connect()&lt;/code&gt; method is because of the next method introduced, &lt;code&gt;filter()&lt;/code&gt;. Here I will set the search location of the window object to the params we got from our select. However this will refresh the page and cause the select to reset.&lt;/p&gt;

&lt;p&gt;Last step is adding the actual filtering to the controller, but to make sure that it's safe and user cannot send their own values I also introduce an array of values available in this filter.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight ruby"&gt;&lt;code&gt;&lt;span class="k"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;Property::SalesController&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="no"&gt;ApplicationController&lt;/span&gt;
  &lt;span class="n"&gt;before_action&lt;/span&gt; &lt;span class="ss"&gt;:set_property_sale&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="ss"&gt;only: &lt;/span&gt;&lt;span class="sx"&gt;%i[ show edit update destroy ]&lt;/span&gt;
  &lt;span class="no"&gt;SORT_METHODS&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="s1"&gt;'id asc'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'id desc'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'name asc'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="s1"&gt;'name desc'&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;

  &lt;span class="c1"&gt;# GET /property/sales or /property/sales.json&lt;/span&gt;
  &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;index&lt;/span&gt;
    &lt;span class="vi"&gt;@property_sales&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="no"&gt;Property&lt;/span&gt;&lt;span class="o"&gt;::&lt;/span&gt;&lt;span class="no"&gt;Sale&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;all&lt;/span&gt;
    &lt;span class="vi"&gt;@property_sales&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="vi"&gt;@property_sales&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;order&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;:sort&lt;/span&gt;&lt;span class="p"&gt;])&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;params&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="ss"&gt;:sort&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nf"&gt;presence&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;in?&lt;/span&gt; &lt;span class="no"&gt;SORT_METHODS&lt;/span&gt;
  &lt;span class="k"&gt;end&lt;/span&gt;
&lt;span class="k"&gt;end&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Now our input is safe because only these 4 strings can trigger a database call.&lt;/p&gt;

</description>
      <category>rails</category>
      <category>ruby</category>
      <category>javascript</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Creating model for "related" posts in Rails</title>
      <dc:creator>marelons1337</dc:creator>
      <pubDate>Sat, 23 Apr 2022 21:03:11 +0000</pubDate>
      <link>https://dev.to/marelons1337/creating-model-for-related-posts-in-rails-1610</link>
      <guid>https://dev.to/marelons1337/creating-model-for-related-posts-in-rails-1610</guid>
      <description>&lt;p&gt;I wanted to create a section on my page that leads to related posts. One proposition was to create additional table and store &lt;code&gt;from&lt;/code&gt; and &lt;code&gt;to&lt;/code&gt; ID's of related posts.&lt;/p&gt;



&lt;pre&gt;&lt;code&gt;rails g model post title content&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;First we want to have our model, nothing special about it, just an example Post class.&lt;/p&gt;

&lt;p&gt;Next, we need a class that will connect our related posts.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;rails g model post_connection from_post:references to_post:references&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Here's my migration file, I'm also adding index on both ids to make sure that there can only be one PostConnection per each combination of Post -&amp;gt; Post to avoid duplicate records.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;class CreatePostConnections &amp;lt; ActiveRecord::Migration[7.0]
  def change
    create_table :post_connections do |t|
      t.references :from_post
      t.references :to_post

      t.index [:from_post_id, :to_post_id], unique: true

      t.timestamps
    end
  end
end&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now, I also want to make sure that users will not be able to relate the post to itself. So the only connections available will be p1 -&amp;gt; p2 and p2 -&amp;gt; p1. This p1 -&amp;gt; p1 connection is redundant. &lt;/p&gt;

&lt;pre&gt;&lt;code&gt;class PostConnection &amp;lt; ApplicationRecord
  belongs_to :from_post, class_name: 'Post'
  belongs_to :to_post, class_name: 'Post'

  validate :connection_uniqueness
  validates :from_post_id, uniqueness: { scope: [:to_post_id, :from_post_id], message: 'this connection already exists' }

  def connection_uniqueness
    if self.from_post_id == self.to_post_id
      errors.add(:post_connection, 'must be between two different posts')
    end
  end
end&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;On the Post side, we need to make sure that we can access specific connections. Using dependent: :destroy will make sure that whenever a Post is destroyed, so does connection.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;class Post &amp;lt; ApplicationRecord
  has_many :from_posts, foreign_key: :from_post_id, class_name: 'PostConnection', dependent: :destroy
  has_many :to_posts, foreign_key: :to_post_id, class_name: 'PostConnection', dependent: :destroy

  def post_connections
    from_posts.or(to_posts)
  end
end
&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Now let's see this in action.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;p1 = Post.create(title: "First Post")
=&amp;gt;
#&amp;lt;Post:0x00000001105b6d08                                                                    
 id: 1,                                                                                      
 title: "First Post",                                                                        
 ... &amp;gt;   
p2 = Post.create(title: "Second Post")
=&amp;gt;
#&amp;lt;Post:0x0000000110245d18                        
 id: 2,                                          
 title: "Second Post",                                                            
 ... &amp;gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Adding our Posts we can now create a connection between them.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;pc1 = PostConnection.create!(from_post: p1, to_post: p2)
pc1
=&amp;gt; 
#&amp;lt;PostConnection:0x00000001377a7988              
 id: 1,                                          
 from_post_id: 1,                                
 to_post_id: 2,                                  
 ... &amp;gt;&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Great, we have our connection! Now let's see what happens if we try to add the exact same connection again.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;pc1 = PostConnection.create!(from_post: p1, to_post: p2)

Validation failed: From post this connection already exists (ActiveRecord::RecordInvalid)&lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Awesome, our validation works, and just to double check custom validation that was added to PostConnection we can try assigning a connection from and to the same Post.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;pc1 = PostConnection.create!(from_post: p1, to_post: p1)

Validation failed: Post connection must be between two different posts (ActiveRecord::RecordInvalid)  &lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Nice, custom validation works as expected!&lt;/p&gt;

&lt;p&gt;Let's create a connection in other direction and find all connections for a Post.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;pc2 = PostConnection.create!(from_post: p2, to_post: p1)
pc2
=&amp;gt; 
#&amp;lt;PostConnection:0x0000000116fc2800                                                      
 id: 2,                                                                                  
 from_post_id: 2,                                                                        
 to_post_id: 1,                                                                          
 ... &amp;gt;

p1.post_connections
=&amp;gt;                                                             
[#&amp;lt;PostConnection:0x00000001132d4790                           
  id: 1,                                                       
  from_post_id: 1,                                             
  to_post_id: 2,                                               
  ... &amp;gt;, 
 #&amp;lt;PostConnection:0x00000001132d4650                           
  id: 2,                                                       
  from_post_id: 2,                                             
  to_post_id: 1,                                               
  ... &amp;gt;] &lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Yes, we can access all our connections now! I can also use a specific association to access only one part of PostConnections for specific Post. For example I can select only from_posts to see which connections were created directly from this post.&lt;/p&gt;

&lt;pre&gt;&lt;code&gt;p1.from_posts
=&amp;gt;
[#&amp;lt;PostConnection:0x0000000113064e38                           
  id: 1,                                                       
  from_post_id: 1,                                             
  to_post_id: 2,                                               
  ... &amp;gt;] &lt;/code&gt;&lt;/pre&gt;

&lt;p&gt;Got it! One thing that could probably be done is query optimization when calling post_connections as it uses OR statement which is not very efficient for filtering. Let me know if you have any suggestions to improve this, I hope that it helps you!&lt;/p&gt;

</description>
      <category>rails</category>
      <category>ruby</category>
      <category>tutorial</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Create honeypot against spam bots in Rails</title>
      <dc:creator>marelons1337</dc:creator>
      <pubDate>Wed, 16 Mar 2022 11:15:20 +0000</pubDate>
      <link>https://dev.to/marelons1337/create-honeypot-against-spam-bots-in-rails-1kni</link>
      <guid>https://dev.to/marelons1337/create-honeypot-against-spam-bots-in-rails-1kni</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--JxhC9Gbc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku0fyedifico6as1hisp.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--JxhC9Gbc--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ku0fyedifico6as1hisp.png" alt="google recaptcha in it's prime" width="570" height="674"&gt;&lt;/a&gt;&lt;br&gt;&lt;br&gt;
I was trying to implement something that is less annoying than google recaptcha. Everyone knows that it's quite exhausting for some users. Also I would like to reduce the amount of requests made to google with all gtags, analytics, ads etc. are already slowing the whole internet down.&lt;br&gt;&lt;br&gt;
I found &lt;a href="https://nedbatchelder.com/text/stopbots.html"&gt;this very old article&lt;/a&gt; on how to stop those simpliest bots(in the app I am working on most of the spam came from these basic crawler/spammer types) using a honeypot technique.&lt;br&gt;&lt;br&gt;
Basically whole idea behind honeypot is that you can add some fields to the form that are not visible to the user, but if those simple bots scraping your website will see them, they would probably fill them out. &lt;br&gt;&lt;br&gt;
This article inspired me to try it with a little twist, and here's how it went.&lt;br&gt;&lt;br&gt;
Of course this will be of no use against real human spammers. So you should probably also invest in Akismet.&lt;br&gt;&lt;br&gt;
&lt;/p&gt;

&lt;br&gt;&lt;br&gt;
Let's add some of these strategies mentioned in the article into the controller that is responsible for creating Posts.&lt;br&gt;

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;

&lt;p&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;# clarify time&lt;/code&gt; will make more sense later on. I am using regular names like &lt;code&gt;status&lt;/code&gt; and &lt;code&gt;street_name&lt;/code&gt; for my trap fields, they will be invisible to the user anyway, but bots might have a list of fields to fill out.&lt;br&gt;&lt;br&gt;
Notice how I send &lt;code&gt;status: :ok&lt;/code&gt; when the alert is shown(means it got caught either by timer or by filling the field that should be empty). So for normal human being nothing will really change, but bot will see response &lt;code&gt;200 OK&lt;/code&gt; meaning that he was successful in his posting and will move on.&lt;br&gt;&lt;br&gt;
You should also consider adding blocking IP's after certain amount of tries within short period of time. I have noticed that these bots usually send hundreds of requests/sec, so these should be relatively easy to catch.&lt;br&gt;&lt;br&gt;
You can easily test it as well.&lt;br&gt;&lt;/p&gt;

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;



&lt;br&gt;&lt;br&gt;
Now, let's create a partial that will be used in our views for rendering this honeypot using &lt;code&gt;&amp;lt;%= render 'posts/honeypot' %&amp;gt;&lt;/code&gt; later on.&lt;br&gt;

&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;

&lt;p&gt;&lt;br&gt;&lt;br&gt;
&lt;code&gt;#general-ackbar { display: none;}&lt;/code&gt; will hide out our div, but I am still using &lt;code&gt;css_strategy&lt;/code&gt; to change it as I assume some bots might read css and just ignore some of the fields if they're for example hidden. These are just some ways to obfuscate your fields.&lt;br&gt;&lt;br&gt;
Now, I also obfuscate the time so I can check it once it gets back to the server. In the previous gist you saw that timer is set to 5 seconds. &lt;br&gt;&lt;br&gt;
This can be just changed to any number, just try to fill out your form as fast as you can and then add this time as a value under which you will display the alert.&lt;br&gt;&lt;br&gt;
&lt;/p&gt;

&lt;br&gt;&lt;br&gt;
To summarize, this method will not protect against any advanced bots and human spammers, but it might help you fight those basic robots.&lt;br&gt;&lt;br&gt;
You might also want to add blocking IP's that are sending too many requests and other anti-spam tools.

</description>
      <category>rails</category>
      <category>beginners</category>
      <category>ruby</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Using attr_accessor to clean up your calls between models
</title>
      <dc:creator>marelons1337</dc:creator>
      <pubDate>Tue, 22 Feb 2022 22:53:14 +0000</pubDate>
      <link>https://dev.to/marelons1337/using-attraccessor-to-clean-up-your-calls-between-models-5920</link>
      <guid>https://dev.to/marelons1337/using-attraccessor-to-clean-up-your-calls-between-models-5920</guid>
      <description>&lt;p&gt;In my &lt;a href="https://github.com/marelons1337/kapturek"&gt;glorious real estate management app&lt;/a&gt; I thought that it'd be cool to know how much rent a tenant has to pay without typing &lt;code&gt;tenant.flat.rent&lt;/code&gt; every single time (tenant &lt;code&gt;belongs_to :flat&lt;/code&gt;)&lt;br&gt;
So instead, we can just use &lt;code&gt;attr_accessor :rent&lt;/code&gt; as below. &lt;br&gt;
&lt;/p&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;
&lt;br&gt;
Now I can always access tenant's rent by simply going for &lt;code&gt;tenant.rent&lt;/code&gt;

</description>
      <category>rails</category>
      <category>ruby</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Ensure only one record has specific value for another associated record | Rails 6.1.4</title>
      <dc:creator>marelons1337</dc:creator>
      <pubDate>Sun, 06 Feb 2022 19:51:43 +0000</pubDate>
      <link>https://dev.to/marelons1337/ensure-only-one-record-has-specific-value-for-another-associated-record-rails-614-3199</link>
      <guid>https://dev.to/marelons1337/ensure-only-one-record-has-specific-value-for-another-associated-record-rails-614-3199</guid>
      <description>&lt;p&gt;I couldn't come up with a better title, but for my &lt;a href="https://github.com/marelons1337/kapturek"&gt; app for landlords &lt;/a&gt; I faced a problem where I don't want to remove old tenants. I want to store them in a database for future reference. So that leaves me with problem of making sure that only one tenant can have "active" status at any given time.&lt;/p&gt;

&lt;p&gt;Now, I tried to find a way of forcing that on a database level, but then I thought about rails validations. I can check that on adding or modifying my tenants. And since my app will never be big enough for multiple users to update the same record in DB concurrently, I decided to implement that directly in the app.&lt;/p&gt;




&lt;p&gt;Let's assume our Flat &lt;code&gt;has_many :tenants&lt;/code&gt; and Tenant &lt;code&gt;belongs_to :flat&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;I will take advantage of rails model callback order. And first four go as below:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;a href="https://api.rubyonrails.org/v7.0.1/classes/ActiveModel/Validations/Callbacks/ClassMethods.html#method-i-before_validation"&gt;&lt;code&gt;before_validation&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://api.rubyonrails.org/v7.0.1/classes/ActiveModel/Validations/Callbacks/ClassMethods.html#method-i-after_validation"&gt;&lt;code&gt;after_validation&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://api.rubyonrails.org/v7.0.1/classes/ActiveRecord/Callbacks/ClassMethods.html#method-i-before_save"&gt;&lt;code&gt;before_save&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://api.rubyonrails.org/v7.0.1/classes/ActiveRecord/Callbacks/ClassMethods.html#method-i-around_save"&gt;&lt;code&gt;around_save&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;So now I can use this order to force validation of my record to see if any other tenants are active. If there is another tenant that is active, I won't allow the record to save. Sounds simple to me.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Few things happened above. I use my method &lt;code&gt;determine_active&lt;/code&gt; in my validation. I do that because in my &lt;code&gt;force_one_active&lt;/code&gt; function, it first checks if the tenant should be active at all, then performs a search to check if there are any additional tenants with the same status, if it happens to find that the flat is occupied, it stops the record from saving on a validation level, thus leaving &lt;code&gt;active = false&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--flHSRR7u--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9qc6h6fcglbq950nph6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--flHSRR7u--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9qc6h6fcglbq950nph6.png" alt="Works!" width="880" height="368"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I've also added another function to set flat's &lt;code&gt;taken&lt;/code&gt; value if our current tenant happened to be active.&lt;/p&gt;


&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Now, because this method is in &lt;code&gt;before_save&lt;/code&gt; callback it will never run unless validation has passed successfully, as per order shown previously.&lt;/p&gt;

&lt;p&gt;It's not perfect, but it works for a smaller scale app like mine.&lt;/p&gt;

</description>
      <category>rails</category>
      <category>ruby</category>
      <category>webdev</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Create dynamic dependant dropdowns with Javascript in Rails 6.1.4</title>
      <dc:creator>marelons1337</dc:creator>
      <pubDate>Thu, 03 Feb 2022 09:08:34 +0000</pubDate>
      <link>https://dev.to/marelons1337/create-dynamic-dependant-dropdowns-with-javascript-in-rails-614-4k8j</link>
      <guid>https://dev.to/marelons1337/create-dynamic-dependant-dropdowns-with-javascript-in-rails-614-4k8j</guid>
      <description>&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--FUEpMvE6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://blog.rafaljaroszewicz.com/wp-content/uploads/2022/01/Dependant-dropdowns.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--FUEpMvE6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://blog.rafaljaroszewicz.com/wp-content/uploads/2022/01/Dependant-dropdowns.gif" alt="a gif showing final effect" width="706" height="890"&gt;&lt;/a&gt;What we want to do here&lt;/p&gt;

&lt;p&gt;I managed to pull this stunt off in an &lt;a rel="noopener" href="https://github.com/marelons1337/kapturek"&gt;app&lt;/a&gt; I'm working on. Let's say we want to have a payment module. On top of the form we have three dropdowns. To make things easier for the user, I want these dropdowns to be dependant, so first I choose the building, then another dropdown only server me flats that actually belong to the building and finally after choosing a flat, I will only be able to choose tenant that is living there.&lt;/p&gt;

&lt;p&gt;Key points:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Flat and Tenant dropdowns are empty until previous dropdown has changed.&lt;/li&gt;
&lt;li&gt;After Building and Flat dropdown change, I want to fetch the data for next dropdown.&lt;/li&gt;
&lt;li&gt;I want to use the data from fetch to fill out dropdowns.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;I'm setting up my arrays in the controller so I can access all the data in my view.&lt;/p&gt;
&lt;br&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Now, if I want to fetch any data from the server I will need an endpoint that will allow me to access the data in JSON format so I can easily parse it and fill my dropdowns with it.&lt;br&gt;First, I create entries in my config/routes.rb file.&lt;/p&gt;
&lt;br&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;That will reflect my actions in controllers:&lt;/p&gt;
&lt;br&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Now that I have my backend setup, I can proceed with the front.&lt;/p&gt;
&lt;br&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;Here I have my dropdowns that I need to fill out dynamically.&lt;/p&gt;

&lt;p&gt;At the time of writing this post, Rails 7 has already been released, but I already started my app in 6.1.4 and managed to understand a fraction of webpacker so I decided to stick with it. My JS code is inside javascript folder.&lt;br&gt;&lt;code&gt;app/javascript/forms/fetch_building_data.js&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Also, I added the require statement in &lt;em&gt;application.js&lt;/em&gt;&lt;br&gt;&lt;code&gt;require('forms/fetch_building_data')&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;Here, I load my variables as soon as &lt;em&gt;turbolinks:load&lt;/em&gt; is finished. That's the correct way of adding this handler, because if you try to add &lt;em&gt;DOMContentLoaded&lt;/em&gt; or &lt;em&gt;load&lt;/em&gt; it won't work. Rails way🛤.&lt;/p&gt;

&lt;p&gt;Because I'm also using this script on Tenants view used to create them to have only two dropdowns (for Building and Flat) I have bundled this code into one file.&lt;br&gt;Now, first of all I set up length of dependant &lt;code&gt;select tags&lt;/code&gt; to 1, that way only my placeholder will be available until you actually choose something. The rest of the function takes care of collecting the input from the dropdown&lt;br&gt;&lt;code&gt;buildingSelect.addEventListener('input', function (event)&lt;/code&gt;&lt;br&gt;and storing it &lt;code&gt;let buildingId = event.target.value&lt;/code&gt;&lt;br&gt;Functions at the bottom create options for my select and append them.&lt;/p&gt;
&lt;br&gt;
&lt;div class="ltag_gist-liquid-tag"&gt;
  
&lt;/div&gt;


&lt;p&gt;That's it.&lt;/p&gt;

</description>
      <category>rails</category>
      <category>javascript</category>
      <category>webdev</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
