如何在 rails 4.2.1 中使用 jquery-addresspicker

Posted 2023-05-09

【中文标题】如何在 rails 4.2.1 中使用 jquery-addresspicker

【英文标题】：How to use jquery-addresspicker in rails 4.2.1

【发布时间】：2015-12-24 18:58:04

【问题描述】：

有人知道怎么用吗？ 我尝试过但仍然失败 在我的源控制台中，我收到此错误 未捕获的 ReferenceError：未定义 google

我将 jquery.ui.addresspicker.js 放在我的 vendor/assets/javascripts 文件夹中 这是我的 应用程序.js

//= require jquery
//= require jquery_ujs
//= require jquery-ui/datepicker 
//= require bootstrap
//= require turbolinks
//= require underscore
//= require gmaps/google
//= require jquery.ui.addresspicker
//= require_tree .

我在 application.html.slim 中包含了 googlemaps

head
  = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true
  = javascript_include_tag 'application', 'data-turbolinks-track' => true
  script src="//maps.google.com/maps/api/js?sensor=false" type="text/javascript"

我找到了 gem，但它不支持 rails 4 https://github.com/ddidier/address_picker-rails

这里有类似的问题，但这些问题仍然没有告诉我如何使用 jquery-adresspicker How to use jquery-addresspicker jquery with rails 3.1

更新 我尝试在我的 application.html.slim 中更改脚本的顺序 并把 googlemaps 脚本放在第一位 现在我收到此错误

未捕获的类型错误：$.widget 不是函数

【参考方案1】：

我已经通过使用 bower-rails 使它工作 https://github.com/rharriso/bower-rails/

通过 bower-rails 安装后 调用所需的 js 到 rails 资产管道 (application.js) 我的应用程序.js

...
//= require typeahead.js/dist/bloodhound.js
//= require typeahead.js/dist/typeahead.jquery.js
//= require typeahead-addresspicker/dist/typeahead-addresspicker.js
//= require_tree .

其余的就像你在纯 html 文件中实现它时一样

如果您遵循 readme.md 中的示例代码并且未显示地图，请不要忘记将其添加到您的 css 文件中 我把它放在我的 Model.scss 文件中

#map 
  float:right;
  width: 490px;
  height: 500px;
  border: 1px solid #DDD;

【参考方案2】：

这个 JS 库还有另一个 gem：typeahead-addresspicker-rails。根据 ruby​​gem 规范，它看起来支持 Rails 4。

【讨论】：

啊是的，我知道那个，但不知何故我仍然无法实现它，这就是为什么我尝试使用非打字头的原因，因为它看起来更简单。