Bootstrap tabcollapse not working for ajax call on small screens

427
November 22, 2016, at 08:35 AM

I am using Bootstrap tabcollapse plugin from this link: https://github.com/flatlogic/bootstrap-tabcollapse.

This plugin switches bootstrap tabs component to collapse (accordion) for small screens (mobile phone) and it is working fine for Larger screens e.g. Desktop. I have a ajax call on one of the tab. This ajax call is working absolutely fine when tabs are shown on large screen (e.g Desktop), but when tabs get switched to accordion for small screen, ajax query is not getting fired. Following is my code:

<ul id="details-tabs" class="nav nav-tabs">
  <li id="my-charges" class="active">
    <a href="#charges" data-toggle="tab">Charges</a>
  </li>
  <li id="conditions">
    <a href="#detail-conditions" data-toggle="tab">Conditions</a>
  </li>            
</ul>
<div class="tab-content">
  <div class="tab-pane fade in active" id="charges">
     Some HTML
  </div>
  <div class="tab-pane fade" id="detail-conditions">
     Data Via ajax
  </div>
</div>
<script>
  $('#conditions').click(function() 
  {  
    $.ajax({  
      dataType:'html' ,
      type: 'GET' , 
      data: {'id':1}, 
      url: 'controller/action',
      success: function(result)
             {
                $('#detail-conditions').html(result);
             }    
    });
  });
  $('#details-tabs').tabCollapse();
</script>
Answer 1

Add $('#details-tabs').tabCollapse(); in ajax success function.

    <script>
      $('#conditions').click(function() 
      {  
        $.ajax({  
          dataType:'html' ,
          type: 'GET' , 
          data: {'id':1}, 
          url: 'controller/action',
          success: function(result)
                 {
                    $('#detail-conditions').html(result);
$('#details-tabs').tabCollapse();
                 }    
        });
      });

    </script>
READ ALSO
Show/Hide Text Every Time An Arrow Is Clicked

Show/Hide Text Every Time An Arrow Is Clicked

I need help showing/hiding text on a button click (specifically an arrow). I have a block of text that I have hidden and I need to slide it down in a time consistent with the arrow rotating 180 degrees.

279
How to get the &lt;tr&gt; of a clicked element in a table

How to get the <tr> of a clicked element in a table

I have a table with several <tr>s and each one has several <td>s. The content of these columns can be another html element (for example a textbox) or just text.

355
Coldfusion saving variables without going to another page

Coldfusion saving variables without going to another page

I am trying to write a program that is basically one page but has many features on that one page. My question is how do I save variables to use if its always the same page.

217