Question

在我的应用程序中，我搜索找到合适的汽车。它工作正常。但现在我想使用ajax。我的搜索基于form_object：

class SearchForm
  include Virtus.model
  include ActiveModel::Naming
  include ActiveModel::Validations
  include ActiveModel::Conversion
  include ActiveModel::Model

  def persisted?
    false
  end

  attribute :car_class, String, default: "A"
  attribute :handover_location, Integer
  attribute :return_location, Integer
  attribute :handover_date, DateTime,
    default: ->(form, attribute) { Time.current }
  attribute :return_date, DateTime,
    default: ->(form, attribute) { form.handover_date + 7.days }
  attribute :car_body_style, Integer
  attribute :car_fuel, Integer
  attribute :car_seats, Integer
  attribute :car_transmission, Integer
  attribute :car_brand, Integer

  def submit
    Car.search({
      handover_date: handover_date,
      return_date: return_date,
      handover_location: handover_location,
      return_location: return_location,
      car_class_id: car_class,
      car_body_style: car_body_style,
      car_fuel: car_fuel,
      car_seats: car_seats,
      car_transmission: car_transmission,
      car_brand: car_brand
    })
  end
end

我有控制器“汽车”，其动作指数负责搜索合适的汽车：

class CarsController < ApplicationController
  before_action :attributes_from_params
  skip_authorization_check

  def index
    @search_form = SearchForm.new(params[:search_form])
    @cars = Car.search(@search_form)
     respond_to do |format|
      format.html
      format.js
    end
  end

  private

  def attributes_from_params
    @car_class = CarClass.where(id: params[:search_form][:car_class]).first.name
    @handover_location = "#{Location.where(id: params[:search_form][:handover_location]).first.name } 
      #{params[:search_form][:handover_date]}"
    @return_location = "#{Location.where(id: params[:search_form][:return_location]).first.name } 
      #{params[:search_form][:return_date]}"
    @handover_date = params[:search_form][:handover_date].to_date
    @return_date = params[:search_form][:return_date].to_date
    @days = @return_date - @handover_date
  end
end

我的索引视图如下所示：

 #reservation.row
  = horizontal_simple_form_for @search_form, {url: cars_path, method: :get, remote: true} do |f|
    .basic_search
      = f.input :handover_location, label: I18n.t('.handover'), collection: Location.all.map{|hl| [hl.name, hl.id]}
      = f.input :handover_date, as: :string, label: false
      = f.input :return_location, label: I18n.t('.return') ,collection: Location.all.map{|rl| [rl.name, rl.id]}
      = f.input :return_date, as: :string, label: false
      = f.input :car_class, label: I18n.t('.car_class') ,collection: CarClass.all.map { |c| [c.name, c.id] }
    #search-results.row
      #search-filters.col-md-3
        %h4.filter-header
          = t('search.car_type')
        .filter-content.car-type
          = f.input :car_body_style, as: :check_boxes, collection: CarBodyStyle.all.map{|x| ["#{x.name}", "#{x.id}"]}, label: false
        %h4.filter-header
          = t('search.seats')
        .filter-content.number-of-people
          .checkbox
            = f.input :car_seats, as: :check_boxes, collection: [["2", "2"], ["3-5", "5"], ["6+", "6"]], label: false
        %h4.filter-header
          = t('search.fuel')
        .filter-content
          = f.input :car_fuel, as: :check_boxes, collection: [["#{t('enumerize.car.fuel.petrol')}", "petrol"], ["#{t('enumerize.car.fuel.petrol_lpg')}", "petrol_lpg"], ["#{t('enumerize.car.fuel.diesel')}", "diesel"]], label: false
        %h4.filter-header
          = t('search.transmission')
        .filter-content
          = f.input :car_transmission, as: :check_boxes, collection: [["#{t('enumerize.car.transmission.manual')}", "manual"], ["#{t('enumerize.car.transmission.automatic')}", "automatic"], ["#{t('enumerize.car.transmission.semiautomatic')}", "semiautomatic"]], label: false
      #search-cars.col-md-9
        = render @cars

        %br/
      = f.submit t('home.search'), class: "btn btn-default pull-right"

