Owen

I've solved the problem by using the compressed.js file (which has all the invididual js files compressed into one) instead the individual files. Even though the error is still visible in the inspector all the js on the website is working, so that's enough for the moment.

I’ve managed to install a theme in my Rails app now. However, there’s still some bugs in the js.

Uncaught TypeError: $container.isotope is not a function
windowLoadInit main.js:1358
jQuery 2
windowLoadInit main.js:1354
js main.js:1554
jQuery 2
main.js:1358

From my application.js I’m loading all the js files that came with the theme.

require('./vendor/affix')
require('./vendor/bootstrap-progressbar.min')
require('./vendor/bootstrap.bundle')
require('./vendor/html5shiv.min.js')
require('./vendor/isotope.pkgd.min')
require('./vendor/jflickrfeed.min')
require('./vendor/jquery-3.3.1.min')
require('./vendor/jquery-migrate-3.0.0.min')
require('./vendor/jquery.appear')
require('./vendor/jquery.cookie')
require('./vendor/jquery.countdown.min')
require('./vendor/jquery.countTo')
require('./vendor/jquery.easing.1.3')
require('./vendor/jquery.easypiechart.min')
require('./vendor/jquery.flexslider-min')
require('./vendor/jquery.hoverIntent')
require('./vendor/jquery.localScroll.min')
require('./vendor/jquery.parallax-1.1.3')
require('./vendor/jquery.prettyPhoto')
require('./vendor/jquery.scrollbar.min')
require('./vendor/jquery.scrollTo.min')
require('./vendor/jquery.ui.totop')
// require('./vendor/modernizr-2.6.2.min')
require('./vendor/owl.carousel.min')
require('./vendor/photoswipe')
// require('./vendor/photoswipe-ui.default.min')
// require('./vendor/respond.min')
require('./vendor/spectragram.min')
require('./vendor/superfish')
require('./bootstrap.addons')
require('./compressed')
require('./main')

The bug is related to isotope.pkgd.min and is being caused inside main.js .

