Задать вопрос
Pro-gressive
@Pro-gressive
javascript

Как доработать доп.категории Navs Bootstrap в AJAX для DLE?

Привет всем! Нужна Ваша Помощь! прям умоляю...
Ну проблема такова что много новостей выводятся на главную страницу и сайт очень долго загружается.
Искал способ как с помощью AJAX сделать подгрузку категорий(новостей) при переключении табов.

Изначально у меня вот такой пример вывод новостей с табами от Bootstrap
$(function() {
$('ul.tabs_caption').on('click', 'li:not(.active)', function() {
$(this).addClass('active').siblings().removeClass('active').closest('div.tabs').children('div.tabs_content').removeClass('active').eq($(this).index()).addClass('active');
});
});

<div class="tabs">
	<ul class="tabs_caption" id="nav_btns">
	<li class="active"><div class="btn_selection"><span>Категория 1</span></div></li>
	<li><div class="btn_selection"><span>Категория 2</span></div></li>
	<li><div class="btn_selection"><span>Категория 3</span></div></li>
	</ul>        
<div class="tabs_content active">
<h1>Популярные</h1>
<div class="tabs">
	<ul class="tabs_caption" data-animated="bounceIn" id="nav_btns">
	<li class="active"><div class="btn_selection"><span>доп. категория 1-1</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 1-2</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 1-3</span></div></li>
	</ul>       