和“_car”partial：

.single-car
  .row
    .car-img.col-sm-2.col-md-3.col-lg-4
      = image_tag image_path("portal/car-sample.jpg"), width: "140", height: "26"
    .car-info.col-sm-7.col-md-7.col-lg-6
      %h2= car.car_model
      %p.location
        = car.rental_company.name
        %br/
        = car.rental_company.correspondence_address.to_label if car.rental_company.correspondence_address
      .details
        %span.passengers
          = car.seats
        %span.doors
          = car.doors
        %span.air-conditioning
          = car_air_condition(car)
        %span.gearbox
          = car.transmission.try(:text)
        %span.fuel
          = car_fuel(car)
      .other-details
        = t('search.regulations')
        |
        = t('search.distance_limit')
        BRAK DANYCH
        = image_tag image_path("portal/mastercard.jpg"), width: "26", height: "15"
        = image_tag image_path("portal/visa.jpg"), width: "32", height: "10"
    .car-price.col-sm-3.col-md-2.col-lg-2
      %p.overall-price
        = number_to_currency(car.price_for_day(@handover_date, @return_date) * @days)
      %p.daily-price
        = t('search.for_day')
        = number_to_currency(car.price_for_day(@handover_date, @return_date))
      %p.deposit-price
        = t('search.caution')
        Brak Danych
        = hidden_field :test, "as"
        = link_to t('search.reservate'), new_reservation_path(search_form: params[:search_form], car: car.id), class: 'btn'
  %hr/

我还创建了一个index.js.erb文件，如下所示：

$("#search-cars").html("<%= escape_javascript(render(@cars)) %>");

这个简单的ajax搜索工作正常但我必须单击chceckbox然后单击提交按钮。我想要复选框也是提交按钮。有没有办法做这件事？我没有太多的ajax，所以我会非常感谢你的帮助。

Answer 1

我们之前已经完成了Ajax搜索（您可以查看here）

这样做很简单。我知道你已经修好了，但我想有更多的例子可以给你一些非常好的想法：

-

<强>的Ajax

当你理解

Ajax时非常简单

它基本上通过javascript向您的服务器发出异步请求，允许您在页面上呈现响应。它的工作方式是添加到http protocol（基本上只响应对服务器发出的单个请求）。 Ajax本质上使您能够创建“无刷新”体验

示例

<强>路线

#config/routes.rb match 'search(/:search)', :to => 'products#search', :as => :search, via: [:get, :post]

-

查看（我们使用form_tag - 而不是form object）

<%= form_tag search_path, :method => :post, :id => "SearchForm" do %> <%= text_field_tag :search, params[:search], placeholder: 'Search your favourite products or brands', :autocomplete => :off, :id => 'SearchSearch' %> <%= image_submit_tag('nav_bar/search.png', title: 'Search', class: 'search_submit', data: { "placement" => "bottom" }) %> <% end %>

-

<强>控制器

#app/controllers/products_controller.rb def search @products = Product.search(params[:search]) respond_to do |format| format.js { render :partial => "elements/livesearch", :locals => {:search => @products, :query => params[:search]} } format.html { render :index } end end

-

<强> JS

#app/assets/javascripts/application.js $(document).ready( function() { var base_url = window.location.protocol + "//" + window.location.host; $('#SearchSearch').searchbox({ url: base_url + '/search/', param: 'search', dom_id: '#livesearch', loading_css: '#livesearch_loading' }) });

Answer 2

请按照以下步骤操作：

对复选框更改事件进行AJAX调用。
渲染部分包含要从控制器显示在前端的搜索结果。
使用javascript内部AJAX请求的成功函数替换前端的搜索结果！

这应该可以解决你的问题！：）

Answer 3

我以其他方式做到这一点。我添加了在复选框点击后提交表单的代码。

 $('#search-filters input[type=checkbox]').click ->
    $(this).closest("form").submit()

现在一切正常。

Ruby on Rails搜索ajax

3 个答案: