TypeError Cannot read property 'afterStep' of undefined

[DimitarNestorov]

TypeError
Cannot read property 'afterStep' of undefined

[ahmed-wagdi]

can you show me what your config looks like? or atleast the steps array

[DimitarNestorov]

joyrideService.config = {
	overlay: true,
	onFinish: function(){ user.userHaveSeenTutorial("seen_kanban"); },
	template: '/templates/dynamic_templates/onboarding.html',
	steps: [
		{
			heroImg: '/img/cat.svg',
			heroContent:'<h3>' + getFirstName() + ', this is the <b>kanban</b> view.</h3><p>In Ora each project can have different <br>active features and views.</p>',
			customNextActionName: 'I See...'
		},
		{
			type: 'element',
			selector: ".project-and-view",
			content: '<p>From here you can quickly change projects, views or edit the project settings.</p>',
			appendToBody: true,
			placement: "bottom",
			otherCat: true,
			positionFix: "pointingLeft",
			avatar: true,
			customNextActionName: 'Cool'
		},
		{
			type: 'element',
			selector: ".category-inner",
			content: '<p>This is a <b>list</b>. You can have as many lists as you want, name them as you want and put anything you want inside. Lists also have states - <b>Open, Closed, In Review</b>. These affect your workflow.</p>',
			appendToBody: true,
			placement: "right",
			otherCat: true,
			positionFix: "pointingLeft",
			avatar: true,
			customNextActionName: 'How?'
		},
		{
			type: 'element',
			selector: "#list-settings",
			content: '<p>You can customize your list from this button.</p><br><p><span class="blue-text smaller-text">ProTip: Double-click to collapse a list.</span></p>',
			appendToBody: true,
			placement: "right",
			otherCat: true,
			positionFix: "pointingLeft",
			avatar: true,
			customNextActionName: 'Thanks!'
		}
	]
};

Issue has appeared on Chrome 57.0.2987+ on macOS, Windows and Android

[ahmed-wagdi]

I think the problem might be from your custom template code, could you post that as well?

[DimitarNestorov]

<div class="jr_container" id="jr_step_{{joyride.current}} {{currentJoyride.id}}" data-ng-init="currentJoyride = joyride.config.steps[joyride.current];" data-positionfix="{{currentJoyride.positionFix}}">
  <div class="jr_step">

    <div class="onboarding-welcome">
      <img data-ng-if="currentJoyride.heroImg" ng-src="{{currentJoyride.heroImg}}" alt="cat">
      
      <div ng-if="currentJoyride.heroContent" data-ng-bind-html="currentJoyride.heroContent"></div>
      <p data-ng-if="currentJoyride.roadmapLink">Visit <a class="hand" data-open-link="/project/550/kanban">Roadmap</a> for more details.</p>
    </div>

    <img src="/img/cat.svg" data-ng-if="currentJoyride.avatar && !currentJoyride.otherCat" class="cat" alt="">
    <img src="/img/cat2.svg" data-ng-if="currentJoyride.avatar && currentJoyride.otherCat" class="cat other" alt="">
    <h4 ng-if="currentJoyride.title" class="jr_title">{{currentJoyride.title}}</h4>
    <div ng-if="currentJoyride.content" class="jr_content" ng-bind-html="currentJoyride.content | jr_trust">
    
  </div>
  <div class="jr_buttons">
    <div class="jr_left_buttons">
      <a data-ng-if="joyride.current != joyride.config.steps.length-1" class="jr_button jr_skip" ng-click="joyride.start = false">Skip</a>
    </div>

    <div class="jr_right_buttons">
      <a class="jr_button jr_prev" ng-click="joyride.prev()" ng-class="{'hidden' : joyride.current === 0}">Go back</a>
      <a class="jr_button jr_next" ng-click="joyride.next()" data-ng-if="!currentJoyride.customNextActionName" ng-bind="(joyride.current == joyride.config.steps.length-1) ? 'Finish' : 'Next'"></a>
      <a class="jr_button jr_next" ng-click="joyride.next()" data-ng-if="currentJoyride.customNextActionName" ng-bind="currentJoyride.customNextActionName"></a>
    </div>
  </div>
</div>

[DimitarNestorov]

Same config and template seems to make issues on Android but in another place

[ahmed-wagdi]

I think it's more or less the same problem. cannot read * of undefined means that the current step is undefined for some reason.

That being said dropped both of those in my project and still not getting anything, would be helpful if you could recreate the problem in plunker or jsFiddle