I've been having this problem all week and everything I've tried hasn't worked and I'm not even sure why it exists. (It's somewhat of a follow up to this question I posted.
I added lightbox2 js and css files to my rails 3.2.8 project.
I'm currently getting these errors on every page, in my local environment, (even pages I'm not calling lightbox in the markup) in the console-
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/images/close.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:3000/assets/images/laoding.gif
And broken image indicators being displayed on every page.
I hardcoded a path change to lightbox.js to appropriately retrieve aforementioned images and they work as they should when lightbox is used.
LightboxOptions = (function() {
function LightboxOptions() {
+ this.fileLoadingImage = '/assets/loading.gif';
+ this.fileCloseImage = '/assets/close.png';
- this.fileLoadingImage = 'images/loading.gif';
- this.fileCloseImage = 'images/close.png';
this.resizeDuration = 700;
this.fadeDuration = 500;
this.labelImage = "Image";
this.labelOf = "of";
}
I don't understand why I am getting these errors when I can clearly see the images working in my local environment. Another, curious thing is lightbox is still working without having to require it in application.js and application.css
Here is the output from my term-
Started GET "/assets/images/loading.gif" for 127.0.0.1 at 2013-01-06 12:36:31 -0800
Served asset /images/loading.gif - 404 Not Found (11ms)
ActionController::RoutingError (No route matches [GET] "/assets/images/loading.gif"):
and the same for close (but given screenshot it's obviously appearing)
application.js
//= require jquery
//= require jquery-ui
//= require jquery_ujs
//= require jquery.ui.datepicker
//= require justgage
//= require raphael.min
//= require jquery.purr
//= require best_in_place
//= require_tree .
(shouldn't I need lightbox above?)
*= require jquery.ui.datepicker
*= require_self
*= require bootstrap
*= require_tree .
*/
(shouldn't I need lightbox above?)
Lightbox being used in the view.
<div class="row does_description_whole">
<div class="row offset3">
<div class="span3 does_description_text">
<h4>Joe Popular</h4>
<p>Lorem ipsum hipster bacon.</p>
</div>
<div class="span3">
<img src="https://lh3.googleusercontent.com/pciture/glance_town.png" class="does_pictures">
</div>
</div>
</div
Edited lightbox.js for appropriate path
I don't understand why 1. Each page is GET requesting (to error) the images even though they are displaying appropraitely and 2. Why I don't need to require the lightbox files in application.js and application.css.
Thanks for your attention and for taking a look.
If you are about to use the assets pipeline , you should make references to images like this :
= (link_to image_tag(pic.image_url(:thumb)), pic.image_url, :rel => "group2", :class => "lightbox") if pic.image?
You could consider using of link_to helper instead of a href . The :rel => is specifying the source of images to browse .
Normally , the reference to an image is in format :
url('yourpng.png')
About why you should not include the lightbox in your manifests : You should include them , both in .js and .css manifest .
SOLVED : And at the end of the day , it was as simple as rm -rf public/assets (#Tmacram shared the right solution with us).
Related
I am using Rails 5 with react-rails gem. I want to use server-side rendering, but I see this error:
React::ServerRendering::PrerenderError in Home#index
Encountered error "# ExecJS::ProgramError: TypeError: Cannot read property 'serverRender' of undefined" when prerendering Main with {}
This is my /assets/javascripts/application.js:
//= require rails-ujs
//= require jquery
//= require react
//= require react_ujs
//= require_tree .
This is javascripts/components.jsx:
class Main extends React.Component{
render(){
return (
<h1>Hello</h1>
);
}
}
and this is the view:
<%= react_component('Main', {}, {prerender: true}) %>
Without prerender option, everything works.
I've had a similar issue and here's how I solved it
run command rails generate react:install
This will create the components folder and some required files under your javascripts/ dir.
Now, place your components.jsx in /assets/javascripts/componets directory
refresh the page.
I'm running rails 4.2.10 and haven't tested rails 5 but I'm guessing this should do the trick.
Let me know how you get on
In my file dances.html.erb, my test complains:
Failures:
1) Creating dances creates a new dance with non-javascript data
Failure/Error: visit '/dances/new'
Capybara::Poltergeist::JavascriptError:
One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).
ReferenceError: Can't find variable: $
ReferenceError: Can't find variable: $
at http://127.0.0.1:33842/dances/new:81 in global code
I think the offending html code looks like
<script>
$( "#choreographer-autocomplete" ).autocomplete({
source: <%= a_to_safe_str(Choreographer.all.map &:name) %>,
autoFocus: true,
minLength: 0
});
$( "#start-type-autocomplete" ).autocomplete({
source: ["improper","Becket","Becket ccw","four face four","square dance","indecent"],
autoFocus: true,
minLength: 0
});
</script>
and the offending calls to '$' are here.
I think this means JQuery isn't loading?
If I snip them, then the next error is:
Failure/Error: JSON.parse self.figures_json
ActionView::Template::Error:
784: unexpected token at '{{toJson(figures.arr)}}'
Those handlebars are an Angular thing.
Is Angular also not loading?
Here's my Rails application.js:
//= require angular
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require_tree .
//= require jquery-ui/autocomplete
//= require angucomplete-alt
This works fine in the Real World, just not in this test.
Is there something I need to do to get these JS libs to load before the body html is executed?
Since you are running the latest PhantomJS the most likely cause is that you have an error in one of your JS files. A big difference between the dev and test environments is that in the test environment rails concatenates all your JS files together. This means that an error in one file can prevent the rest of the JS from being processed. In dev mode they're all separate so an error in one doesn't stop the others from being processed. Check your browsers console log for errors and make sure they are fixed.
I'm working with Rails 4 and AngularJS. I've got my app working. Controllers, directives, services, etc. However, my main app.js file refuses to fire the config and run functions. I've got some console.logs in there to test how far it gets. Here's the code:
angular-app/app.js
'use strict';
console.log('we see the app.js file'); // This works
var app = angular.module('bruno', [])
console.log(app) //This works
// This is where is stops working
app.config(function ($httpProvider) {
alert('config'); // Can't see this
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
})
app.run(function () {
console.log('App is running'); // Can't see this
});
Like I said, my other controllers are working just fine. The console doesn't show any errors and everything loads just as it should.
Rails application.js file:
//= require angular-app/app
//= require_tree ./angular-app/templates
//= require_tree ./angular-app/modules
//= require_tree ./angular-app/filters
//= require_tree ./angular-app/directives
//= require_tree ./angular-app/models
//= require_tree ./angular-app/services
//= require_tree ./angular-app/controllers
I've re-written this every which way I can think of, but to no avail. I'm kinda stumped. I've done it with and without the var app. Hoping this wonderful community can at least help me see something I can't.
Additional Info
I'm using gem 'angular-rails-templates'
Rails 4.2.3
AngularJS 1.3.16
If you need anything else from me just ask. Who knows, maybe by tomorrow morning I'll see things differently. :-)
As it turns out, I was mistakenly re-using the same module name inside another controller. Which was overwriting the module name in app.js. All fixed now.
I'm building a Rails application and I decided to use bootstrap and sass.
I follow the guide on the github page:
https://github.com/twbs/bootstrap-sass
So, now i have my gem installed ('bootstrap-sass', 'sass-rails'), my application.css (now application.sass) looks like this:
1 #import "bootstrap-sprockets";
2 #import "bootstrap";
My application.js file looks like this:
1 // This is a manifest file that'll be compiled into application.js, which will include all the files
2 // listed below.
3 //
4 // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5 // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6 //
7 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8 // compiled file.
9 //
10 // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
11 // about supported directives.
12 //
13 //= require jquery
14 //= require jquery_ujs
15 //= require turbolinks
16 //= require bootstrap-sprockets
17 //= require_tree .
And then the guide pretty much ends.
The problem is that I don't have bootstrap in my application(I can't see it anywhere in the page by viewing the source) and I do not know how to use sass.
What should I do next? Did I miss something?
It sounds like it should all be ready to go but you will have to start writing some code that it can apply. Perhaps test it with this. In your application.html.erb file under body put the following:
<div id="container">
<div class="main">
<h1>Main Content</h1>
</div>
then in the css file try this
#container {
.main {
width:600px;
h1 {
color: $red;
}
}
Make sure you have restarted your server after the bundle install.
The list of bootstrap variables can be found here http://getbootstrap.com/customize/#less-variables
I found the error: I wrote all the import tag between the html
<title>
tag instead of the
<head>
tag.
In the application.js file, I have the requirements, and the on JQuery declaration:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require jquery.pjax
//= require_tree .
jQuery ->
$('#id').pjax('[data-pjax-container]')
However, I am getting the error Uncaught SyntaxError: Unexpected token > in the console. The jquery.ja and jquery.pjax.js files are loading in the resources and network tab of the inspector, so i know it is at least getting the jquery and pjax.jquery code, however, the shortcut `jQuery -> to signify document.ready, throws the error.
When I switch the code to :
$(document).ready(function() {
$('#ce').pjax('[data-pjax-container]')
});
I don't get the error. What is the correct shortcut for document.ready in Rails? I was following the PJAX tutorial here that says to use this notation.
What your are typing is Coffeescript syntax, that's the reason why its a syntax error.