Как сделать при нажатии кнопки вывод всех новостей AJAX?

Question

[Роман Прогрессив]

Привет всем!

через bootstrap tabs выведены новости на главной странице
Tab - Категория 1

{custom category="1,2,3" template="shortstory" order="title" sort="desc" limit="15"}

Tab - Категория 2

{custom category="4" template="shortstory" order="title" sort="desc" limit="15"}

Tab - Категория 3

{custom category="5" template="shortstory" order="title" sort="desc" limit="15"}

как сделать что бы 15 новостей отображалось,
а дальше показать еще 15 новостей, при нажатии кнопки отображались по 15 новостей еще.
А если все новости отображены то кнопки не видно!

Answer 1

[Ihor Bratukh]

Нужно править cms, php, sql запросы, но если по простому то поставьте модуль: BlockPRO

Comments

[Роман Прогрессив]

Не решение использовать BlockPRO
сейчас задача что бы кнопка исчезала

[Ihor Bratukh]

<button data-show-ajax=".block">Показать все</button>
<div class="block" style="display:none">
{custom category="1,2,3" template="shortstory" order="title" sort="desc" from="15"}
</div>

$('[data-show-ajax]').on('click touch', function(event) {
	event.preventDefault();
	$($(this).attr('data-show-ajax')).show();
	$(this).hide();
});

[Роман Прогрессив]

BRAGA96, А в чём разница между этим способом?

<button onclick="$(this).next('div').show();$(this).hide();">Показать все</button>
<div style="display:none">
{custom category="1,2,3" template="shortstory" order="title" sort="desc" from="15"}
</div>

[Роман Прогрессив]

BRAGA96, Единственное что напрягает это то что если всего 12-14 новостей в категории
то кнопка все равно видна я как понял это не как не поправить? что бы если меньше 15 было новостей кнопки не видно было?

[Ihor Bratukh]

Роман Прогрессив, способ более универсальный, более гибкий. Кнопку можно поставить где угодно, а не только перед показывающим блоком. Один JS обработчик а не inline js в атрибутах html. Одна кнопка может показать сразу несколько блоков.

<button data-show-button="myBlock">Показать все</button>
<div data-show-block="myBlock" style="display:none">
	{custom category="1,2,3" template="shortstory" order="title" sort="desc" from="15"}
</div>

$.each($('[data-show-block]'), function() {
	if ($(this).children().length <= 15) {
		var id = $(this).attr('data-show-block');
		$('[data-show-button="'+ id +'"]').hide();
	}
});

$('[data-show-button]').on('click touch', function(event) {
	event.preventDefault();
	var id = $(this).attr('data-show-button');
	$('[data-show-block="'+ id +'"]').show();
	$('[data-show-button="'+ id +'"]').hide();
});

[Роман Прогрессив]

BRAGA96, что то не хочет работать, не показывает новости после нажатия кнопки, хмм

Answer 2

[Роман Прогрессив]

Под каждым "custom" добавить еще "custom", без параметра limit, но с параметром from. Каждый новый тег помещаем в скрытый div-контейнер, рядом кнопку для показа.
Пример для первой вкладки, нужна jquery

{custom category="1,2,3" template="shortstory" order="title" sort="desc" limit="15"}
<br />
<button onclick="$(this).next('div').show()">Показать все</button>
<div style="display:none">
{custom category="1,2,3" template="shortstory" order="title" sort="desc" from="15"}
</div>

сделал вот так ну при этом надо что бы кнопка исчезала если отобразились все новости, и и больше не чего показывать!

Comments

[Евгений]

аяксом здесь и не пахнет

[Роман Прогрессив]

Евгений, ну тогда JS