Bootstrap navtabs не работает

Question

У меня есть загрузочный navtab, который отображает данные в таблице на каждой вкладке. У меня также есть datepicker, который позволяет вам ввести дату, нажать «Отправить», а затем отобразить данные для этой даты на вкладках. Мне нужно было иметь возможность переключаться между вкладками и вводить дату в datepicker, чтобы обновлять данные на вкладке. То, что я делал, за исключением того, что, когда я изначально пытаюсь перейти с вкладки delayedspiff на вкладку instantspiff, instantspiff не будет работать, пока я не введу дату и не нажму кнопку submit на моей кнопке. Вот мой код для моего navtabs и кнопки:

<div class="row spiff-datepicksection"> 
       <div class="col-lg-6 pull-right"> 
        <div class="col-sm-5 col-lg-offset-4"> 
         <div class="form-group"> 
          <div class="input-group date"> 
           <input type="text" id="startDate" class="form-control" /> 
           <span class="input-group-addon"> 
            <span class="glyphicon glyphicon-calendar"></span> 
           </span> 
          </div> 
         </div> 
        </div> 
        <div class="col-lg-3"> 
         <input class="spiffdate-btn spiffdate" type="button" value="Submit" /> 
        </div> 
       </div> 
      </div> 


      <div class="row spiff_tabs_body"> 
       <!-- Nav tabs --> 

       <ul class="nav nav-tabs spiff_tabs" role="tablist"> 
        <li role="presentation" class="active"> 

         <a href="#home" aria-controls="home" class="spiffdate" role="tab" data-id="delayedspiff" data-toggle="tab">Potential Spiff</a> 


        </li> 
        <li role="presentation"> 

         <a href="#profile" class="spiffdate" aria-controls="profile" role="tab" data-id="instantspiff" data-toggle="tab">Instant Spiff</a>  

        </li> 
       </ul> 
       <!-- Tab panes --> 
       <div class="tab-content" id="details"> 
        <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div> 
        <div role="tabpanel" class="tab-pane" id="instantspiff"></div> 
       </div> 
      </div> 
     </div> 
    </div> 

и вот мое событие click. Я пытаюсь использовать spiffdate класса, чтобы иметь возможность использовать событие click в переключателе табуляции.

<script>  
    $(".spiffdate").click(function() { 
     var correctId = $("ul.spiff_tabs li.active a").attr('data-id'); 

     var endDate = $("#startDate").val(); 
     if (endDate == "") { 

     } else { 
      if (correctId == "delayedspiff") 
      { 
       FormGet('dashboard/delayedspiff?endDate=' + endDate, 'delayedspiff') 


      } else if (correctId = "instantspiff") { 
       FormGet('dashboard/instantspiff?endDate=' + endDate, 'delayedspiff') 

      }   
     }  
    }); 
</script> 

Answer 1

Что может случиться, так это то, что ваша функция щелчка фактически вызывается перед событием изменения табуляции. Поэтому класс active не был применен к новому элементу до того, как вы сделаете что-то еще.

Чтобы решить эту проблему, я бы посмотрел событие shown.bs.tab.

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    //do your code here now 
}); 

Answer 2

Что такое @Ohgodwhy рекомендуется, это правильный способ проверить событие на переключателе табуляции. Но поскольку у вас есть обработчик кликов, сопоставленный с кнопкой отправки и вкладками, вам нужно будет правильно обрабатывать вызовы.

Вот кое-что вы можете попробовать

var correctId; 
var triggerFromTabs; 

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { 
    alert('Event From Tab'); 
     if($("#startDate").val().length) 
      populateData();     
}); 

function populateData() 
{ 
    alert('populate data'); 
    if (correctId == "delayedspiff") 
      { 
       $("#divData").html("Data For Delayed");    


      } else if (correctId == "instantspiff") { 

       $("#divData").html("Data For Instant"); 

      }  
} 


$(".spiffdate").click(function (e) { 
     if($(this).data("id") != undefined) 
     { 
      triggerFromTabs = true; 
      correctId = $(this).data("id"); 
     } 
     else 
     { 
      triggerFromTabs = false; 
      correctId = $("ul.spiff_tabs li.active a").attr('data-id'); 
     } 
     alert("Selected tab : " + correctId); 
     if($("#startDate").val().length && !triggerFromTabs) 
     populateData(); 
    }); 

Вот рабочий пример: http://jsfiddle.net/RxguB/201/