How to stop Bootstrap Tour from moving onto next step unless conditions pass

Question

I have 3 divs first two are visible, and then 3rd one is hidden, in each of first 2 there is a button that when you press it hides the div, and when both are hidden 3rd one becomes visible. The issue is how can I "disable" the next button if div1 or div2 is visible.

I have tried using the onHide, onShow but it either don't function or i get stuck in infinite loop.

What would be the correct way to add this functionality.

Edit: HTML

    <div id="myDiv1">
    <button id="b1" onclick="$('#myDiv1').hide(); testForHidden()">Button1</button>
    <div id="myDiv1">
    <button id="b2" onclick="$('#myDiv2').hide(); testForHidden()">Button2</button>
    <div id="myDiv3" style="display:none">
    <button id="b3" onclick="$('#myDiv3').hide();">Button3</button>

JS

var tour = new Tour({
  storage : false,
  steps: [],
  backdrop : false
});

tour.addSteps([
  {
    element: "#myDiv1", // string (jQuery selector) - html element next to which the step popover should be shown
    title: "Title1", // string - title of the popover
    content: "content 1", // string - content of the popover
    placement : "bottom"
    },
  {
    element: "#myDiv2",
    title: "Title 2",
    content: "content 2",
    placement : "bottom",
  //  Trying to make it freeze on second tour step if the elements are not hidden, since the step 3 belongs to element that only becomes visible when the previous 2 are hidden

  },
  {
    element: "#myDiv3",
    title: "Title 3",
    content: "content 3",
    backdrop: true,
    placement : "bottom"
  },
// Initialize the tour
 tour.init();

 // Start the tour
 tour.start();

function testForHidden(){
 if(document.getElementById("myDiv1").style.display == "none" && document.getElementById("myDiv2").style.display == "none"){
$("#myDiv3").show();
}
}

you said "The issue is how can I 'disable' the next button if div1 or div2 is visible.". Which button is 'next button' ??? — Nidhin Chandran, Jun 28 '17 at 15:21
@NidhinChandran the one that moves onto next step in the tour... — R1z1a, Jun 29 '17 at 07:18
@R1z1a can you provide code including the 'next' button also ? — Nidhin Chandran, Jun 29 '17 at 07:21
@NidhinChandran well its part of the [BootstrapTour](https://github.com/sorich87/bootstrap-tour), hence the question is about it — R1z1a, Jun 29 '17 at 08:49

score 0 · Answer 1 · answered Jun 29 '17 at 09:31

Write a function to check visibility of 'myDiv1' and 'myDiv2' and call it onShown of bootstrap tour.

/* function to check visibility of divs and disable or enable next */
function checkThirdDivAndNextBtn() {
    if ($("#myDiv1").is(":visible") || $("#myDiv2").is(":visible")) {
        $("#myDiv3").hide();
        $('.btn[data-role="next"]').prop("disabled", true);
    } else {
        $("#myDiv3").show();
        $('.btn[data-role="next"]').prop("disabled", false);
    }
}

$("#b1").on('click', function() {
    $("#myDiv1").toggle();
    checkThirdDivAndNextBtn();
});

$("#b2").on('click', function() {
    $("#myDiv2").toggle();
    checkThirdDivAndNextBtn();
});

Then call the function in Bootstrap Tour

var tour = new Tour({
    storage: false,
    steps: [],
    backdrop: false,
    onShown: function(tour) {
        checkThirdDivAndNextBtn();
    }
});

Check this fiddle

How to stop Bootstrap Tour from moving onto next step unless conditions pass

1 Answers1