Подзагрузка содержимого в табах?

Question

[Сергей Дефактов]

Добрый день есть табы с переключателем по 3 категориям
Все | Мой выбор | Популярное
каждый активный таб показывает выборку с бд через Echo и при этом очень грузит страницу так как загружается контент в табах сразу весь
как сделать чтобы при нажатии на определённую вкладку контент подгружался через ajax при этом при первой загрузки страницы загружался контент только по умолчанию активного таба ???

Код с табами

<div class="tabs">
    <input id="tab1" type="radio" name="tabs" checked>
    <label for="tab1" title="Все посты">Все посты</label>
 
    <input id="tab2" type="radio" name="tabs">
    <label for="tab2" title="Мой выбор">Мой выбор</label>
 
    <input id="tab3" type="radio" name="tabs">
    <label for="tab3" title="Популярное">Популярное</label>
 
    <section id="content-tab1">
        <p>
		
<?php $feeds = get_feeds('public')?>
<div  id="feed-lists" data-type="public" data-type-id="public" data-offset="0">
    <div class="line"></div>




    <?php $i = 0; foreach($feeds as $feed):fire_hook('feed.lists.inline', null, array($i));$i++?>
        <?php echo view('feed::feed', array('feed' => $feed))?>
    <?php endforeach?></div>
        </p>
    </section>  
    <section id="content-tab2">
        <p>
<?php $feeds = get_feeds('feed')?>
<div  id="feed-lists" data-type="feed" data-type-id="feed" data-offset="0">
    <div class="line"></div>




    <?php $i = 0; foreach($feeds as $feed):fire_hook('feed.lists.inline', null, array($i));$i++?>
        <?php echo view('feed::feed', array('feed' => $feed))?>
    <?php endforeach?></div>      </p>
    </section> 
    <section id="content-tab3">
        <p>
		<?php $feeds = get_feeds('popular')?>

    <?php $i = 0; foreach($feeds as $feed):fire_hook('feed.lists.inline', null, array($i));$i++?>
        <?php echo view('feed::feed', array('feed' => $feed))?>
    <?php endforeach?></div>  		</p>
    </section>

Answer 1

[profesor08]

Ну ты сам написал ответ на свой вопрос. Выводи текст сразу только в активном табе. А по клику по новому табу, грузи через ajax туда контент. Все. Ну и установи флаг для каждого таба, что он загружен.

Comments

[Сергей Дефактов]

а можно небольшой пример

[Kovalsky]

Сергей Дефактов, примеров асинхронной загрузки в интернетах вагон и малеещё один огромный вагон. Попробуйте заглянуть в гугл.

Answer 2

[Андрей Федосеев]

Не грузи лишнее по дефолту.
Например контент в <section id="content-tab2"> показывай только при ?get_tab_id_content=номер таба. Соответственно забирай со страницы с нужными номерами табов в гет запросе.

Answer 3

[Павел Корнилов]

If(!empty($_POST['tab1'])) echo $tab1;
// etc

Делаете аякс-запрос, передаете в нем нужную переменную, на сервере проверяете ее наличие и по ней отдаете нужный контент. Схема элементарна. Реализация - тоже не сложно.