// init Isotope
$('.isotope-wrapper').each(function(index) {
var $container = $(this);
var layoutMode = ($container.hasClass('masonry-layout')) ? 'masonry' : 'fitRows';
var columnWidth = ($container.children('.col-md-4').length) ? '.col-md-4' : false;
$container.isotope({
percentPosition: true,
layoutMode: layoutMode,
masonry: {
//TODO for big first element in grid - giving smaller element to use as grid
// columnWidth: '.isotope-wrapper > .col-md-4'
columnWidth: columnWidth
}
});

On line main.js:1358 the isotope method is being called on $container ($container.isotope({…) and the error is saying that $container isn’t a function. I’ve been Googling for an answer, but have so far not found something that could help me.

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

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

});

How can I just add 1 marker of one transaction on the map?

@ChristopheEstanol390XP could you show what your final solution was?

You can see my question also on StackOverflow: https://stackoverflow.com/questions/66940456/searching-through-multiple-models-searchkick

Desired result:

I want 2 things:

In my list of aggregation links I want to be able to add the aggregation of property characteristics (e.g., properties with a balcony), property type (e.g., villa, apartment, studio etc) and property condition (e.g., new, newly renovated, in construction etc.).
In my search form I want to have a select box / radio buttons for characteristics, property type and condition which (1) shows a collection of available items in the database and (2) when I select an item and it searches for all the properties with that characteristic / property type / condition.
Actual result:

When select a property type (like Villa) what I get are all the properties regardless of property type. The same for condition and characteristics.

With aggregation feature of the searchkick gem I'm also not able to show the aggregation of property type, condition or characteristics.

Within the documentation of searchkick they talk about it being able to search thru multiple models, but when I try that out in my controller what I get is the error:

enter image description here

Configuration

I have a rails app (v6.1.0) which has a Property (belongs to property_type, condition and has many characteristics thru characteristic_properties), PropertyType (has_many properties), Condition (has_many properties) and Characteristic (has_many properties thru characteristic_properties) model and I've implemented elastic search thru the searchkick gem.

Since then I've added with the help of seachkick aggregations of property attributes and I've added a Google map which shows where the properties are located on the map. And finally, I've added pagination with the Pagy gem. Taking this in consideration this is how #index looks in the properties_controller.rb

def index
args = {}
args[:surface_plot] = {}
args[:surface_plot][:gte] = params[:surface_plot_min] if params[:surface_plot_min].present?
args[:surface_plot][:lte] = params[:surface_plot_max] if params[:surface_plot_max].present?
args[:q_bathrooms] = {}
args[:q_bathrooms][:gte] = params[:q_bathrooms_min] if params[:q_bathrooms_min].present?
args[:q_bathrooms][:lte] = params[:q_bathrooms_max] if params[:q_bathrooms_max].present?
args[:q_bedrooms] = {}
args[:q_bedrooms][:gte] = params[:q_bedrooms_min] if params[:q_bedrooms_min].present?
args[:q_bedrooms][:lte] = params[:q_bedrooms_max] if params[:q_bedrooms_max].present?
args[:q_bedrooms] = params[:q_bedrooms] if params[:q_bedrooms].present?
args[:region] = params[:region] if params[:region].present?
args[:characteristics] = params[:characteristics] if params[:characteristics].present?
args[:buy] = params[:buy] if params[:buy].present?
args[:rent] = params[:rent] if params[:rent].present?
args[:share] = params[:share] if params[:share].present?
args[:floor] = {}
args[:floor][:gte] = params[:floor_min] if params[:floor_min].present?
args[:floor][:lte] = params[:floor_max] if params[:floor_max].present?
args[:floor] = params[:floor] if params[:floor].present?
args[:surface_interior] = {}
args[:surface_interior][:gte] = params[:surface_interior_min] if params[:surface_interior_min].present?
args[:surface_interior][:lte] = params[:surface_interior_max] if params[:surface_interior_max].present?
args[:sell_price] = {}
args[:sell_price][:gte] = params[:sell_price_from] if params[:sell_price_from].present?
args[:sell_price][:lte] = params[:sell_price_to] if params[:sell_price_to].present?
args[:sell_price][:gte] = params[:sell_price_min] if params[:sell_price_min].present?
args[:sell_price][:lte] = params[:sell_price_max] if params[:sell_price_max].present?
price_ranges = [{ to: 150000 }, {from: 150000, to: 300000}, {from: 300000, to: 500000}, {from: 500000, to: 1000000}, {from: 1000000}]

@properties = if params[:l]

          sw_lat, sw_lng, ne_lat, ne_lng = params[:l].split(",")

          Property.search("*", page: params[:page], per_page: 9, where: {
                              location: { top_left: {
                                  lat: ne_lat,
                                  lon: sw_lng
                                },
                                bottom_right: {
                                  lat: sw_lat,
                                  lon: ne_lng
                                }
                              }
                            },
                            aggs: {
                              region: {},
                              buy: {},
                              rent: {},
                              share: {},
                              sell_price: { ranges: price_ranges },
                              q_bedrooms: {},
                              surface_interior: {},
                              floor: {},
                              characteristics: {},
                              surface_plot: {},
                              q_bathrooms: {}
                            })
        elsif params[:near]
          # Property.near(params[:near]).page(params[:page]).per(9)

          location = Geocoder.search(params[:near]).first
          Property.search "*", page: params[:page], per_page: 9, where: {
            location: {
              near: {
                lat: location.latitude,
                lon: location.longitude
              }, within: "10mi"
            }
          },
          aggs: {
            region: {},
            buy: {},
            rent: {},
            share: {},
            sell_price: { ranges: price_ranges },
            q_bedrooms: {},
            surface_interior: {},
            floor: {},
            characteristics: {},
            surface_plot: {},
            q_bathrooms: {}
          }
        else
          # byebug
          @query = params[:q].presence || "*"
          @properties = Searchkick.search @query, page: params[:page], per_page: 9, models: [Property, PropertyType], where: args, aggs:  {
            region: {},
            buy: {},
            rent: {},
            share: {},
            sell_price: { ranges: price_ranges },
            q_bedrooms: {},
            surface_interior: {},
            floor: {},
            characteristics: {},
            surface_plot: {},
            q_bathrooms: {}
          }
        end

@pagy = Pagy.new_from_searchkick(@properties, link_extra: 'data-remote="true"')
end
And this is how property.rb looks like

class Property < ApplicationRecord
searchkick locations: [:location]
Pagy::SEARCHKICK
geocoded_by :address
after_validation :geocode, if: :address_changed?
has_many_attached :photos
belongs_to :property_type
belongs_to :condition
has_many :characteristic_properties
has_many :characteristics, through: :characteristic_properties
has_many :viewings, dependent: :destroy
has_many :users, through: :viewings
belongs_to :user

def address
[street, city, zip_code].compact.join(", ")
end

def address_changed?
street_changed? || city_changed? || zip_code_changed?
end

def search_data
attributes.merge location: { lat: latitude, lon: longitude }
end
end
This is my search form on the property results page:

<%= form_with url: properties_path, method: :get do |f| %>
<!-- Price -->

<!-- Bedrooms -->

<div data-menu-target="toggleable" class="hidden z-10 origin-top-left absolute left-0 mt-2 max-w-sm w-96 py-4 px-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
  <div class="py-1" role="none">
    <div class="flex flex-col">
      <div class="py-2">
        <div class="flex justify-center py-2">
        <!-- radio_button(object_name, method, tag_value, options = {}) public -->
        <!-- This example requires Tailwind CSS v2.0+ -->
          <div class="flex justify-center">
            <span class="relative z-0 inline-flex shadow-sm rounded-md">
              <% if params[:buy] == "true" %>
                <%= link_to "Buy", request.params.except(:buy), id: "type", class: "relative inline-flex items-center px-3 py-2 rounded-l-md border border-gray-300 text-sm font-medium focus:z-10 focus:outline-none focus:border-white focus:bg-blue-500 focus:text-white hover:no-underline text-white bg-blue-500 duration-300 ease-in-out" %>
              <% else %>
                <%= link_to "Buy", request.params.merge(buy: true), id: "type", class: "relative inline-flex items-center px-3 py-2 rounded-l-md border border-gray-300 text-sm font-medium focus:z-10 focus:outline-none focus:border-white focus:bg-blue-500 focus:text-white hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out" %>
              <% end %>
              <% if params[:rent] == "true" %>
                <%= link_to "Rent", request.params.except(:rent), id: "type", class: "-ml-px relative inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium  focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 hover:no-underline text-white bg-blue-500 duration-300 ease-in-out" %>
              <% else %>
                <%= link_to "Rent", request.params.merge(rent: true), id: "type", class: "-ml-px relative inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium  focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out" %>
              <% end %>
              <% if params[:share] == "true" %>
                <%= link_to "Share", request.params.except(:share), id: "type", class: "-ml-px relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 text-sm font-medium  focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 hover:no-underline text-white bg-blue-500 duration-300 ease-in-out" %>
               <% else %>
                <%= link_to "Share", request.params.merge(share: true), id: "type", class: "-ml-px relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 text-sm font-medium  focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out" %>
               <% end %>
            </span>
          </div>
        </div>
      </div>
      <div class="py-2">
        <div>
          <%= f.label :floor_min, "Floor", class: "mx-1" %>
        </div>
        <div class="flex">
          <%= f.select :floor_min, [["All Floors", ""], ["1st floor and up", "1"], ["2nd floor and up", "2"], ["3rd floor and up", "3"], ["4th floor and up", "4"], ["5th floor and up", "5"]], {}, { class: "mx-1 mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))" } %>
        </div>
      </div>
      <div class="py-2">
        <div>
          <%= f.label :surface_interior_min, "Interior Surface", class: "mx-1" %>
        </div>
        <div class="flex">
          <%= f.number_field :surface_interior_min, value: params[:surface_interior_min], placeholder: "Min", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))", class: "w-full rounded m-1" %>
          <span class="flex items-center"> - </span>
          <%= f.number_field :surface_interior_max, value: params[:surface_interior_max], placeholder: "Max", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))", class: "w-full rounded m-1" %>
        </div>
      </div>
      <div class="py-2">
        <div>
          <%= f.label :surface_plot_min, "Size Plot", class: "mx-1" %>
        </div>
        <div class="flex">
          <%= f.select :surface_plot_min, [["No Min", ""], ["150m²+", "150"], ["200m²+", "200"], ["250m²+", "250"], ["300m²+", "300"], ["350m²+", "350"], ["400m²+", "400"], ["450m²+", "450"], ["500m²+", "500"], ["1000m²+", "1000"], ["1500m²+", "1500"], ["2000m²+", "2000"], ["2500m²+", "2500"], ["3000m²+", "3000"], ["3500m²+", "3500"], ["4000m²+", "4000"], ["4500m²+", "4500"], ["5000m²+", "5000"], ["6000m²+", "6000"], ["7000m²+", "7000"], ["8000m²+", "8000"], ["9000m²+", "9000"], ["1ha+", "10000"], ["2ha+", "20000"]], {}, { class: "mx-1 mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))" } %>
        </div>
      </div>
      <div class="py-2">
        <div>
          <%= f.label :q_bathrooms_min, "Bathrooms", class: "mx-1" %>
        </div>
        <div class="flex justify-center py-2">
          <!-- radio_button(object_name, method, tag_value, options = {}) public -->
          <!-- This example requires Tailwind CSS v2.0+ -->
          <span class="relative z-0 inline-flex shadow-sm rounded-md">
            <button type="button" class="bathroom-btn relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:bg-blue-500 focus:text-white hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out">
              <%= f.radio_button :q_bathrooms_min, "", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))",class: "absolute transform scale-0" %>
              <%= f.label :q_bathrooms_min_1, "Any", class: "cursor-pointer" %>
            </button>
            <button type="button" class="bathroom-btn -ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:bg-blue-500 focus:text-white hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out">
              <%= f.radio_button :q_bathrooms_min, "1", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))",class: "absolute transform scale-0" %>
              <%= f.label :q_bathrooms_min_1, "1+", class: "cursor-pointer" %>
            </button>
            <button type="button" class="bathroom-btn -ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:bg-blue-500 focus:text-white hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out">
              <%= f.radio_button :q_bathrooms_min, "2", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))",class: "absolute transform scale-0" %>
              <%= f.label :q_bathrooms_min_2, "2+", class: "cursor-pointer" %>
            </button>

            <button type="button" class="bathroom-btn -ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:bg-blue-500 focus:text-white hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out">
              <%= f.radio_button :q_bathrooms_min, "3", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))",class: "absolute transform scale-0" %>
              <%= f.label :q_bathrooms_min_3, "3+", class: "cursor-pointer" %>
            </button>
            <button type="button" class="bathroom-btn -ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:bg-blue-500 focus:text-white hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out">
              <%= f.radio_button :q_bathrooms_min, "4", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))",class: "absolute transform scale-0" %>
              <%= f.label :q_bathrooms_min_4, "4+", class: "cursor-pointer" %>
            </button>
            <button type="button" class="bathroom-btn -ml-px relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:bg-blue-500 focus:text-white hover:no-underline hover:text-white hover:bg-blue-500 duration-300 ease-in-out">
              <%= f.radio_button :q_bathrooms_min, "5", onchange: "this.form.dispatchEvent(new Event('submit', {bubbles: true}))",class: "absolute transform scale-0" %>
              <%= f.label :q_bathrooms_min_5, "5+", class: "cursor-pointer" %>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Hello folks,
