Ruby on Rails 5 中的 Javascript 错误 "Uncaught TypeError: element.popover is not a function"

标签 javascript jquery ruby-on-rails openlayers-3 geojson

我尝试将 geoJSON 层用于 geo.map.admin.ch API。 (参见此处的示例:http://codepen.io/anon/pen/qrGNvy?editors=0010)

效果很好。我也在本地主机中测试了它。

但是当我将其转移到 Ruby on Rails 框架中时,出现错误“Uncaught TypeError: element.popover is not a function”。

我可能必须按照 js 文件的加载顺序进行操作。但即使将所有内容放入index.html.erb 文件中,也会发生错误。

<div style="display: block;">
  <div id="popup" title="TubeCam Standort"></div>
</div>

<script src="http://api3.geo.admin.ch/loader.js?lang=en" type="text/javascript"></script>

<script type="text/javascript">

  var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
  var map = new ga.Map({
    target: 'map',
    layers: [layer],
    view: new ol.View({
      resolution: 50,
      center: [692266, 254661]
    })
  });

...

// Popup showing the position the user clicked
  var popup = new ol.Overlay({
    element: document.getElementById('popup')
  });
  map.addOverlay(popup);

  map.on('singleclick', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) {
      return feat;
    });
    var element = $(popup.getElement());
    element.popover('destroy');
    if (feature) {
      popup.setPosition(evt.coordinate);
      element.popover({
        'placement': 'top',
        'animation': false,
        'html': true,
        'content': feature.get('description')
      }).popover('show');
    }
  });

</script>

有什么建议吗?有什么问题吗?感谢您的帮助。问候

最佳答案

您需要加载jquery和bootstrap:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

查看笔设置。

关于Ruby on Rails 5 中的 Javascript 错误 "Uncaught TypeError: element.popover is not a function",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43259397/

相关文章:

javascript - 如何在 angularJs 中访问 stdclass json 对象?

javascript - 解析特定语言环境中的日期字符串(不是时区!)

javascript - jquery 加载时跳转到 iframe

javascript - 如何使用 gulp-uncss 查看 javascript 文件和 .dust 模板

javascript - div关闭时停止播放YouTube视频

javascript - 如何在 $.getScript 加载的文件内设置 $(document).ready 函数

javascript - 使用 JQuery 在滚动条上隐藏 Div

ruby-on-rails - 没有路由匹配 { :action= >"completed", :controller= >"lifetimes", :lifetime_id=>14} 缺少必需的键:[:id]

ruby-on-rails - value_to_boolean 已弃用;什么是好的替代品?

ruby-on-rails - rails : undefined method `primary_key' for String:Class