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>
Related
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.
First real time I've tried to use Javascript in a Rails app, but nothing outside of alerts seem to be working for me.
What I'm trying to do is get this simple clock to run on my Rails app, pretty much copying the code where I thought it was supposed to go, but nothing's working and all my searches are either too specific or don't seem to work.
I want the clock to be available sitewide but I've also tried organizing it onto specific controllers and their views with the same amount of luck.
application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree ./sitewide
apps/assets/javascripts/sitewide/pages.js
function startTime() {
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m = checkTime(m);
s = checkTime(s);
document.getElementById('txt').innerHTML = h+":"+m+":"+s;
var t = setTimeout(function(){startTime()},500);
}
function checkTime(i) {
if (i<10) {i = "0" + i}; // add zero in front of numbers < 10
return i;
}
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Clawk</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render 'shared/navbar' %>
<div class="container-fluid">
<%= render 'shared/sidebar' %>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div id="txt"></div>
<%= yield %>
</div>
</div>
</body>
</html>
You have the JavaScript in place, but you are not actually calling the startTime() function. Note in the example it is called via an onload attribute on body: <body onload="startTime()">
With Rails, you could add this to the end of your pages.js file:
$(document).on('page:load', function() {
startTime();
});
This will execute the code within the function on page load (and will be compatible with turbolinks).
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 making an app using Rails 4.0.1 with Ruby 2.0 and I'm running into trouble installing the "Rambling slider" image carousel from here.
Here's the portion of the gemfile:
...
gem 'paperclip'
gem 'rambling-slider-rails', :git => 'https://github.com/gonzedge/rambling-slider-rails'
gem 'uglifier', '>= 1.3.0'
...
I ran bundle install and, following the instructions, put a reference to jquery.rambling.slider in my manifest files.
My app/assets/javascripts/application.js file:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require jquery.rambling.slider
//= require_tree .
My app/assets/stylesheets/application.css file:
/*
*= require jquery.rambling.slider
*= require_self
*= require_tree .
*/
I included the link tags in app/views/layouts/application.html.erb like so:
...
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= stylesheet_link_tag 'jquery.rambling.slider' %>
<%= javascript_include_tag 'jquery.rambling.slider' %>
<%= csrf_meta_tags %>
...
Then added some dummy images and the invoking javascript in the actual view accordingly:
<div id="slider">
<%= image_tag "lorem1.jpeg" %>
<%= image_tag "lorem2.jpeg" %>
<%= image_tag "lorem3.jpeg" %>
</div>
<script>
$(window).load(function(){
$('#slider').ramblingSlider();
});
</script>
But all that appears a simple 1'2'3 on the page.
I know that the images are referenced correctly because when I comment out the script in the view file, the 3 images appear with no problems.
The developer tools in Chrome only show that there is a single warning saying "event.returnValue is deprecated. Please use the standard event.preventDefault() instead." at jquery.js?body=1:5375. (I can show this line too if you need it) This warning only appears when the script is uncommented. As soon as I comment it out, the warning goes away.
Any help would be much appreciated. Thanks in advance!
The problem you mentioned(1,2,3 links) occurs because the theme effect was not included, You can include this by adding a div with "theme-default" class, present in the .css file of rambling-slider. For this to work you also need to add the themes folder in stylesheet & images folder of your application
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="ramblingSlider">
<%= image_tag "lorem1.jpeg" %>
<%= image_tag "lorem2.jpeg" %>
<%= image_tag "lorem3.jpeg" %>
</div>
</div>
</div>