【问题标题】:Pre populating Select2 using AJAX - "No Results Found"使用 AJAX 预填充 Select2 - “未找到结果”
【发布时间】:2016-10-30 15:08:40
【问题描述】:

我一直在按照这个示例指南 (http://rails-select2-example.herokuapp.com/) 创建一个 select2 下拉菜单来从我的数据库中搜索国家/地区。

但是,选择框总是以“未找到结果”返回为空。为什么它不会从 js/ajax 中获取值?

查看(new.html.erb)

          <select class="form-control" id="country_select">
          </select>

控制器(Searches_controller.rb)

class SearchesController < ApplicationController
before_action :require_user
respond_to :html, :json

    def new
        @countries = Country.all
        respond_with @countries
    end
end

Javascript

  $('#country_select').select2({
    theme: "bootstrap",
    ajax: {
      url: "<%= user_searches_path(format: 'json') %>",
      dataType: "json",
      results: function(data, page) {
        return { results: $.map( data, function(country, i) { 
          return { id: country.id, text: country.name } 
        } ) }
      }
    }
  });

路线

resources :users do
    resources :searches
  end

搜索迁移

class CreateSearches < ActiveRecord::Migration

  def change
      t.string :country
   end
      add_index :searches, [:user_id, :created_at]

  end
end

【问题讨论】:

    标签: jquery ruby-on-rails ruby-on-rails-4 jquery-select2 select2-rails


    【解决方案1】:

    可以直接使用 Rails Helper Method,而不是使用 AJAX,在国家/地区进行搜索

    见下面的例子:

    在您的 application_helper.rb 文件中创建一种方法:

    def get_country
      Country.pluck(:name,:id)
    end
    

    在您的视图文件中:

    <%= f.select :country_select, get_country, {prompt: 'Select Country'} %>
    

    最后,添加js代码如下:

    $("#country_select").select2({
      placeholder: "Select Country"
    });
    

    【讨论】:

    • 啊哈好吧,我现在试试这个。使用 Rails Helper 而不是 AJAX 有什么好处。既然 AJAX 这么复杂,为什么人们还要使用它?
    • 如果您使用 Rails,在这种情况下,下拉菜单会在初始化时填充选项。而 AJAX 主要用于具有条件条件的情况,例如,如果选择国家,则需要基于国家选择的状态。如果你有任何 JavaScript 错误,那么在这种情况下你的 AJAX 会失败。
    • 好的,我现在收到此错误,#<0x007fc7f79217d0>
    【解决方案2】:

    由于您在新操作中编写了代码,因此您调用的URL是错误的, 如果您想从新操作中调用,

    class SearchesController < ApplicationController
    before_action :require_user
    respond_to :html, :json
    
        def new
            @countries = Country.all
            respond_with @countries
        end
    end
    

    要么像这样更改 ajax 调用中的 url,

      $('#country_select').select2({
        theme: "bootstrap",
        ajax: {
          url: "<%= new_user_search_path(format: 'json') %>",
          dataType: "json",
          results: function(data, page) {
            return { results: $.map( data, function(country, i) { 
              return { id: country.id, text: country.name } 
            } ) }
          }
        }
      });
    

    或者把代码改成索引动作,

    class SearchesController < ApplicationController
    before_action :require_user
    respond_to :html, :json
    
        def index
            @countries = Country.all
            respond_with @countries
        end
    end
    

    然后,你可以使用你的那个网址,

      $('#country_select').select2({
        theme: "bootstrap",
        ajax: {
          url: "<%= user_searches_path(format: 'json') %>",
          dataType: "json",
          results: function(data, page) {
            return { results: $.map( data, function(country, i) { 
              return { id: country.id, text: country.name } 
            } ) }
          }
        }
      });
    

    【讨论】:

    • 嗨@sravan,所以在使用你的新操作后,选择框卡在“搜索”上,我有以下错误
    • Started GET "/users/1/searches/new.json?q=aus" for ::1 由 SearchesController#new 处理为 JSON 参数:{"q"=>"aus", " user_id"=>"1"} 用户负载 (0.1ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? [["id", 1]] 已完成 500 内部服务器错误 ActionView::MissingTemplate - 缺少模板搜索/新建、应用程序/新建 {:locale=>[:en], :formats=>[:json], :variants =>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :jbuilder]}。
    • 那么方法调用是正确的,只需在views/searches中添加new.html.erb文件
    • 奇怪的是已经有了那个页面,javascript 正在从 app/views/searches/new 页面运行。 (new.html.erb)
    • k,因为你已经给了json它的搜索fir一个js文件,添加new.js.erb
    猜你喜欢
    • 2016-03-28
    • 2020-06-30
    • 1970-01-01
    • 2013-06-12
    • 1970-01-01
    • 2015-06-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多