ruby - 当我在 ruby​​ on Rails 中使用 filterrific 和 will_paginate 时，javascript 无法正常工作

Question

我在 Rails 4.2.5 和 filterrific 和 will_paginate 3.0.6 gems 上使用 ruby​​。但是，当我选择任何复选框时，我的 javascript 就会损坏并且无法工作。

这是我的 js 文件

$('.spin span:last-child').click(function(){
    inputValue = parseInt($(this).parent().find($('.custom-input')).val());
    inputValue += 1
    $(this).parent().find($('.custom-input')).val(inputValue);
    unitPrice = parseFloat($(this).closest('.product').find('.unit-price span').text().substring(3));
    subTotal = parseFloat(inputValue * unitPrice).toFixed(2);
    $(this).closest('.product').find('.total-price span').text(subTotal);

});

它是我的index.html.haml 对我的产品进行排序

.flex-container.products.wrapper.no-flex
 .flex-container.relative
  = form_for_filterrific @filterrific do |f|
  .flex-item.sort-items<
    Sort for
    .select-style
      = f.select(:sorted_by, @filterrific.select_options[:sorted_by], id: 'sort-select', include_blank: 'Seleccionar')
  .filter-items.panel.panel-body
    %h3.no-margin Mostrar por
    %h4<
      Type
      %i.fa.fa-chevron-down>
      %i.fa.fa-chevron-up
    %ul
      - @filterrific.select_options[:with_brand].each do |brand|
        %li
          = f.check_box :with_brand, { multiple: true, id: "filterrific_#{brand.name}", class: 'custom-checkbox' }, brand.id
          = f.label brand.name, class: 'custom-label'
    %h4<
      Category
      %i.fa.fa-chevron-down>
      %i.fa.fa-chevron-up

我的产品_controller.rb

class ProductsController < ApplicationController
def index
@filterrific = initialize_filterrific(
  DistributorProduct,
  params[:filterrific],
  select_options: {
    sorted_by: DistributorProduct.options_for_sorted_by,
    with_brand: Brand.select(:id, :name),
    with_category: Category.select(:id, :name),
    with_distributor: Distributor.select(:id, :name),
    with_presentation: Presentation.select(:id, :name)
  },
  persistence_id: false
) || return
@distributor_products = @filterrific.find.page(params[:page]).search_query(params[:category], params[:search]).includes(:product)
@order_item = current_order.order_items.new
@brands = Brand.all
@categories = Category.all
@distributors = Distributor.all
@presentations = Presentation.all
end
end

和我的distributor_product.rb模型

class DistributorProduct < ActiveRecord::Base
filterrific(available_filters: [
            :sorted_by,
            :search_query,
            :with_brand,
            :with_category,
            :with_distributor,
            :with_presentation])

  self.per_page = 9

belongs_to :distributor
belongs_to :product
has_many :sub_order_items
has_many :order_items

scope :search_query, lambda { |field, query|
 return nil if query.blank?
 query = "%#{query.downcase}%"
 k, value = field.split('-')
 key = k == 'sc' ? 'sub_categories' : 'categories'
 joins(product: { categories: :sub_categories }).where(key => { id:  value.to_s }).where('LOWER(products.name) LIKE ?', query).distinct
 }

scope :sorted_by, lambda { |sort_option|
direction = (sort_option =~ /desc$/) ? 'desc' : 'asc'
case sort_option.to_s
when /^created_at_/
  order("distributor_products.created_at #{direction}")
when /^name_/
  order("distributor_products.name #{direction}")
when /^unit_price_/
  order("distributor_products.unit_price #{direction}")
else
  raise(ArgumentError, "Invalid sort option: #{sort_option.inspect}")
end
}

scope :with_brand, lambda { |brand_id|
return nil if brand_id.uniq == ['0']
joins(:product).where(products: { brand_id: brand_id })
}

scope :with_category, lambda { |category_id|
 return nil if category_id.uniq == ['0']
 joins(product: :categories).where(categories: { id: category_id })
}

scope :with_distributor, lambda { |distributor_id|
return nil if distributor_id.uniq == ['0']
where(distributor_id: distributor_id)
}

 scope :with_presentation, lambda { |presentation_id|
  return nil if presentation_id.uniq == ['0']
  joins(:product).where(products: { presentation_id: presentation_id  })
}

def self.options_for_sorted_by
 [
   ['Nombre (a-z)', 'name_asc'],
   ['Nombre (z-a)', 'name_desc'],
   ['Precio (menor a mayor)', 'unit_price_asc'],
   ['Precio (mayor a menor)', 'unit_price_desc']
  ]
end

def image_url
  "https://s3-sa-east-1.amazonaws.com/riqraops/catalogo/#{image}.png"
end
end

所以，我不知道为什么当我选中一个复选框时我的 js 不起作用，我需要重新加载该页面:/，谢谢您的回复。

Answer 1

原因可能在于turbolinks。尝试将其添加到您的 Gemfile 中:

gem 'jquery-turbolinks'

然后运行 ​​bundle install 并将其按以下顺序添加到您的 application.js 中:

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//
// ... your other scripts here ...
//
//= require turbolinks

重新启动服务器并重试。希望这会对您有所帮助。