I'm working on a simple Rails 3.2 app and I'm experiencing an unexpected behavior.
Basically I have to refresh any page to make javascript to work.
This is my manifest
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.tokeninput
//= require jquery.ui.autocomplete
//= require_tree .
And here the inclusion into my template
<head>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= csrf_meta_tags %>
</head>
Pretty standard stuff.
Anyone had experienced the same issue or has any idea what is going wrong?
Thanks and have a good day.
Related
I'm trying to set up Nivo Slider in a rails app with twitter-bootstrap, the problem I'm facing is tha images appear on top of the other not sliding, any idea how to solve this?
here is my code:
load the nivo slider:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<% #page.images.each_with_index do |img, index| %>
<%= image_tag img.url, :title => '#htmlcaption' %>
</div>
</div>
<div id="htmlcaption" class="nivo-html-caption">
<%=raw #page.caption_for_image_index(index) %>
</div>
<% end %>
_javascript.html.erb
<%= javascript_include_tag 'application' %>
<%= javascript_include_tag 'jquery.nivo.slider.pack' %>
<%= javascript_include_tag 'jquery.nivo.slider' %>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade',
pauseTime: 5000,
directionNav:true,
controlNav:true
});
});
</script>
application.js
//= require jquery
//= require jquery_ujs
//= require twitter/bootstrap
//= require bootstrap
I believe the problem comes from the each loop. If you notice inside the loop you have two closing div tags - just bellow this line <%= image_tag img.url, :title => '#htmlcaption' %>. Therefore you open the divs once, but close then multiple times.
What you can do instead is change slightly the code like:
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<% #page.images.each do |img| %>
<%= image_tag img.url, :title => img.caption_for_image %>
<% end %>
</div>
</div>
Have a look at Nivo Docs. There are further example for alternative caption options.
I found a very easy fix to this issue:
I'm using a legacy CMS and that's inserting image map tags next to some images in the slider (resulting in blank slides). Simply ignoring irrelevant elements seems to work well.
In your jquery.nivo.slider.js file replace line 36
//Find our slider children
Replace this
36 - var kids = slider.children();
with
36 - var kids = slider.children("img,a");
save the change, reload your browser and issue solved.
For more details visit github gilbitron / Nivo-Slider
I don't know what I am missing.
I saw in another post that gmaps4rails gem includes some javascripts code dealing with json, and in the code rendered of my page it doesn't appears.
The container window for the map is blank, without any map inside.
I am running rails 3.2.8, ruby 1.9.3 and gmaps4rails 1.5.5.
Thanks in advance.
Controller code
respond_to :json, :html
def mostrar_mapa_unidades
#json = Unidade.all.to_gmaps4rails
respond_with #json
end
View code
<%= gmaps4rails(#json) %>
<%= #json %>
Model code
acts_as_gmappable :process_geocoding => false
application.html.erb code
<!DOCTYPE html>
<html>
<head>
<title>SONep</title>
<%= stylesheet_link_tag :all %>
<%= javascript_include_tag :defaults %>
<%= csrf_meta_tag %>
</head>
<body>
<%= yield %>
<%= yield :scripts %>
</body>
</html>
Rendered web page code (main parts)
<link href="/assets/gmaps4rails.css?body=1" media="screen" 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/gmaps4rails/gmaps4rails.base.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.bing.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.googlemaps.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.mapquest.js?body=1" type="text/javascript"></script>
<script src="/assets/gmaps4rails/gmaps4rails.openlayers.js?body=1" type="text/javascript"></script>
<div class="map_container">
<div id="map" class="gmaps4rails_map"></div>
</div>
#json
[{"lat":"-23.701613","lng":"-46.547077"},{"lat":"-23.704757","lng":"-46.545274"},{"lat":"-23.7074712","lng":"-46.5419723"}]
I have a model - Products, ProductsController and a layout product. I declared the layout inside the controller. added the css/js/images to the app assets folder. I did everything the rails guide told me to do when I want to have a custom layout. But It still doesn't show the layout i declared but shows me the default page without any formatting and settings.
my files are as follows
Products Controller
class ProductsController < ApplicationController
layout "product"
# GET /products
# GET /products.json
def index
#products = Product.all
respond_to do |format|
format.html # index.html.erb
format.json { render json: #products }
end
end
end
and my layout file is
<!DOCTYPE html>
<html>
<head>
<title>Cool Amazon Products</title>
<%= stylesheet_link_tag "application" %>
<%= stylesheet_link_tag "bootstrap" %>
<%= stylesheet_link_tag "bootstrap-responsive" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">Cool Products from Amazon</a>
</div>
</div>
</div>
<%= yield %>
<%= javascript_include_tag "bootstrap" %>
</body>
</html>
the index.html.erb is the one that is generated by default!.
I am using twitter bootstrap for the UI. Please let me know if i'm missing something inorder to display the correct layout.
Ok, weird, that should work.
So, things to check:
Are you in development environment, or have you restarted your Rails app?
Are you using page or action caching, and you're not clearing them?
Could it be a caching issue on the web server?
That's about all that could be causing this.
I'm following one of the best tutorials/books I have ever come across, the Ruby On Rails Tutorial
but I am trying to include the "blueprint" stylesheets and assets/blueprint/screen.css returns this:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Action Controller: Exception caught</title>
I have checked that the path to the file is correct:
C:\triton2\public\stylesheets\blueprint\screen.css
And this is the top of my application.html.erb:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<%= csrf_meta_tag %>
<%= stylesheet_link_tag 'blueprint/screen.css', :media => 'screen' %>
<%= stylesheet_link_tag 'blueprint/print.css', :media => 'print' %>
</head>
Any idea what could be causing this? Better yet, how could I diagnose the proper solution on my own? Nothing on the google is of use save this which recommended a db:migrate (didn't help)
[edit]
The solution was to put the style sheet in C:\triton2\public\assets\stylesheets\blueprint\screen.css
and change application.html.erb to <%= stylesheet_link_tag 'stylesheets/blueprint/print.css', :media => 'print' %>
I might be wrong but I think it may need to be in the public/assets/stylesheets instead of just public/stylesheets if it is a rails 3.1 app.
<%= javascript_include_tag 'javascripts/admin/manage_customer.js' %>
=> <script src="/assets/javascripts/admin/manage_customer.js" type="text/javascript"></script>
How to generate simple JS link to /javascripts/admin/manage_customer.jsin Rails 3.1?
Just put a slash before that.
<%= javascript_include_tag '/javascripts/admin/manage_customer.js' %>