After I deploy my project on Heroku, I get for the following code in Firebug this error:
ReferenceError: SirTrevor is not defined
<script type="text/javascript" charset="utf-8">
$(function(){
var instances = $('.sir-trevor-area'),
l = instances.length;
while (l>=2) {
instance = $(instances[l]);
new SirTrevor.Editor({ el: instance, blockTypes: ["Video"], defaultType: "Video" });
l--;
};
while (l>=1) {
instance = $(instances[l]);
new SirTrevor.Editor({ el: instance, blockTypes: ["Embedlylink"], defaultType: "Embedlylink" });
l--;
};
while (l>=0) {
instance = $(instances[l]);
new SirTrevor.Editor({ el: instance, blockTypes: ["Heading", "Text", "Image", "Video", "Embedly"], defaultType: "Text" });
l--;
};
});
</script>
Firebug highlights this line "
new SirTrevor.Editor({ el: instance, blockTypes: ["Heading", "Text", "Image", "Video", "Embedly"], defaultType: "Text" });
"
On localhost everything seems fine, no errors. Anyone an idea what the problem could be? Thank you so much for your help! Really appreciated!
UPDATE:
SirTrevor is defined in sir-trevor.js which is successfully loaded via the Rails asset pipeline in the application.js file.
This is my application.js file:
//= require jquery
//= require jquery_ujs
//= require sir-trevor
//= require underscore.js
//= require eventable.js
//= require twitter/bootstrap
//= require jquery.sidr.js
//= require_tree .
Before push to Heroku I do "rake assets:prepile" . On localhost everything seems fine.
The application.html.erb header:
<!DOCTYPE html>
<html>
<head>
<title>Tt</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<link href="//netdna.bootstrapcdn/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
After I deploy my project on Heroku, I get for the following code in Firebug this error:
ReferenceError: SirTrevor is not defined
<script type="text/javascript" charset="utf-8">
$(function(){
var instances = $('.sir-trevor-area'),
l = instances.length;
while (l>=2) {
instance = $(instances[l]);
new SirTrevor.Editor({ el: instance, blockTypes: ["Video"], defaultType: "Video" });
l--;
};
while (l>=1) {
instance = $(instances[l]);
new SirTrevor.Editor({ el: instance, blockTypes: ["Embedlylink"], defaultType: "Embedlylink" });
l--;
};
while (l>=0) {
instance = $(instances[l]);
new SirTrevor.Editor({ el: instance, blockTypes: ["Heading", "Text", "Image", "Video", "Embedly"], defaultType: "Text" });
l--;
};
});
</script>
Firebug highlights this line "
new SirTrevor.Editor({ el: instance, blockTypes: ["Heading", "Text", "Image", "Video", "Embedly"], defaultType: "Text" });
"
On localhost everything seems fine, no errors. Anyone an idea what the problem could be? Thank you so much for your help! Really appreciated!
UPDATE:
SirTrevor is defined in sir-trevor.js which is successfully loaded via the Rails asset pipeline in the application.js file.
This is my application.js file:
//= require jquery
//= require jquery_ujs
//= require sir-trevor
//= require underscore.js
//= require eventable.js
//= require twitter/bootstrap
//= require jquery.sidr.js
//= require_tree .
Before push to Heroku I do "rake assets:prepile" . On localhost everything seems fine.
The application.html.erb header:
<!DOCTYPE html>
<html>
<head>
<title>Tt</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<link href="//netdna.bootstrapcdn./font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet">
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
-
1
Well,
SirTrevoris not defined. Start there. 1) from where isSirTrevorto be defined and; 2) is the resource being successfully loaded? (Use web-browser developer tools to monitor the network requests.) – user2864740 Commented Nov 20, 2013 at 20:55 - Check that all your Javascript files are loading properly. – user1864610 Commented Nov 20, 2013 at 20:55
- The script containing the SirTrevor class isn't loading. – adeneo Commented Nov 20, 2013 at 20:55
- Learn how to debug JavaScript. – Felix Kling Commented Nov 20, 2013 at 21:06
- I guess it's a external script and you didn't prepile it.See in the console if it's not loaded. – Zippie Commented Nov 20, 2013 at 21:08
1 Answer
Reset to default 2In order to close the question a short roundup: Thanks to the help of @iamjpg I finally figured it out.
First I eliminated all the javascript from the <body> and put into separate js files.
Then I adjusted the hierarchy in the application.js file. Sir-Trevor has dependencies to underscore.js and eventable.js, so they have to be higher than sir-trevor.js .
//= require jquery
//= require underscore.js
//= require eventable.js
//= require twitter/bootstrap
//= require jquery_ujs
//= require sir-trevor
//= require jquery.sidr.js
//= require_tree .