I’m trying to do a search query through an association. Here’s what I have.
I have Property model which has_many :characteristics, as: characteristicable on one side. On the other side I have Characteristic model which belongs_to :characteristicable, polymorphic true .
I use Elastic Search in my rails app with the searchkick gem. What I’m trying to achieve is to search for characteristics in the Property model so that I can show all the properties that have that characteristic.
I’ve been playing around inside rails c and go something, but not quite what I’m looking for yet:

characteristic = Characteristic.find_by name: "Airconditioning"
# this finds the first instance with name "Airconditioning" in the Characteristics table
characteristic.characteristicable
# this gets the property that is linked to this instance of characteristic
characteristic = Characteristic.joins(:characteristicable).where name: "Airconditioning"
=> #<Characteristic::ActiveRecord_Relation:0x4d94>
#<Characteristic:0x00007fd694a789e8
  id: 20,
  name: "Airconditioning",
  description: nil,
  created_at: Sun, 21 Mar 2021 20:48:01.046319000 UTC +00:00,
  updated_at: Sun, 21 Mar 2021 20:48:01.046319000 UTC +00:00,
  characteristicable_type: "Property",
  characteristicable_id: 4,
  user_id: 1>,
[48] pry(main)> characteristic = Characteristic.joins(:characteristicable).where characteristicable_type: "Property"
=> #<Characteristic::ActiveRecord_Relation:0x4da8>
[49] pry(main)> characteristic
=> #<Characteristic::ActiveRecord_Relation:0x4da8>
[50] pry(main)> characteristic.find_by name: "Airconditioning"
ActiveRecord::EagerLoadPolymorphicError: Cannot eagerly load the polymorphic association :characteristicable
from /Users/owenmoss/.rbenv/versions/2.7.2/lib/ruby/gems/2.7.0/gems/activerecord-