tour.prev() or onPrev ? if I am skipping step using onShown for moving next

Question

Code is updated. . kindly take a look

I am Creating application walk-through. In this we have three buttons

• Prev
• Next
• End

By default Prev and Next buttons are working fine.

I have done some modifications :

• Added onShown for skipping that step if it is not blank.
• So with this If I clicked on Next button then it is not moving to previous step.

what should I use? tour.prev() or onPrev? I tried with both but not solved the problem.

Any suggestion ?

Reference Code:

<div id="id1">One</div>
<div id="id2">Two</div>
<div id="id3">Three</div>

var tour = new Tour();

tour.addSteps([
        {
            element:" #id1",
            title: "1",
            content: "1st Content.",
            placement: "top",
            onShow: function () {
                console.log('This is Onshow Function');
            },
        },
        {
            element:" #id2",
            title: "2",
            content: "2nd Content",
            placement: "top",
            onShow: function () {
                console.log('second step');         
            },
            onShown: function () {       
                client_text = $('#id2').text();
                if(client_text != ''){
                    console.log('----------client code present----------');
                    tour.goTo(2)    
                }
                else{
                    console.log('-------client code not present--------');
                }
            },
            onPrev: function(){
                 tour.prev
             }
        },
        {
            element:" #id3",
            title: "3",
            content: "3rd Content",
            placement: "top",           
            onShow: function () {
                console.log('third step');          
            } ,
             onPrev: function(){
                 tour.prev
             }
        }
    ]);

tour.init();

tour.restart();

In this one problem is there . When I click prev button of 3rd step then it goes to 2nd step and execute onShow function and because of this it again goto third step as we defined on shown

Answer 1

You just need to add a variable to indicate where you went last (i.e. back or forward) and then using this variable you will know if you should goTo() the first step or the last:

HTML

<div id="id1">One</div>
<div id="id2">Two</div>
<div id="id3">Three</div>

JS

var tour = new Tour();

var dir = 'next';
tour.addSteps([
        {
            element:" #id1",
            title: "1",
            content: "1st Content.",
            placement: "top",
            onShow: function () {
                console.log('This is Onshow Function');
            },
            onNext: function() {
                dir = 'next';
            }
        },
        {
            element:" #id2",
            title: "2",
            content: "2nd Content",
            placement: "top",
            onShow: function () {
                console.log('second step');         
            },
            onShown: function () {       
                client_text = $('#id2').text();
                if(client_text != ''){
                    console.log('----------client code present----------');
                    if(dir == 'next') {
                        tour.goTo(2);  
                    }
                }
                else{
                    console.log('-------client code not present--------');
                }
            },
        },
        {
            element:" #id3",
            title: "3",
            content: "3rd Content",
            placement: "top",           
            onShow: function () {
                console.log('third step');          
            },
            onPrev: function() {
                dir = 'prev';
            }       
        }
    ]);

tour.init();

tour.restart();

FIDDLE

See this link