I am trying to precompile and use Bootstrap Toggle with Ruby on Rails on Heroku.
Here is the JavaScript console error I am getting when I compile the bootstrap-toggle.min.js.map file that also comes with the css and js files,
Uncaught SyntaxError: Unexpected token :
application-4df1877ce16cb310440b73a84d39fd58.js:14555
And the error line is a long json object that basically looks like,
{"version":3,"file":"bootstrap-toggle.min.js", ... }
Why am I getting this JavaScript error?
And also, should I have this line in my application.js file?
//= require bootstrap-toggle.min.js.map
UPDATE:
If someone does want to look into why I can't precompile json with getting JavaScript console errors that is great. I found a work around by not precompiling the json at all at including it in my public/assets folder. I updated the linked to that folder.
Related
I'm trying to include riot.js tags into my project so that I can reuse components. The app runs on Node+Express and uses Pug for templating.
I have a route that renders the following page:
include includes/header.pug
link(rel="stylesheet" href="/styles/kaljasakot.css" type="text/css")
body(id='bootstrap-override')
div(class='container-fluid')
div(class='header')
img(class='okklogo' src='img/okkimg.jpeg' height='80' width='130')
h1 Kaljasakot
kaljasakot
script(type="riot/tag" src="kaljasakot.tag")
script(src="https://cdn.jsdelivr.net/riot/2.6/riot+compiler.min.js")
script riot.mount('kaljasakot')
include includes/footer.pug
script(src='/js/kaljasakot.js')
I.e. I'm trying to mount the riot tag kaljasakot in the Pug template. However the browser gives a 404 error in the console on page render:
GET http://localhost:3001/kaljasakot.tag 404 (Not Found)
riot+compiler.min.js:2
I'm a little stumped on where the tag file should be located for the compiler to find it, and I can't find any tips on this from Google. Has anyone come across this case?
The whole project can be found here Github link, if needed.
The tag files are not fetched when the Pug template is compiled but from the browser when the app is running.
Currently you haven't told Express where to find the tag files.
To fix this problem, you can for example create a folder public/tags, move the tag files in there and use them like script(type="riot/tag" src="tags/kaljasakot.tag"). Express will find the files from there because you have configured the public folder as a source for static files.
Now the request won't give 404 anymore, but the tag file won't quite work either.
Since you are using Pug in the tag files, you need to precompile them before the app can use them. If you just drop the kaljasakot.tag to public folder as suggested above, you'll see an error Uncaught SyntaxError: Unexpected token = because Riot doesn't understand the Pug syntax.
So you'll probably want to just keep the tag files in the views folder after all and set up a build step where you compile the tags and move them to the public/tags folder. See Riot's documentation on server compilation and gulp-riot for example.
i'm new to angularjs as well as grunt. I'm using "grunt-contrib-uglify": "^1.0.1" to uglify javascript files and place them into one file i'm getting corect output file as expected. but when i use it in html file getting module inject error.
I tried for uglifying individual file seperately used them in html file worked perfectly as expected without any error.
I also tried for grunt-contrib-concat and use its output to uglify but result is same (module inject error).
It means when i place multiple javascript files in to one file, angular is not creating injector for my application.
can anybody explain what is happening here?
I have created a new Rails 4 project and I am trying to load an external JavaScript file in my HTML file. I have placed the JavaScript file in the /assets/javascripts directory and included the file in my HTML file.
My HTML file:
<html>
<body>
<script src="/assets/hello.js"></script>
</body>
</html>
My JavaScript file:
document.write("test");
I do not see any errors in my web browser console when loading the website. I am pretty sure I put the JavaScript file in to correct directory but the file will not run. Does Rails require something for external JavaScript files to work properly?
I have also tried defining a method in the JavaScript file and calling it within a <script> tag but I get a "Uncaught ReferenceError: methodname is not defined".
You probably need to list 'assets/hello.js' in application.js. The Rails asset pipeline compiles all JavaScript into application.js based on the filepaths that it finds listed there.
More info here: http://railsapps.github.io/rails-javascript-include-external.html
So I figured out why Rails wasn't loading my JavaScript file. When I created the Rails project, it included .coffee scripts which can be used instead of JavaScript. For some reason by default, the .coffee script was being run instead of the JavaScript file that I created. After deleting the .coffee script, my JavaScript loads as expected.
Noted Things
Rails 4.1.8
jquery rails 3.1.3
Windows 7
I am currently trying to run a simple coffescript under app/assets/javascripts/login.jscoffe
# login.js.coffee #
$(document).on "page:change", ->
$('#loginb').click ->
alert "Clicked!"
When I load up the page I get a console error.
Uncaught reference error $ is not defined
Now I have tried several things, such as using rake precompile. Made sure I included in application js below.
//= require jquery
//= require jquery_ujs
I've been reading up to see if there are other solutions. Some saying things about turbolinks. Should I just include the jquery right into the html page?
So I back upped a little I how I set up my first app. Using a windows 7 machine you run into a problem defined in this article ---> ExecJS::RuntimeError on Windows trying to follow rubytutorial
Since I took the easy way out(going into application.html.erb and changing the linking tag from "application" to "default" fixed a problem but also created more. I then had to load each script I wanted using the include tag and precompile assets files.
The solution came in when I took a step back and used the answer to the link above. Fixing the ExecJs and reintegrating the default functionally of the app seem to fix things.
I'm working on a Rails 4.0 app with following directory structure
-app
|->javascript
|->page-specific
|->myjavasript.js
In my application.css I have removed required tree directive to make sure I don't include all js on every page.
//= require_tree .
Now to include my javasript I used following syntax on my page:
The application works fine on my development environment but when I push my changes to my production environment, I get 404 when I browser make a call to get javascript.
I call made in production is:
server-name/javascripts/page_specific/myjavasript.js
I call made in develop machine is:
server-name/assets/page_specific/myjavasript.js?body=1
I read a bit about asset pipelines and added following to my production.rb:
config.assets.precompile += ['page_specific/myjavasript.js']
But still my public\assets folder doesn't contain myjavasript.js, and keep on getting a 404.
I have a couple of questions, I do I add page specific (not-cpntroller specific) assets to my app?
Why is it working on development and not in production, what is done differently?
How can I fix it?
In firebug I see:
"NetworkError: 404 Not Found - https://my-server/javascripts/page_specific/myjavasript.js"
Just try,
config.assets.precompile += ["page-specific/*"]
Then, open up rails console and run the below line to know whether page-specific folder is there under your app asset paths:
Rails.application.config.assets.paths
Hope it helps :)