I'm working on a Rails application which was using Foundation 5.0.3. This had a few issues with Rails 4, but I had it working with no issues. I am not using TurboLinks.
I've just updated to Foundation 5.1.0, and all Foundation JavaScript has stopped working. As far as I can tell, nothing else has changed, there are no resources returning 404, and there are no JavaScript errors coming out of the browser console.
I don't know if the problem is Foundation, the asset pipeline, or my project setup and page structure, but I've tried everything I can think of to debug this with no effect.
Here's my basic page structure in case the error is in how I've set it up, but this was working fine for Foundation 5.0.3.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<%= favicon_link_tag "favicon.png" %>
<%= stylesheet_link_tag "application", media: "all" %>
<%= stylesheet_link_tag params[:controller] %>
<%= stylesheet_link_tag "site_area_specific/#{params[:site_area]}" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag params[:controller] %>
<%= csrf_meta_tags %>
<script>
$(function() {
$(document).foundation();
});
</script>
</head>
<body>
<%= render "shared/topnav" %>
<%= yield %>
<%= render "shared/footer" %>
</body>
</html>
Related
I have a site here https://thatdevlevi.herokuapp.com/. When the page loads you might notice a huge grey blank area. That area is supposed to have a h1 and some text that fades via javascript removing the hidden class from the elements. Why is javascript not working? I have tried putting my javascript inside the asset pipeline (homepage.js) and on the view inside script tags and neither work, but if I run
Alert("test");
that works fine.
Application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>PortfolioSite</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= yield %>
</body>
</html>
I changed the cdn I was using to get jquery to https instead of http and it fixed the issue
I would like to make a little apology to #PaoloMangia as he essentially suggested I do this to fix it and I fairly rudely blew him off on his suggestion.
I've read many pages about using jquery in rails and still can't seem to get it to work.
I have the 'jquery-rails' gem, and I installed.
I have the require statements in the application.js file.
Here is a test page I keep running:
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title)%></title>
<%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script>$(document).ready(function(){
$(".bg-info").click(function(){
$(this).hide();
});
});</script>
</head>
<body>
<center>
<h1 class="bg-info"><%= yield(:title)%></h1>
</center>
</body>
</html>
But when I click on the "bg-info" text in the browser I get no response.
Here's what you should have:
#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
$(document).on("click", ".bg-info", function(e){
$(this).hide();
});
Here's what I'd do for the layout (to test):
#app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= yield(:title)%></title>
<%= javascript_include_tag 'application','jquery', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<div class="bg-info"><%= yield(:title)%></div>
</body>
</html>
If the above doesn't work out the box, you'll probably have an issue with your development environment (OS) -- most likely with ExecJS.
To confirm this, you'll need to debug your developer's console:
To access the dev console, right-click > inspect element > console.
This shows you any errors with your JS & your front-end environment. If any errors appear, they may tell you what the issue is.
If no errors appear, you should try installing NodeJS on your system, as this ensures Rails can use the appropriate JS executable.
Recently, I added a bxslider (http://bxslider.com/examples/manual-show-without-infinite-loop) to view galleries in a rails project. I have followed the instructions here (https://github.com/stevenwanderski/bxslider-4) to the best of my understanding, but my gallery images are showing up in a list rather than within the slider. I have attached my code below, and would like to know how I solve this strange behavior.
\app\views\galleries\show.html.erb
<div id="embed_gallery" >
<%= render :partial => 'projects/embed', :collection => #projects, :as => :project%>
</div>
\app\views\galleries\embed.html.erb
<% title h(#gallery.name) %>
<% #section = "explore" %>
<%= javascript_include_tag :defaults %>
<div id="embed_gallery">
<ul class="bxslider">
<%= render :partial => 'projects/embed', :collection => #gallery.projects, :as => :project %>
</ul>
</div>
\app\views\layouts\embed_layout.html.erb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<%= javascript_include_tag 'jquery.bxslider.min' %>
<%= stylesheet_link_tag 'jquery.bxslider'%>
<!-- jQuery library (served from Google) -->
<%= javascript_include_tag 'ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' %>
<script type="text/JavaScript">
$(document).ready(function(){
$('.bxslider').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
</script>
</html>
app\assets\javascripts\embed_scripts.js
//= require jquery
//= require js/jquery.bxslider.min.js
//= require lib/jquery.bxslider.css
I have the js/jquery.bxslider.min.js and lib/jquery.bxslider.css files included in my project, but still for some reason, the bxslider is not appearing on my page! What am I missing?
The output of your code should be similar to http://jsbin.com/veyexaki/2/edit?html,output. It also makes sense to check if there is no any javascript errors in your code (click F12 to run dev tools in the browser and check console).
I'm using Rails 3.0. I want to add a Javascript file show_javascript.js that is in /public/javascripts/ to a view show.html.erb.
The show.html.erb file takes the <head>...</head> part from the template application.html.erb
I'm wondering how I should add it.
Assuming you have a generic stylesheet layout you could add the following to application.html.erb:
<%= javascript_link_tag 'show' if params[:action] == 'show' %>
You could even use content_for params plus yield in the <head> section like so:
layout.html.erb
<head>
<%= yield(:header) if #content_for_header %>
</head>
product/show.html.erb
<% content_for :header do -%>
<%= javascript_link_tag 'show_product' %>
<% end -%>
I am using sortable list like described here: http://webtempest.com/sortable-list-in-ruby-on-rails-3-almost-unobtrusive-jquery/
application.html.erb is looking like this:
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js", "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js", "rails.js" %>
<%= csrf_meta_tags %>
<%= render 'layouts/shim' %>
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |key, value| %>
<%= content_tag(:div, value, class: "alert alert-#{key}") %>
<% end %>
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
<%= yield :javascript %>
</body>
</html>
The google apis are needed for the sortable list, but if I use those no other javascript is working, in my case the wysihtml5-editor. It works if I delete the google-api, but then the lists are not sortable.
I had imported query twice, one time over the asset pipeline with the "jquery-rails" gem, one time via the javascript_include_tag. What I missed to import via the asset pipeline was query-ui. After that I could remove the javascript_include_tag. Stupid me!