Dynamic Form Using Bootstrap Tabs

2

I have a form where the header and item data will be posted. I know how to use the Bootstrap Tab, but in the items I would like to call another page so it is easy to launch the items and not refresh in the entire 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>
    
asked by anonymous 19.09.2014 / 18:00

1 answer

1

So I understand you want to make a page call via ajax by clicking one of the tabs, is that it?

If so, take a look here: link

$('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 that wants to do this and then make the call only for that item,

For example, in

<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
});
    
19.09.2014 / 19:18