“未捕获的TypeError:$(...).popover不是函数" RoR-Bootstrap-jQuery [英] "Uncaught TypeError: $(...).popover is not a function" RoR - Bootstrap - jQuery

问题描述

我已经检查了这个关于SO的问题，因为我有类似的问题与铁轨. 我正在尝试使AJAX请求正常工作(查找一些财务行情自动收录器)，并且我认为我对我的代码没问题(至少希望如此)，但是我仍然遇到这个奇怪的错误:

I've checked out this question on SO because I have a similar problem with rails. I'm trying to make an AJAX request work (looking up some financial tickers) and I think that I'm ok with my code (at least I hope) but I'm still getting this weird error:

bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js:3 Uncaught TypeError:$(...).popover不是一个函数 在HTMLDocument. (bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js:3) 着火(jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3233) at Object.fireWith [as resolveWith](jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3363) 在Function.ready(jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3583) 在HTMLDocument.completed(jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3618)

bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js:3 Uncaught TypeError: $(...).popover is not a function at HTMLDocument. (bootstrap.self-fdc98dee79ee88255e10cac6caa91338165cb76cf0d263744d8d90011fc2ef8f.js:3) at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3233) at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3363) at Function.ready (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3583) at HTMLDocument.completed (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js:3618)

这是我的脚本:

var init_stock_lookup;

init_stock_lookup = function() {
  $('#stock-lookup-form').on('ajax:success', function(event, data, status) {
    $('#stock-lookup').replaceWith(data);
    init_stock_lookup();
  })
}

$(document).ready(function() {
  init_stock_lookup();
})

这是页面:

<div id="stock-lookup">
  <h3>Search for stocks</h3>
  <%= form_tag search_stocks_path, remote: true, method: :get, id: 'stock-lookup-form' do %>
    <div class="form-group row no-padding text-center col-md-12">
      <div class="col-md-10">
        <%= text_field_tag :stock, params[:stock], placeholder: "Stock ticker symbol", autofocus: true, class: 'form-control search-box input-lg' %>
      </div>
      <div class="col-md-2">
        <%= button_tag(type: :submit, class: "btn btn-lg btn-success") do %>
          <i class="glyphicon glyphicon-search"></i> Look up a stock
        <% end %>
      </div>
    </div>
  <% end %>
  <% if @stock %>
    <div id='stock-lookup-results' class="well results-block">
      <strong>Symbol:</strong> <%= @stock.ticker %>
      <strong>Name:</strong> <%= @stock.name %>
      <strong>Price:</strong> <%= @stock.price %>
    </div>
  <% end %>

gem文件:

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.1'
gem 'devise'
gem 'twitter-bootstrap-rails'
gem 'devise-bootstrap-views'
gem 'sprockets-rails', :require => 'sprockets/railtie'
gem 'jquery-rails'
gem 'jquery-turbolinks', '~> 2.1'
gem 'stock_quote'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  gem 'sqlite3'
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

以及指向我的gitHub存储库的链接: https://github.com/Ardzii/finance-tracker

and the link to my gitHub repo : https://github.com/Ardzii/finance-tracker

我正在使用RoR和Bootstrap(Twitter). 从我之前提供的SO链接中了解到，我遇到了jQuery冲突，但我不知道在哪里以及最重要的是如何解决它...

I'm using RoR and Bootstrap (twitter). What I understand from the SO link I provided earlier is that I'm having jQuery conflicts but I have no idea where and, most of all, how to fix it...

与往常一样感谢您的帮助！

Thanks as usual for your help guys!

------编辑. ----------- 这是我的application.js供参考(感谢Hieu的回答，我添加了//require twitter/bootstrap行).

------ EDIT . ----------- Here's my application.js for references (I added the //require twitter/bootstrap line thanks the Hieu's answer).

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require twitter/bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

推荐答案

您必须在application.js

...
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require turbolinks
//= require_tree .
...

它在这里: https://github.com/seyhunak/twitter-bootstrap -rails#using-javascript

这篇关于“未捕获的TypeError:$(...).popover不是函数" RoR-Bootstrap-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！