CODEWITHSUNDEEP
jquerytwitter-bootstraptabsjquery-ui-tabs
Shasha
Shasha

Reputation: 433

Disabling bootstrap open tab from link after tab changing

I have been battling with disabling the parent class li from opening the tab with the link placed in it, I want only the save and continue button to open the tabs not the links, cause the links get undisabled after change in tab.The previous tabs gets disabled, please how do i go about solving this. ONLY THE SAVE AND CONTINUE BUTTONS SHOULD MOVE AND GO BACK ON TAB

    //the html
    <div class="wizard">
    <div class="wizard-inner">
    <div class="connecting-line"></div>
    <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active" id="step_1"> 
    <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
    <span class="round-tab">
    <div class="numberCircle">1</div>
    </span>
    </a>
    </li>

    <li role="presentation" class="disabled" id="step_2">
    <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
    <span class="round-tab">
    <div class="numberCircle">2</div>
    </span>
    </a>
    </li>
    <li role="presentation" class="disabled" id="step_3">
    <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
    <span class="round-tab">
    <div class="numberCircle">3</div>
    </span>
    </a>
    </li>

    <li role="presentation" class="disabled" id="step_4">
    <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
    <span class="round-tab">
    <div class="numberCircle">4</div>
    </span>
    </a>
    </li>
    </ul>
    </div>
    <div class="tab-pane active" role="tabpanel" id="step1"><li><button type="button" class="btn btn-default prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn-info-full next-step" style="margin-top:-30px;">Save and continue</button></li></div>


    <div class="tab-pane" role="tabpanel" id="step2"><li><button type="button" class="btn btn-default prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn-info-full next-step" style="margin-top:-30px;">Save and Continue</button></li></div>


    <div class="tab-pane" role="tabpanel" id="step3"><li><button type="button" class="prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn btn-success btn-info-full next-step" style="margin-top:-30px;">Save and Finish</button></li></div>
    </div>

    </div>
    </div>
    </div>



    //The js tab script           
    <script>
    $(document).ready(function () {
    //Initialize tooltips
    $('.nav-tabs > li a[title]').tooltip();

    //Wizard
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

    var $target = $(e.target);

    if ($target.parent().hasClass('disabled')) {
    return false;
    }
    });

    $(".next-step").click(function (e) {

    var $active = $('.wizard .nav-tabs li.active');
    $active.next().removeClass('disabled');
    nextTab($active);

    var current_tab = e.target; //GOT CURRENT TAB
    var previous_tab = e.relatedTarget; //GOT PREVIOUS TAB

    $previous_tab.parent().addClass('disabled'); //WHAT I TRIED

    });


$(".prev-step").click(function (e) {

var $active = $('.wizard .nav-tabs li.active');
prevTab($active);

});
});

function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>

Upvotes: 0

Views: 727

Answers (3)

Shasha
Shasha

Reputation: 433

This is what used to solve it after days of trying.

    //Updated html
    <div class="wizard">
    <div class="wizard-inner">
    <div class="connecting-line"></div>
    <ul class="nav nav-tabs" role="tablist">

    <li role="presentation" class="active" id="step_1"> 
    <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
    <span class="round-tab">
    <div class="numberCircle">1</div>
    </span>
    </a>
    </li>

    <li role="presentation" class="disabled" id="step_2">
    <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
    <span class="round-tab">
    <div class="numberCircle">2</div>
    </span>
    </a>
    </li>
    <li role="presentation" class="disabled" id="step_3">
    <a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
    <span class="round-tab">
    <div class="numberCircle">3</div>
    </span>
    </a>
    </li>

    <li role="presentation" class="disabled" id="step_4">
    <a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
    <span class="round-tab">
    <div class="numberCircle">4</div>
    </span>
    </a>
    </li>
    </ul>
    </div>
    <div class="tab-pane active" role="tabpanel" id="step1"><li><button type="button" class="btn btn-default prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn-info-full next-step" style="margin-top:-30px;">Save and continue</button></li></div>


    <div class="tab-pane" role="tabpanel" id="step2"><li><button type="button" class="btn btn-default prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn-info-full next-step" style="margin-top:-30px;">Save and Continue</button></li></div>


    <div class="tab-pane" role="tabpanel" id="step3"><li><button type="button" class="prev-step" style="margin-top:-30px;">Previous</button></li>
<li><button type="button" class="btn btn-success btn-info-full next-step" style="margin-top:-30px;">Save and Finish</button></li></div>
    </div>

    </div>
    </div>
    </div>

       //updated javascript
      <script>
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();

//Wizard

var activeTab = null;


$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

activeTab = e.target;

var $target = $(e.target);

if ($target.parent().hasClass('disabled')) {
return false;
}


if($target == "#step1"){
$("#step_2").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_2").addClass('disabled');
$("#step_3").addClass('disabled');
$("#step_4").addClass('disabled');
}
else if($target == "#step2"){
$("#step_1").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_3").addClass('disabled');
$("#step_4").addClass('disabled');
} 
else if($target == "#step3"){
$("#step_1").attr("disabled","disabled");
$("#step_2").attr("disabled","disabled");
$("#step_4").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_2").addClass('disabled');
$("#step_4").addClass('disabled');
} else {
$("#step_1").attr("disabled","disabled");
$("#step_2").attr("disabled","disabled");
$("#step_3").attr("disabled","disabled");
$("#step_1").addClass('disabled');
$("#step_2").addClass('disabled');
$("#step_3").addClass('disabled');  
}

});

$(".next-step").click(function (e) {

var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);

});


$(".prev-step").click(function (e) {

var back = $('.wizard .nav-tabs li.previous');
back.next().removeClass('disabled');
prevTab(back);

});

});

function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
alert(back);    
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>

Upvotes: 0

chiefo
chiefo

Reputation: 281

Just as @P.Lalonde suggested, you can use toggle tab to activate and de-activate links.

$("data-toggle='tab'").on("click", function(e) {
  return $(this).closest("li").hasClass("active");
  });

Upvotes: 0

P. Lalonde
P. Lalonde

Reputation: 694

I would suggest having a custom click event on your links then. Having data-toggle='tab' and role='tab' indicates Bootstrap your are looking to toggle the tabs based on those links. So instead of registering your listener on the "Tab shown event", I would do this:

$("data-toggle='tab'").on("click", function(e) {
    return $(this).closest("li").hasClass("active");
});

Then, any click on a link having a parent "inactive" would have no effect.

Upvotes: 2

Related Questions