Привет всем! Нужна Ваша Помощь! прям умоляю...
Ну проблема такова что много новостей выводятся на главную страницу и сайт очень долго загружается.
Искал способ как с помощью 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>
