如何使用jQuery自動打開選項卡式模式使用特定的選項卡打開

我將數據從嵌入在選項卡式引導模式中的表單提交到laravel 5.2中的控制器方法。如何使用jQuery自動打開選項卡式模式使用特定的選項卡打開

每個選項卡都有其不同的形式，我需要在每個選項卡的表單頂部顯示驗證錯誤。這是我做到的：在所有選項卡的每個表單的頂部，我添加了驗證錯誤顯示代碼。如果表單出現錯誤，則錯誤將顯示在表單的頂部，但我無法看到它。現在，我做了一些搜索，並能自動重新打開情況下，沒有填補使用這段代碼在我看來形式的錯誤模式：

@if ($errors->all()) 
    $('#modal').modal('show'); 
@endif

但這只是打開模式爲默認標籤。我希望能夠用用戶填寫的表單打開模式，如果可能的話我想用JQuery來完成。可能嗎？

我的模式看起來是這樣的：

<!-- Button to trigger modal --> 
<a href="#TaskListDialog" role="button" class="btn btn-default" data-toggle="modal">Launch modal</a> 

<div id="TaskListDialog" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="windowTitleLabel"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <h3>Modal Heading</h3> 
      </div> 

      <div class="modal-body"> 
       <div class="tabbable"> 
        <ul class="nav nav-tabs"> 
         <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li> 
         <li><a href="#tab2" data-toggle="tab">Section 2</a></li> 
        </ul> 

        <div class="tab-content"> 
         <div class="tab-pane active" id="tab1"> 
          //space for another form here 
         </div> 
         <div class="tab-pane" id="tab2"> 
         //display validation error here 
          <form action="{{ route('someroute/') }}"> 
           <input type="text" name="name" class="form-control"> <br> 
           <input type="email" name="email" class="form-control"> <br> 
          </form> 

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

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

正如所看到的代碼，該選項卡section 1和section 2。

再一次我的問題是，如何打開section 2而不是默認section 1的模態？還是有更好的方法來做整個事情？

任何幫助將不勝感激。謝謝。

來源

2016-09-20 A. Apola

請讓我知道我的解決方案是否適合您？它總是很高興知道反饋:) –

@Prakash我沒有嘗試過你，我找到了一種方式，然後再回答。無論如何，感謝您的想法。 :) –

你可以，如果你想激活Section 2只需更換id_of_the_nav與tab2

演示用下面的代碼

$('.nav-tabs a[href="#id_of_the_nav"]').tab('show');

所以你的情況激活您想要的nav任何部分：https://jsfiddle.net/Prakash_Thete/s6jjmdc4/1/

來源

2016-09-20 10:10:35

好吧，我找到了一個方法。我在jquery中使用了一個點擊trigger。

<script> 
    $('#tab_id').trigger('click'); 
</script>

這相當於實際點擊標籤。

來源

2016-09-20 13:41:05

如何使用jQuery自動打開選項卡式模式使用特定的選項卡打開

回答

相關問題