0

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
ChrisWilson
  • 459
  • 1
  • 6
  • 19

1 Answers1

1

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>
  • Hmmm no luck unfortunately. – ChrisWilson Apr 05 '19 at 18:38
  • 1
    Can you show us the console log when starting the app! –  Apr 05 '19 at 18:54
  • Oh that's interesting. It says "There is no class with the given selector". I checked the code again and the classes are the same in intro.js and index.html.erb. And when I click on the Global error in the console it points to "introJs(".introduction-farm").start();" – ChrisWilson Apr 05 '19 at 19:05
  • 1
    wait what do you mean by "in intro.js", you know that the changes are not to be done inside `intro.js`? Why don't you try the `HelloWorld` example I suggested (if any changes were done to `intro.js` remove them or use the original file) –  Apr 05 '19 at 19:08
  • I was referring to the first suggestion you made, let me work on your second one. – ChrisWilson Apr 05 '19 at 19:33
  • 1
    I figured out part of it. The JS was loading too early which is why it couldn't find a class. So for intro.js I put `setTimeout(function() { introJs().start(); }, 3000);`. It looks like the CSS isn't being applied though, because here is a screenshot of what I'm getting. https://imgur.com/a/plBpZFR Excited some progress was made though. And the text 'one two' is just what I put for some example text. – ChrisWilson Apr 05 '19 at 20:01
  • Great to hear that, I updated my answer accordingly, I hope you accept the answer ;) –  Apr 05 '19 at 20:04
  • Haha! sure thing. I appreciate you helping me work through it. Do you think you could take one last look to see if you can think why the CSS isn't loading though? – ChrisWilson Apr 05 '19 at 20:24
  • Haha sure thing, can you screenshot the css loading via `Inspect>Network>CSS` and `console log` –  Apr 05 '19 at 20:30
  • I think your instruction are for Chrome? I'm on Safari, but I can go into Page Resources which show me the CSS of the page. Interestingly when I inspect the 'pop up message' (the elements I uploaded to imgur) it gives me the following. https://imgur.com/a/yMIUK0U. So the elements do have introjs css classes applied to them, but it just looks all plain on the view. – ChrisWilson Apr 05 '19 at 22:43
  • I see now,You should make sure your `jquery` link placed first then write ... javascript link, `bootstrap` ... –  Apr 05 '19 at 22:48