Rails 4 jQuery与javascript冲突 [英] Rails 4 jQuery conflicts with javascript

问题描述

我正试图在Rails 4中创建一个应用程序。

Im trying to make an app in Rails 4.

我正在努力。我正在尝试合并一个bootstrap主题，我遇到了供应商javascripts和其余代码的问题。

I'm struggling. I'm trying to incorporate a bootstrap theme and I'm getting issues with the vendor javascripts and the rest of the code.

我认为这个问题可能有些事情要做在我的application.js中使用jQuery，然后使用以'$'符号开头的供应商.js文件：

I think the problem might have something to do with having jQuery in my application.js and then having vendor .js files which start with a '$' sign:

$.circleProgress = {

我刚读过这个： https://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

我的问题是虽然我不知道如何进行更改以使代码安全。

My problem is though that I don't know how to make the changes that make the code safe.

我是否需要搜索供应商文件中的每个'$'，或者我如何在jQuery上安装一个安全的包装器 - 特别是在通过gem合并它的地方。

Do I need to do a search for every '$' in the vendor files or otherwise how do i put a safe wrapper on jQuery - especially where it is incorporated through a gem.

有没有人遇到过这些问题并找到了解决方案？我很乐意帮忙。

Has anyone encountered these problems and figured out a solution? I'd love some help.

Application.js

Application.js

//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require html.sortable
//= require disqus_rails
//= require moment
//= require bootstrap-datetimepicker
//= require pickers
//= require main
//= require hammer.min
//= require jquery.animate-enhanced.min
//= require jquery.countTo
//= require jquery.easing.1.3
//= require jquery.fitvids
//= require jquery.magnific-popup.min
//= require jquery.parallax-1.1.3
//= require jquery.properload
//= require jquery.shuffle.modernizr.min
//= require jquery.sudoSlider.min
//= require jquery.superslides.min
//= require masonry.pkgd.min
//= require rotaterator
//= require smoothscrolljs
//= require waypoints.min
//= require wow.min
//= require gmaps/google
//= require chosen-jquery
//= require cocoon
//= require imagesloaded.pkgd.min
//= require isotope.pkgd.min
//= require jquery.counterup.min
//= require jquery.pjax
//= require custom.js
//= require slider
//= require underscore
//= require dependent-fields
//= require_tree .
//= require bootstrap-slider


$(document).ready(function() {
    DependentFields.bind()
});

相关问题： Rails 4 - 合并供应商资产

观察

我注意到错误的控制台日志显示我的app / assets / javascripts文件夹中的.js文件存在问题。

I've noticed that the console log of errors shows problems with .js files in my app/assets/javascripts folder.

它们是该文件夹中唯一的其他文件（除了application.js）。我的application.js有'require_tree'所以它们将被编译。但我认为这些文件中可能存在冲突（可能）在application.js中包含jQuery？

They are the only other files in that folder (aside from application.js). My application.js has 'require_tree' so they will be compiled. But something I think might be conflicting in those files with (perhaps) the inclusion of jQuery in the application.js?

日志显示：

Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
circle-progress.self-f67ec54c54a06da27d11cda862036a058792eadc8ef982df2e7c0a1682536c31.js:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined
conversations.self-832ece2867c1701a5202459ab73ecd6432da2a6c833d8822d37025845a0aefcc.js:10 Uncaught TypeError: $ is not a function
organisations.self-6547f734e3a69b76176dfe5bb194e428c0bc560ad3fb69811dce9c7f8ccb9f4d.js:2 Uncaught TypeError: $ is not a function
http://localhost:3000/assets/%3C%=%20asset_path('random.jpg')%20%%3E Failed to load resource: the server responded with a status of 400 (Bad Request)
http://localhost:3000/profiles/assets/images/grayscale.svg#greyscale Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/profiles/assets/custom/images/preloader.gif Failed to load resource: the server responded with a status of 404 (Not Found)
chrome-extension://mkjojgglmmcghgaiknnpgjgldgaocjfd/content/contentScripts/kwift.CHROME.min.js:1384 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
http://localhost:3000/assets/flaticon.woff Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/vendor/assets/fonts/Simple-Line-Icons.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:3000/assets/flaticon.ttf Failed to load resource: the server responded with a status of 404 (Not Found)
main.self-5888479bd3eb03114ce5776dd32cfadf84f1d3a4335043513f8b1606d3ab5f4a.js:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a function

每个js文件夹被识别为错误被保存为app / assets / javascripts中的.js文件。

Each of the js folders that are identified as errors are saved as .js files in app/assets/javascripts.

我是否需要使用不同的文件名（.js.erb / js.coffee）？使这项工作。或者，我是否需要在这些文件的内容周围添加脚本标记？

Do I perhaps need to use a different file name (.js.erb / js.coffee)? to make this work. Alternatively, do I need to put script tags around the content of those files?

例如，第一个文件打开时带有：

For example, the first file opens with:

$.circleProgress = {
    // Default options (you may override them)
    defaults: {
        /**
         * This is the only required option. It should be from 0.0 to 1.0
         * @type {float}
         */
        value: 0,

更新

我认为我的问题的一部分是与app /中保存的文件有关带有.js扩展名的assets / javascripts。它们中的每一个都在控制台错误列表中显示为：

I think some part of my problem is to do with the files saved in app/assets/javascripts with ".js" extensions. Each of them shows in the console errors list as:

kwift.CHROME.min.js:1271Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared
circle-progress.self-f67ec54….js?body=1:9 Uncaught TypeError: Cannot set property 'circleProgress' of undefined(anonymous function) @ circle-progress.self-f67ec54….js?body=1:9
conversations.self-832ece2….js?body=1:10 Uncaught TypeError: $ is not a function(anonymous function) @ conversations.self-832ece2….js?body=1:10
organisations.self-6547f73….js?body=1:2 Uncaught TypeError: $ is not a function(anonymous function) @ organisations.self-6547f73….js?body=1:2(anonymous function) @ organisations.self-6547f73….js?body=1:6
projects.self-9c019ba….js?body=1:1 Uncaught TypeError: $ is not a function(anonymous function) @ projects.self-9c019ba….js?body=1:1
main.self-5888479….js?body=1:316 Uncaught TypeError: dp(...).multipleFilterMasonry is not a functionwindow.onload @ main.self-5888479….js?body=1:316
kwift.CHROME.min.js:1271 Uncaught SyntaxError: Identifier 'findGoodContent' has already been declared

推荐答案

我把这篇文章作为上班工作。

I put this post out as a job on upwork.

解决方案很复杂，但万一它可以帮助其他人理解出了什么问题：

The solution is complex, but in case it helps others to understand what's gone wrong:

1. 一些宝石需要jQuery特征。这可能与application.js中jQuery的一般包含冲突 - 我编写了一些特定的代码来管理特定的冲突。

1. some gems require jQuery features. That can clash with the general inclusion of jQuery in application.js - I had some specific code written to manage specific conflicts.

在application.js中，你需要按顺序列出所有需求，以便依赖关系低于依赖于它们的js文件。很难知道哪个文件取决于什么。我从来没有单独想过这个

in application.js, you need to list all the requirements in order, so that dependencies are below the js file that depends on them. Its difficult to know which file depends on what. I never would have figured this out alone

我的rake资产：预编译调用将编译后的资产放在公共文件夹中。我覆盖了这个，因为它导致与其他调用冲突（特别是当文件更新时）。

my rake assets:precompile call puts compiled assets in the public folder. I overrode this because it was causing conflicts with other calls (especially when files are updated).

没有真正的为任何想要学习的人提供帮助。我自己并没有完全学会如何解决这些问题，但我确实找到了一位上班的专家，他能够帮助我继续前进。

There is no real help in this answer for anyone trying to learn. I didn't exactly learn how to solve these problems myself, but I did find an expert on upwork, who was able to help so that I could move on.

I恐怕这是博客教程无法解决的那些混乱问题之一。

I'm afraid this is one of those messy problems that the blog tutorials don't help with.

这篇关于Rails 4 jQuery与javascript冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！