<div class="tabs_content active">
{custom category="1" template="shortstory" order="title" sort="desc" cache="yes" from="12"}          
</div>
<div class="tabs_content">
{custom category="2" template="shortstory" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
{custom category="3" template="shortstory" order="date" sort="asc" cache="yes" limit="15"}
</div>               
</div>                  
</div>
<div class="tabs_content">
{custom category="4" template="shortstory" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
<h1>Популярные</h1>    
<div class="tabs">
	<ul class="tabs_caption" id="nav_btns">
	<li class="active"><div class="btn_selection"><span>доп. категория 3-1</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 3-2</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 3-3</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 3-4</span></div></li>
	<li><div class="btn_selection"><span>доп. категория 3-5</span></div></li>
	</ul>
<div class="tabs_content active">
{custom category="6" template="shortstory_macros" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
{custom category="7" template="shortstory_macros" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
{custom category="8" template="shortstory_macros" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
{custom category="9" template="shortstory_macros" order="date" sort="asc" cache="yes" limit="15"}
</div>
<div class="tabs_content">
{custom category="10" template="shortstory_macros" order="date" sort="asc" cache="yes" limit="15"}
</div>
</div>
</div>       
</div>


Нашел хак для DLE (Ajax подгрузка custom в нужный блок)
В /engine/ajax/ создайте файл с названием custom.php в него вставьте этот код: 
<?php
@error_reporting ( E_ALL ^ E_WARNING ^ E_NOTICE );
@ini_set ( 'display_errors', true );
@ini_set ( 'html_errors', false );
@ini_set ( 'error_reporting', E_ALL ^ E_WARNING ^ E_NOTICE );

define( 'DATALIFEENGINE', true );
define( 'ROOT_DIR', substr( dirname(  __FILE__ ), 0, -12 ) );
define( 'ENGINE_DIR', ROOT_DIR . '/engine' );


include ENGINE_DIR . '/data/config.php';
require_once ENGINE_DIR . '/classes/mysql.php';
require_once ENGINE_DIR . '/data/dbconfig.php';
include_once ENGINE_DIR . '/classes/plugins.class.php';
include_once (DLEPlugins::Check(ENGINE_DIR . '/modules/functions.php'));
include_once (DLEPlugins::Check(ENGINE_DIR . '/classes/templates.class.php'));

dle_session();

require_once ENGINE_DIR . '/modules/sitelogin.php';
require_once ROOT_DIR . '/language/' . $config['langs'] . '/website.lng';
@header( "Content-type: text/html; charset=" . $config['charset'] );

if(!$is_logged) $member_id['user_group'] = 5;

//################# Определение групп пользователей
$user_group = get_vars( "usergroup" );
if( ! $user_group ) {
    $user_group = array ();
    $db->query( "SELECT * FROM " . USERPREFIX . "_usergroups ORDER BY id ASC" );
    while ( $row = $db->get_row() ) {
        $user_group[$row['id']] = array ();
        foreach ( $row as $key => $value ) $user_group[$row['id']][$key] = stripslashes($value);
    }
    set_vars( "usergroup", $user_group );
    $db->free();
}
//################# Определение категорий и их параметры
$cat_info = get_vars( "category" );
if( ! is_array( $cat_info ) ) {
    $cat_info = array ();
    $db->query( "SELECT * FROM " . PREFIX . "_category ORDER BY posi ASC" );
    while ( $row = $db->get_row() ) {
        $cat_info[$row['id']] = array ();
        foreach ( $row as $key => $value ) $cat_info[$row['id']][$key] = stripslashes( $value );
    }
    set_vars( "category", $cat_info );
    $db->free();
}
define( 'TEMPLATE_DIR', ROOT_DIR . '/templates/'.$config['skin']);
$custom = isset($_POST["castom"]) && is_scalar($_POST["castom"]) ? trim(strip_tags(stripslashes($_POST["castom"]))) : false;
if($custom==false) return;
if( strpos( $custom, "custom" ) !== false ) {
    $custom = "{".$custom."}";
    $custom = preg_replace_callback( "#\\{custom(.+?)\\}#i", "custom_print", $custom );
    if($custom !="") echo $custom;
}
?>

$(function($){
        $("body").on("click", "[data-ajaxc]", function(){
            var $castom = $(this).attr("data-ajaxc");
            $.post(dle_root+"engine/ajax/custom.php", {castom:$castom}, function(data){
                $("[data-trigercajax]").html(data);
            });
        })
    });

Пример конструкции: 
<span data-ajaxc="custom id='1' template='shortstory'">Таб 0</span>
<span data-ajaxc="custom id='2' template='shortstory'">Таб 1</span>
<span data-ajaxc="custom id='3' template='shortstory'">Таб 2</span>
<div data-trigercajax="set">{custom id="1" template="shortstory"}</div>


Все работает прекрасно, ну загвоздка вот в чём:
В Категории 1 - у меня должно быть 3 шт доп.категории (как выше в примере, как я делал без AJAX)
В Категории 3 - у меня должно быть 5 шт доп.категорий
При этом всем когда переключавшийся к примеру, с Категории 1 на Категорию 3, то доп.категории привязаны были к Категориям.
Сделал вот так и на этом в ступар в пал, так как что хотел задумать не получается!
<div class="tabs">    
<ul class="tabs_caption" id="nav_btns">
<li class="active"><div class="btn_selection" data-ajaxc="custom category='1' template='shortstory' order='title' sort='desc'"><span>Категория 1</span></div></li>
<li><div class="btn_selection" data-ajaxc="custom category='4' template='shortstory' order='title' sort='desc'"><span>Категория 2</span></div></li>
<li><div class="btn_selection" data-ajaxc="custom category='6,7,8,9,10' template='shortstory' order='title' sort='desc'"><span>Категория 3</span></div></li>
</ul>        
<div class="tabs_content active">
<h1>Популярные</h1>
<div class="tabs">
<ul class="tabs_caption" data-animated="bounceIn" id="nav_btns">
<li class="active"><div class="btn_selection" data-ajaxc="custom category='1' template='shortstory' order='title' sort='desc'"><span>Под. Категория 1-1</span></div></li>
<li><div class="btn_selection" data-ajaxc="custom category='2' template='shortstory' order='title' sort='desc'"><span>Под. Категория 1-2</span></div></li>
<li><div class="btn_selection" data-ajaxc="custom category='3' template='shortstory' order='title' sort='desc'"><span>Под. Категория 1-3</span></div></li>
</ul> 
</div>      
<div data-trigercajax="set">
{custom category="1" template="shortstory" order="title" sort="desc" cache="yes" from="12"}
</div>   
</div>
</div>
  • Вопрос задан
  • 226 просмотров
8 комментариев
Подписаться 1 Средний 8 комментариев
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
После обновления перестал работать старый сайт на Wordpress
23 нояб. 2024, в 19:29
750 руб./за проект
Требуется реализовать backend-часть проекта
23 нояб. 2024, в 19:14
35000 руб./за проект
Развернуть OpenSource софт на сервере
23 нояб. 2024, в 17:32
5000 руб./за проект
Ещё заказы