Joyride Javascript tutorial not working on page load

Question

EDIT. After trying a lot of different solutions I figured out that when I added

*= require joyride

To my application.css.scss file it caused the javascript to break (not sure if this is true or not:(

I tested it in the console on chrome again and when I ran

$("#tutorial").joyride({});

once nothing showed up but if I ran it twice then it would work. So my application.js file now looks like:

$(document).ready( function(){       
$("#tutorial").joyride({});
$("#tutorial").joyride({});

});

It only renders the tutorial box once then when you click next step it breaks again..

ORIGINAL POST.

I'm using ZURBS joyride plugin in my rails app to create an on boarding tutorial. http://zurb.com/playground/jquery-joyride-feature-tour-plugin

I've gotten the javascript to work in console using chrome inspector but it's not working on page load.

Any ideas on how to fix this?

Application.js file

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require d3
//= require jquery.joyride
//= require modernizr.mq.js
//= require jquery.cookie.js
//= require_tree .

$(document).ready(function(){
    $("#tutorial").joyride({});
});

This is what I'm using in my index.html.erb file

  <ol id='tutorial'>
    <li data-id="story">Tip content...</li>
    <li data-id="story">Tip content 2</li>
  </ol>

This shows the code in the index that corresponds with the data-id

 <div class="box-container">
  <div id="story" class="box">

    <h1>Welcome to WeWrite. </h1>
    <h3> Write stories together. </h3>

    <% @lines.each do |line| %>
        <div class="story">

            <div class="depth"><%= line.depth %></div> 
            <div class="story-link"><%= link_to "#{line.text}...",  line_path(line), :class => "story-link" %> </div>
        </div>
    <% end %>

ADDED THIS TO MY application.js file to see if the script was loading and it is

$(document).ready( function(){      
fireWhenReady();

});

function fireWhenReady() {
if(typeof $("#tutorial").joyride == "function") {
    $("#tutorial").joyride({});
    console.log("joyride");
}
else {
    setTimeout(fireWhenReady, 100);
}
}

Answer 1

You need to set the autoStart : true option like in the demo.

$(window).load(function() {
    $('#joyRideTipContent').joyride({
        autoStart : true
        ,postStepCallback : function (index, tip) {
            if (index == 2) {
            $(this).joyride('set_li', false, 1);
            }
        }
        ,modal:true
        ,expose: true
    });
});

Answer 2

Based on your comment up there I would recommend using :

$(window).load(function(){
  $("#tutorial").joyride({});
})

this will make sure every thing is loaded even sub scripts.

Answer 3

I can confirm the same behaviour. Joyride needs to be called twice to start.

The only notable addition being the bootstrap 'hide' class on the list. If I remove this then the list is always visible.

The following works for some strange reason:

<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>
<h2 id="joyride1">Heading...</h2>

<ol id="joyride" class="hide">
    <li data-id="joyride1" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride2" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride3" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
    <li data-id="joyride4" data-text="Next" data-options="tip_location: top; prev_button: false">
        <p>Hello and welcome to the Joyride documentation page.</p>
    </li>
</ol>

$(function () {
    $("#joyride").joyride({});
    $("#joyride").joyride({}); // NEEDED TO START JOYRIDE
});