I am building an app on my local machine. When I precompile and run it in production mode, the compiled javascript stops working. Specifically, I have javascript in one coffeescript file and application.js, both in the assets folder. All other javascript (i.e. jquery in ajax forms, etc) continues to work, which is why I think it must have to do with compilation.
Here is my application.js file:
//= require jquery
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require jquery-ui/dialog
//= require autocomplete-rails
//= require dresssed
//= require raphael
//= require morris
//= require best_in_place
//= require_tree .
$('.label-stock-health').popover({ html : true});
$(document).keypress(function(e) {
if ($('.search-bar').length){
if($(".search-bar").is(":visible")) {
} else {
$(".search-bar").show();
$("#q_name_cont").focus();
}
}
});
$("#spinner").hide();
$(document).ajaxStart(function() {
$("#spinner").fadeIn('slow');
}).ajaxStop(function() {
$("#spinner").hide();
});
$(document).ready(function() {
$(".show-search").click(function(){
if ($('.search-bar').length){
$(".search-bar").toggle();
}
});
$(".best_in_place").best_in_place();
});
This functionality still works in development mode. Additionally, if I hard code the javascript into my layout template, it will work. But without the hardcoding, it does not.
Any advice on what might be the culprit? If not , what is the best way to go about debugging this?
UPDATE #1
The only two errors I am seeing in the Javascript console of Chrome developer tools are posted below. They also show on my localhost development instance, where my javascript functionality is working in full.
Uncaught Google Maps API is required. Please register the following
JavaScript library
http://maps.google.com/maps/api/js?sensor=true.(anonymous function) #
application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9t.(anonymous
function) #
application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9(anonymous function)
# application-6ab26aa5fc5d647a3b5543af7c9838a6.js:9 variants:565 GET
http://www.example.com/bootstrap/glyphicons-halflings-regular.woff2
404 (Not Found)
I did wrote to you in upwork.com how ever here it is... If it is working in local host but when uploaded online stops working than it is permissions problem. I have encounter same problems in godady and blue host. Try playing with permissions. For (on blue host) worked permissions to be set at 5 5 4. or 5 5 5 I did not remember correctly. How ever delete all and reupload with new permissions once you figure out what they should be.
The culprit here is the popover line, you will need to include the popover plugin if you want to use it. Comment it out and deploy your code, it will start working again.
I've just sent you a message on upwork as well, but you should check if removing turbolinks from your application.js files resolves the issue:
//= require jquery
//= require jquery_ujs
//= require turbolinks ** remove this line as turbolinks interferes with javascript occasionally.
//= require_tree .
Please include another file name custom.js and updated
$(document).ajaxStart(function() {
$("#spinner").fadeIn('slow');
});
$(document).ajaxStop(function() {
$("#spinner").hide();
});
Related
Okay, so I installed this gem:
https://github.com/bigtunacan/rails-jquery-autocomplete
And configured it and it works really well, I even used the CSS from one their examples on my web app for autocompletion and it works locally.
Problem was after I pushed to github, I tried pushing to heroku and heroku kept aborting rake assets compilation because of invalid punc. My application.js file is really small and I don't see any errors :/
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require jquery-ui/autocomplete
//= require autocomplete-rails
//= require bootstrap-sprockets
//= require highlight.pack
//= require turbolinks
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('.search-query').bind('railsAutocomplete.select', function(event, data {
$('.search-me').trigger('click')
});
});
jQuery(function($) {
$("tr[data-link]").click(function() {
window.location = this.dataset.link
});
I do have other coffeescript files but those are all empty execept for one listings.coffee
$(document).ready(ready);
$(document).on('page:load', ready);
But I don't think this is causing a problem either.
I've been trying for a week to get autocomplete to work, so I've tried adding multiple libraries and css files to go with them, could that possibly be the problem?
EDIT: If anyone needs to know the site, it's rpastie.xyz ( it's just like a pastebin ) and here's my github repo for it: https://github.com/ilovemysillybanana/pastie I just noticed my repo says it's 72% javascript now because of that library I added, it's huge.
EDIT:
The error I get when I checked the javascript developer console is this:
application.self-1a1712b70bebadf78204351833a15e6960033fd69d5422f3985a596223711942.js:30 Uncaught SyntaxError: Unexpected token {
I assume this means there's an issue on line 30, I've checked but it looks fine to me I don't really understand it.
http://pastebin.com/T1bXxMcy I put it on pastebin, but only a small part of it(only first 50 or so lines, most are comments or white space).
I'm using the free tier of Heroku, if anyone is wondering. I definitely want to undo the last commit I did but I really don't wanna mess things up worse it added all the assets to git and heroku and now the project is huge.
app/assets/javascripts/application.js:
//= require jquery
//= require jquery_ujs
//= require_tree .
//= require bootstrap.min
app/assets/javascripts/economy.js:
$(document).ready(function() {
console.log("loaded file");
});
app/views/economy/index.html.erb:
<%= javascript_include_tag "economy" %>
app/config/initializers/assets.rb:
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( economy.js )
Why doesn't economy.js print anything to the console when a page in my app is loaded?
I tried adding //= require economy.js but that didn't change anything, and should be redundant if I understand how require_tree works.
You're right that it should be automatically included.
The only thing that jumps out, given this level of detail, is that you have //= require bootstrap.min in there and a require should never have a file extension. It may be breaking all the requires. Change that to //= require bootstrap or for the sake of testing economy.js loading or remove it entirely for now.
If that doesn't work, here's a few things to try:
Try an alert("loaded file"); in case there is an issue with you browser console.
Try adding //= require economy without the .js.
Check the browser's sources to see if the file got loaded to narrow down the issue.
Also, don't forget to close your $(document).ready call with a ; at the end of }).
I found the answer. My app/assets/javascripts folder had a file called economy.coffee (for some reason?!), and all I had to do was remove it. I think it was overwriting my js file or something.
I got the following errors,
When I opened the Chrome javascript console,then look insight it.
application.js?body=1:1249
It is just a group of compressed js code
And I've open the in the development.rb
# Expands the lines which load the assets
config.assets.debug = true
I can not grep the any piece of the javascript source code in my Rails app.
So I don't know where does it come from ?
How can I fix the unknown error quickly in Rails ?
Thanks
Uncaught Error: Graph container element not found application.js?body=1:1249
GET http://www.superfish.com/ws/sf_main.jsp?dlsource=vbqxugf&userId=Ei9nuSYzM8NCWiFeoMKLn6&CTID=addtofeedly net::ERR_BLOCKED_BY_CLIENT
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
//= require tinymce-jquery
//= require raphael
//= require morris
//= require_tree .
Make sure sure you are running rails in development mode and
config.assets.compress = false
is set in development.rb
If you do not manage to get the uncompressed version you the another option:
Compressed files can be made "pretty" in Chrome if you click on the {} symbol.
https://developer.chrome.com/devtools/docs/javascript-debugging#pretty-print
This is likely a simple case of bringing external scripts with dependencies into Rails.
I'm trying to get my Adobe Edge generated Animations to work within my Rails app and the first step is to include all of Adobe Edge's generated js files, but so far I'm just getting a bunch of 404 Not Found Errors for all of the Edge files I've included in the Application.js file.
Here's my Application.js file
//= require jquery
//= require jquery_ujs
//= require underscore
//= require backbone
//= require california_internet
//= require hero_edgePreload
//= require edge_includes/edge.1.5.0.min
//= require hero_edge
//= require hero_edgeActions
Here is how Edge's Preloader.js is trying to find some of the files...
aLoader=[{load:"edge_includes/jquery-1.7.1.min.js"},{load:"edge_includes/edge.1.5.0.min.js"},{load:"hero_edge.js"},{load:"hero_edgeActions.js"}]
The way I got this to work was change hero_edgePreload.js to hero_edgePreload.js.erb
And change:
aLoader=[
{load:"edge_includes/jquery-1.7.1.min.js"},
{load:"edge_includes/edge.1.5.0.min.js"},
{load:"hero_edge.js"},
{load:"hero_edgeActions.js"}
];
To:
aLoader=[
// {load:"edge_includes/jquery-1.7.1.min.js"}, Already required in application.js
{load:'<%= asset_path("edge.1.5.0.min.js") %>'},
{load:'<%= asset_path("hero_edge.js") %>'},
{load:'<%= asset_path("hero_edgeActions.js") %>'}
];
You can remove any Adobe Edge JS files from your requires in application.js too.
You'll have to add asset_path to any images in hero_edge.js and change it to hero_edge.js.erb too.
If there's an easier way, I'd love to know it :)
The solution of Michael Johnston of changing Edge's aLoader paths works, but gives errors. While on localhost, I would get Uncaught HierarchyRequestError: A Node was inserted somewhere it doesn't belong. on random basis, while after deployment to Heroku at every page refresh.
Additionally, my app depends on jQuery already in higher version - therefore adding the one from Edge animation could possibly cause conflicts.
After trial and error(s) I decided to use this solution:
place the whole animation into /public/edge folder
put the animation into an iframe: <iframe class="animation-container" src='/edge/animation.html' />
Not the most elegant one, but certainly saves a lot of headaches.
I'm following this tutorial and although adding it to the Gem file and bundle installing it works fine. The moment I try to include it into application.js, the file, I get the following error while loading it:
throw Error("Sprockets::FileNotFound: couldn't find file 'angular'\n (in /my/path/to/rails/app/assets/javascripts/application.js:13)")
application.js file looks like so (starting with line 13):
//= require angular
//= require jquery
//= require jquery_ujs
//= require jquery.ui.autocomplete
//= require bootstrap
//= require pusher.min.js
//= require pusher_setup
//= require_directory .
Therefore, my question is how can I successfully include AngularJS into my Rails project?
I'm currently using Rails 3.2.2, and Ruby 1.9.3.
I had face same problem. I resolved it by following way.
1) In my case, //= require_tree . was missing in application.js file.. so i have added it.
2) Restarted Apache Server (If webrick, then restart it)
After adding a gem you always have to restart the web server.
From looking at the gem's source code, it has the angular javascripts in vendor/assets/javascripts, which means they will be available by just doing //= require angular. If they don't load, it's probably because the server needs to be restarted and you need to bundle install.
As for the require_tree ., I strongly advise against that, because it means you will lose control over the order in which things get loaded.
For example angular itself is packaged with it's own version of jQuery (jQuery-lite), but if there is already jQuery present when it is loaded, it will use the global version.
Which means doing
//= reqiure angular
//= require jquery
will do something different, than
//= require jquery
//= require angular
There are many other cases when load order can matter, for example if you have Backbone.js and Underscore, you will want to load Underscore before Backbone, etc.
As a general practice I would always recommend just using require, unless you're loading your own code where order doesn't matter, for example //= require_tree ./controllers for your own directory of controllers. In that case I'd say require_tree is perfectly ok.
in your gemfile if you are using like this :
group :assets do
gem 'angularjs-rails'
end
then remove that group :assets thing, It should be simple without block:
ex:
gem 'angularjs-rails'
It will definitely work
In case anyone had a same issue and the offered solution wouldn't work.
I have added //= require angular in the asset
group :assets do
//= require angular
end
However still I was getting the same error. After a bit of search I found out that for some reason it needs to be added outside of the assets group. All good now. Not sure if this is a best way though however I am not getting this error anymore.