admin管理员组

文章数量:1335617

I have a Ruby Rails application which utilizes jQuery, and am trying to load plugins but it is not working; the scripts are loaded in the "correct" order (i.e., jquery, jquery_ujs, plugins, own scripts) but any plugin function (specifically testing niceScroll and jScrollPane) fails with "Type Error: 'undefined' is not a function". In Web Inspector I can see that the plugin scripts are loaded successfully after the jQuery script, but I simply cannot get it to work.

jQuery itselt works pletely fine, and in fact Turbolinks and jQuery turbolinks works fine as well. However, trying to call "$('.something').niceScroll" (or any other plugin) yields the above-mentioned type error.

Here is my aplication.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery.turbolinks
//= require socket.io
//= require jquery.jscrollpane.min
//= require jquery.mousewheel
//= require auctions

Which, when placed in the application layout, yields this (partial) html:

<head>
  <title>Slamlaunch</title>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/active_admin.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/auctions.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/marketing/marketing.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/patches.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/products.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css">
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/turbolinks.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.turbolinks.js?body=1" type="text/javascript"></script>
<script src="/assets/socket.io.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.jscrollpane.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.mousewheel.js?body=1" type="text/javascript"></script>
<script src="/assets/auctions.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param">
<meta content="LzMLqv0Sb7+89JGe0U5x2ZGkECJ4l1gfbiD/81jFJD4=" name="csrf-token">
</head>

Also, yes, all of the relevant code is executed either in a $(function(){}) block or in the console, long after all libraries are loaded.

I have a Ruby Rails application which utilizes jQuery, and am trying to load plugins but it is not working; the scripts are loaded in the "correct" order (i.e., jquery, jquery_ujs, plugins, own scripts) but any plugin function (specifically testing niceScroll and jScrollPane) fails with "Type Error: 'undefined' is not a function". In Web Inspector I can see that the plugin scripts are loaded successfully after the jQuery script, but I simply cannot get it to work.

jQuery itselt works pletely fine, and in fact Turbolinks and jQuery turbolinks works fine as well. However, trying to call "$('.something').niceScroll" (or any other plugin) yields the above-mentioned type error.

Here is my aplication.js:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require jquery.turbolinks
//= require socket.io
//= require jquery.jscrollpane.min
//= require jquery.mousewheel
//= require auctions

Which, when placed in the application layout, yields this (partial) html:

<head>
  <title>Slamlaunch</title>
  <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/active_admin.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/auctions.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/marketing/marketing.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/patches.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/products.css?body=1" media="all" rel="stylesheet" type="text/css">
<link href="/assets/sessions.css?body=1" media="all" rel="stylesheet" type="text/css">
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-transition.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-affix.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-alert.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-button.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-carousel.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-collapse.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-dropdown.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-modal.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-scrollspy.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tab.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-typeahead.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap.js?body=1" type="text/javascript"></script>
<script src="/assets/turbolinks.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.turbolinks.js?body=1" type="text/javascript"></script>
<script src="/assets/socket.io.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.jscrollpane.min.js?body=1" type="text/javascript"></script>
<script src="/assets/jquery.mousewheel.js?body=1" type="text/javascript"></script>
<script src="/assets/auctions.js?body=1" type="text/javascript"></script>
<script src="/assets/application.js?body=1" type="text/javascript"></script>
  <meta content="authenticity_token" name="csrf-param">
<meta content="LzMLqv0Sb7+89JGe0U5x2ZGkECJ4l1gfbiD/81jFJD4=" name="csrf-token">
</head>

Also, yes, all of the relevant code is executed either in a $(function(){}) block or in the console, long after all libraries are loaded.

  • javascript
  • jquery
  • ruby-on-rails-3.2
Share Improve this question edited Jan 23, 2013 at 17:43 Shane Kamar asked Jan 23, 2013 at 15:46 Shane KamarShane Kamar 311 silver badge4 bronze badges 6
  • 1 please provide some code.. sply where the scripts are being loaded – Parv Sharma Commented Jan 23, 2013 at 15:47
  • You should provide some code that is related to where you load these plugins. – Alpay Commented Jan 23, 2013 at 15:48
  • 2 if $ is undefined, either $.noConflict is being called or jquery isn't being included. If <insertpluginname> is undefined, you are either including jQuery twice, or the plugin isn't being included. – Kevin B Commented Jan 23, 2013 at 15:49
  • what does alert(jQuery.jquery); show? – Mark Schultheiss Commented Jan 23, 2013 at 15:53
  • alert(jQuery.jquery) shows "undefined" – Shane Kamar Commented Jan 23, 2013 at 17:44
 |  Show 1 more ment

2 Answers 2

Reset to default 5

This problem arises mostly because of incorrect loading of script which according to you isn't your case
try putting all the code inside a 

$(function(){
//your code
})

also check to see the jquery isn't being downloaded twice

Try putting all your codes inside the following enclosure. It works then, worked for me. Might be the problem that plugins might not be loaded fully, so for that "$(document).ready(function(){})" is called. After that it works like a charm.

 (function($){

    $(document).ready(function(){

    //Your plugin functions to be called here.

    });


    })(jquery);

If you use "$(document).ready(function(){})" in the following

$(function(){});

It won't work. Don't know why.

本文标签： javascriptjQuery plugins not working quotType Error 39undefined39 is not a functionquotStack Overflow

版权声明：本文标题：javascript - jQuery plugins not working... &quot;Type Error: &#39;undefined&#39; is not a function&quot; - Stack 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742391163a2466018.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。