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.
Related
Been working on this for a few days, I'm trying to use gem "introjs-rails" to create a guided tour in rails. https://github.com/heelhook/intro.js-rails. A few differences between whats below and what the guide asks for are the guide wants '//= require introjs' to be put in application.js, but I get a Javascript error of 'introJs().start(); is undefined variable' so I put '//= require introjs' in the 'Intro.js' file instead and that seems to fix it. But when I start up the page, I'm still not getting a pop up message to appear.
Application.html.erb
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'introjs', 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'intro', 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
Application.scss
/*
*= require introjs
*= require_tree .
*= require_self
*/
Index.html.erb
<h1 data-step="1" data-intro="This is a tooltip!">This is a Tool Tip!</h1>
Intro.js
//= require introjs
introJs().start();
Introjs.css
*= require introjs
Try the following:
Index.html.erb:
<a class='introduction-farm' href='#' data-intro='Hello step one!'></a>
Intro.js:
introJs(".introduction-farm").start();
As you suggested in the comment, loading the script too earlier was the source of the issue for you : setTimeout(function() { introJs().start(); }, 3000);
For your CSS issue, most likely jQuery was not referenced, in which case you need to include it before IntroJS, bootstrap:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
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.
Following this angular rails tutorial, getting the error of Asset Filtered error
application.html.erb file is
<!DOCTYPE html>
<html ng-app>
<head>
<title>Blog</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application", controller_name %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
main.js.coffee [created a subdirectory in app/asset/javascript/controllers/main]
#= require_self
#= require_tree ./controllers/main
application.js
//= require jquery
//= require jquery_ujs
//= require underscore
//= require angular
Its not loading the angular controller created in app/asset/javascript/controllers/main/mainIndexCtrl.js.coffee
#IndexCtrl = (#scope) ->
$scope.title = "My blog"
Showing the error as follows
Asset filtered out and will not be served: add Rails.application.config.assets.precompile += %w( main.js ) to config/initializers/assets.rb and restart your server
But after changing like this its not showing $scope.title data.
Add Following code in config/initializer/asset.rb Rails.application.config.assets.precompile += %w( main.js )
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 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>