0

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

jgillich
  • 71,459
  • 6
  • 57
  • 85
eegloonew
  • 89
  • 1
  • 8

1 Answers1

0

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

AVK
  • 645
  • 9
  • 22
  • Thank you. But While going to prev step I want to go to on all step, dont want to skip step while going prev. Can we do this? – eegloonew May 22 '14 at 12:53
  • It was a minor tweak. You can probably do this yourself next time. Updated the answer and fiddle. Do take a look – AVK May 22 '14 at 12:59
  • No problem :) Hope that helped – AVK May 23 '14 at 08:46
  • :If I want to add any step in between 2nd and 3rd step then I need to change tour.goTo(i) (i need to change). But if assign serial no. 10 to first step and 20 to second step then it is require to keep 'i' is 0,1,2... etc. but can we jump on next step using tour.goTo(20), tour.goTo(30) other than tour.goTo(1), tour.goTo(2), – eegloonew Jun 06 '14 at 05:43
  • The [API Documentation](http://bootstraptour.com/api/) for goTo says: "Pass i as the index of the step in the tour (0-based).". So i guess it must be index only. – AVK Jun 07 '14 at 15:18
  • CAN YOU HELP ME WITH http://stackoverflow.com/questions/24382873/bootstrap-tour-wont-pause – eegloonew Jun 24 '14 at 09:36