CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
MLister
MLister

Reputation: 10320

Disable 'Next' button temporarily in Bootstrap Tour

I'm using Bootstrap Tour to build a rather restrictive tour in which the user can only proceed to the next step after spending 3 seconds on the current step.

In order to to do this, I gave the 'Next' button an id nextBtn in the tour template, and hope I can enable/disable it like this:

var tour = new Tour ({
    name: "my-tour",
    template: "...",
    onNext: function(tour) {
        $("#nextBtn").prop("disabled", true);
    }),
    onShow: function(tour) {
        window.setTimeout(next, 3000);
    });

function next() {
    $("#nextBtn").prop("disabled", false);
}

However, this is not working. What should be the right approach here?

Upvotes: 1

Views: 3657

Answers (1)

Irvin Dominin
Irvin Dominin

Reputation: 30993

There are some typos, but the main problem is that you have to use the correct selector to access the "Next" button, it is not #nextBtn, but it's a nesting of classes $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").

In the onShow and onNext event the popover is not accessibile because boostrap destroy and recreate it, the correct event is onShown:

Function to execute right after each step is shown.

Code:

var timer;
var tour = new Tour({
    onShown: function (tour) {
        $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").prop("disabled", true);
        timer=window.setTimeout(next, 3000);
    }
})

function next() {    
    $(".popover.tour-tour .popover-navigation .btn-group .btn[data-role=next]").prop("disabled", false);
    window.clearTimeout(timer);
}

tour.addStep({
    element: "#one",
    title: "Step 1",
    content: "Content for step 1"
})

tour.addStep({
    element: "#two",
    title: "Step 2",
    content: "Content for step 2"
})

tour.addStep({
    element: "#three",
    title: "Step 3",
    content: "Content for step 3"
})

tour.start()

Demo: http://jsfiddle.net/IrvinDominin/3YY7Y/

Upvotes: 4

Related Questions