Search code examples
javascripttwitter-bootstrapbootstrap-tour

tour.goTo(i) is not working


Following is my reference Code :

I am using Bootstrap tour for my application.

Requirement :

  • I am on first step when I click on next then it is checking the value of '#id2'. If id2 value is not blank then it should skip that step and move to 3rd step directly.

For this I am trying tour.goTo(3). But this is not working. Any help?

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

Solution

  • I've fiddled around with it and it seems that you should put the goTo() logic on the step you want to skip:

    HTML

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

    JS

    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--------');
                    }
                },
            },
            {
                element:" #id3",
                title: "3",
                content: "3rd Content",
                placement: "top",           
                onShow: function () {
                    console.log('third step');          
                }           
            }
        ]);
    
    tour.init();
    
    tour.restart();