“Uncaught TypeError: $(…).popover is not a function” RoR - Bootstrap - jQuery

匿名 (未验证) 提交于 2019-12-03 01:06:02

问题:

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 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)

Here's my script:

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(); }) 

Here's the page:

<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 %> 

The gem file:

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 

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

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!

------ 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 . 

回答1:

You have to add //= require twitter/bootstrap into your application.js

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

It's here: https://github.com/seyhunak/twitter-bootstrap-rails#using-javascript



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!