Bootstrap tables, load from url - remove dom after change

Question

Greetings im struggeling with a small issue, each time I open a tab it add's the content to the whole html document, so for example if I open 3 tabs at once, I will get all the html data inside the tab div's content, but what I want to achieve is just to have 1 populated div with the data. It is mostlikely Jquery relevant question - and everything works fine apart of my question. My solution would be - onclick->load my desired tab->remove the content from the other containers, but how to write it?

Jquery code that manipulates the data

 $('#myTabs a').click(function (e) {
        e.preventDefault();

        var url = $(this).attr("data-url");
        var href = this.hash;
        var pane = $(this);
               $.blockUI({ 
    message: '<img src="<?PHP echo base_url();?>assets/images/load.gif" alt="Loading" /> Loading...' }); 

        $(href).load(url,function(result){      
            pane.tab('show');

            $.unblockUI();
        });
    });

Block representing the tab selection

<ul class="nav nav-tabs" id="myTabs">
        <li><a href="#data1" data-url="<?PHP echo base_url();?>Klienci/Profil/<?PHP echo $this->uri->segment(3);?>/DK">Client data1</a></li>
        <li><a href="#data2" data-url="<?PHP echo base_url();?>Klienci/Profil/<?PHP echo $this->uri->segment(3);?>/OK">Client data2</a></li>
        <li><a href="#data3" data-url="<?PHP echo base_url();?>Klienci/Profil/<?PHP echo $this->uri->segment(3);?>/PR">Client data3</a></li>
        <li><a href="#data4" data-url="<?PHP echo base_url();?>Klienci/Profil/<?PHP echo $this->uri->segment(3);?>/ZG">Client data4</a></li>
      </ul>

The containers for corespodning tabs

<div class="tab-pane fade" id="data1"></div>
<div class="tab-pane fade" id="data2"></div>
<div class="tab-pane fade" id="data3"></div>
<div class="tab-pane fade" id="data4"></div>

possible duplicate of stackoverflow.com/questions/14719747/… — Farside
– Farside, Commented Feb 24, 2016 at 18:34

Farside · Accepted Answer · 2016-02-24 18:32:41Z

0

to write to the tab, you need to write the html into it. With jQuery it will be:

$tabPaneSelector.html(resultHtml);

answered Feb 24, 2016 at 18:32

Farside

10.4k4 gold badges52 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap tables, load from url - remove dom after change

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related