title: Bootstrap 3 tabs not loading content via ajax
body: <p>I am working on bootstrap tabs and all the content is loaded into the tab using Ajax via remote url. But in my case I am not able to make it work as expected. I googled thoroughly and tried different ways but none of them succeeded. </p>
  
  <p>Here is what I have tried so far.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;ul class="nav nav-tabs" role="tablist"&gt;
              &lt;li role="presentation"&gt;
                  &lt;a href="showTab1.do" data-target="#test_1" id="tab1" aria-controls="test_1" role="tab" data-toggle="tab"&gt;Tab-1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li role="presentation"&gt;
                  &lt;a href="showTab2.do" data-target="#test_2" id="tab2" aria-controls="test_2" role="tab" data-toggle="tab"&gt;Tab-2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li role="presentation"&gt;
                  &lt;a href="showTab3.do" data-target="#test_3" id="tab3" aria-controls="test_3" role="tab" data-toggle="tab"&gt;Tab-3&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="tab-content"&gt;
              &lt;div role="tabpanel" class="tab-pane" id="test_1"&gt;&lt;/div&gt;
              &lt;div role="tabpanel" class="tab-pane" id="test_2"&gt;&lt;/div&gt;
              &lt;div role="tabpanel" class="tab-pane" id="test_3"&gt;&lt;/div&gt; 
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>&lt;script&gt;
          $(document).ready(function() {
              $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
                var url = $(this).attr("href"); // the remote url for content
                var target = $(this).data("target"); // the target pane
                var tab = $(this); // this tab
  
                // ajax load from data-url
                $(target).load(url,function(result){      
                  tab.tab('show');
                });
              });
  
              // initially activate the first tab..
              $('#tab1').tab('show');
          });
    &lt;/script&gt;
  </code></pre>
  
  <p>The above code only works for First Tab i.e. Tab-1 but when I click on Tab-2 I can see Ajax call works successfully but it does not loads content there in tab and redirects to blank page. I am not getting where I am doing it wrong. Please point me if I am doing wrong.</p>
  
  <p><strong>NOTE</strong>: I followed <a href="http://www.codeply.com/go/xZfTnAtKUM" rel="nofollow">http://www.codeply.com/go/xZfTnAtKUM</a> this link for this.</p>