Dynamic form using Bootstrap Tabs

Question

I have a form, which will be released from the header data and items. I know how to use the Bootstrap Tab, but in the items I would like to call another page so that it is easy to launch the items and not refresh in the whole window.

<ul class="nav nav-tabs" role="tablist" id="menu">
    <li class="active"><a href="#dados" role="tab" data-toggle="tab">Dados</a></li>
    <li><a href="<?php echo base_url().'cadastros/entradas/teste'; ?> " role="tab" data-toggle="tab">Itens</a></li>
    <li><a href="#pagamento" role="tab" data-toggle="tab">Pagamento</a></li>
</ul>

<div class="tab-pane active"  id="itens">
</div>

Answer 1

From what I understand you want to make a call from a page via ajax by clicking on one of the tab, that’s it?

If it is, take a look here : http://getbootstrap.com/javascript/#tabs

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // activated tab
  e.relatedTarget // previous tab
});

There are n things you can do, one of them is to put an id for the item you want to do this and then make the call only for that item, go than you really need!

for example, in the

<li><a href="<?php echo base_url().'cadastros/entradas/teste'; ?> " role="tab" data-toggle="tab" id="meu_item_teste">Itens</a></li>

and no js

$('a#meu_item_teste').on('shown.bs.tab', function (e) {
    // aqui vem toda brincadeira do ajax
});