How to finalize additional categories of Navs Bootstrap in AJAX for DLE?

R

Roman Progressive2018-12-12 10:32:10

JavaScript

Roman Progressive, 2018-12-12 10:32:10

Hi all! I need your help! I beg you straight...
Well, the problem is that a lot of news is displayed on the main page and the site takes a very long time to load.
I was looking for a way how to use AJAX to load categories (news) when switching tabs.

Initially, I have such an example of displaying news with tabs from 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>

I found a hack for DLE (Ajax loading custom into the required block)
In /engine/ajax/ create a file called custom.php and paste this code into it:

<?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);
            });
        })
    });

Construction example:

<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>

Everything works fine, but the catch is this:
In Category 1 - I should have 3 extra categories (as above in the example, as I did without AJAX) In
Category 3 - I should have 5 extra categories
everyone when switching, for example, from Category 1 to Category 3, then the additional categories were tied to the Categories.
I did it like this and on this I fell into a stupar, because what I wanted to conceive did not work!

<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>