Ajax подгрузка товара по клтку на кнопку

Общие вопросы по использованию второй версии фреймворка. Если не знаете как что-то сделать и это про Yii 2, вам сюда.
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

Здравтсвуйте. Как мне реализовать Ajax подгрузка товара по клтку на кнопку?
Нашел вот: http://kop.github.io/yii2-scroll-pager/
Вид:

Код: Выделить всё

<?= Html::submitButton('Показать еще сертификаты', ['class' => 'bt_sert']) ?>
				<?php
				echo \yii\widgets\ListView::widget([
					'dataProvider' => $dataProvider,
					'itemOptions' => ['class' => 'item'],
					'itemView' => '_item_view',
					'pager' => ['class' => \kop\y2sp\ScrollPager::className()]
				]);

				echo GridView::widget([
					'dataProvider' => $dataProvider,
					'pager' => [
						'class' => \kop\y2sp\ScrollPager::className(),
						'container' => '.grid-view tbody',
						'item' => 'tr',
						'paginationSelector' => '.grid-view .pagination',
						'triggerTemplate' => '<tr class="ias-trigger"><td colspan="100%" style="text-align: center"><a style="cursor: pointer">{text}</a></td></tr>',
					],
				]);
				?>
контроллер:

Код: Выделить всё

public function actionIndex()
	{
		$dataProvider = Product::find()->all();
		return $this->render('index', compact('dataProvider'));
	}
ошибка http://c2n.me/3KcNTrN
что я делаю не так? или если есть проще чтото, можете скинуть?
Аватара пользователя
futbolim
Сообщения: 2051
Зарегистрирован: 2012.07.08, 19:28

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение futbolim »

Код: Выделить всё

$dataProvider = new ActiveDataProvider([
    'query' => Product::find(),
]);
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

исправил. создал потом в виде файл _item_view.php у меня вывелись все статьи http://c2n.me/3KcRsqE
а как сделать чтобы выводилось допустим 3, и потом подгружалось по 3 штуки?
Аватара пользователя
Йож
Сообщения: 574
Зарегистрирован: 2015.08.26, 03:05

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Йож »

Код: Выделить всё

$dataProvider = new ActiveDataProvider([
    'query' => Product::find(),
    'pagination' => [
        'pageSize' => 3,
    ],
]);
кстати, расширение класс, использую несколько месяцев, настроить можно практически все..
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

добавил, появилась кнопка http://c2n.me/3Kd4KFP но при нажатии, ничего не подружается снизу. и как мне стилизовать ее?
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

сейчас когда я нажимаю на кнопку ничего не происходит, но когда перезагружаю страницу записи меняются просто, но не добавляются ниже
Аватара пользователя
rodion_zlobin
Сообщения: 207
Зарегистрирован: 2017.01.11, 16:33

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение rodion_zlobin »

А в консоле есть какие ошибки?
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

_item_view.php а что в этом файле должно быть?
Аватара пользователя
PartyPoison
Сообщения: 69
Зарегистрирован: 2017.04.27, 11:04

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение PartyPoison »

Провайдер в action

Код: Выделить всё

$dataProvider = new ActiveDataProvider([
            'query' => $query = Content::find(),
            'sort'=>array(
                'defaultOrder'=>['created' => SORT_DESC],
            ),
            'pagination' => [
                'pageSize' => 8,
            ],
        ]);
Пример View

Код: Выделить всё

<?php
            echo \yii\widgets\ListView::widget([
                'dataProvider' => $dataProvider,
                'itemView' => function($model){
                    return '<div class="wrapper-image">
                    <img src="/uploads/posts/' .$model->id. '/general/' . $model->image .'" alt="'.$model->title.'">
                    <a href="/rubric/'.$model->rubric.'">'.$model->rubric.'</a>
                </div>

                <div class="wrapper-content">
                    <div class="wrapper-title">
                        <a href="post/'. $model->id.'">'.$model->title.'</a>
                    </div>
                    <div class="wrapper-autor">
                        <a href=""><i class="fa fa-user"></i>Slovomagazine</a>
                    </div>

                    <div class="wrapper-text">
                        <p>'.$model->preview_text.'</p>
                    </div>

                    <div class="wrapper-more text-right">
                        <a href="post/'. $model->id.'">| ЧИТАТЬ ДАЛЕЕ</a>
                    </div>
                </div>';
                },
                'summary' => '',
                'itemOptions' => [
                    'class' => 'wrapper-item item',
                ],
                'pager' => [
                    'class' => \kop\y2sp\ScrollPager::className(),
                    'triggerText' => 'ПОКАЗАТЬ ЕЩЕ',
                    'triggerTemplate' => '<div class="wrapper-show-more text-center ias-trigger" style="cursor: pointer"><a>{text}</a></div>',
                    'noneLeftText' => 'Записей больше нет',
                ]
            ]);
            ?>
P.S Стили на кнопку вешаются как и на любую другую кнопку.
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

так ошибка http://c2n.me/3Kdsinm


контроллер:

Код: Выделить всё

public function actionIndex()
	{
		//$dataProvider = Product::find()->all();

		$dataProvider = new ActiveDataProvider([
			'query' => $query = Product::find(),
			'sort'=>array(
				'defaultOrder'=>['created' => SORT_DESC],
			),
			'pagination' => [
				'pageSize' => 8,
			],
		]);
		Yii::$app->controller->view->params = Yii::$app->session;
		$this->layout = 'mains';
		$this->setMeta('Название сайта', 'Ключи', 'Описание');
		return $this->render('index', compact('dataProvider'));
	}



вид

Код: Выделить всё

<?php
				echo \yii\widgets\ListView::widget([
					'dataProvider' => $dataProvider,
					'itemView' => function($model){
						return '<div class="wrapper-image">
                    <img src="/uploads/posts/' .$model->id. '/general/' . $model->image .'" alt="'.$model->title.'">
                    <a href="/rubric/'.$model->rubric.'">'.$model->rubric.'</a>
                </div>

                <div class="wrapper-content">
                    <div class="wrapper-title">
                        <a href="post/'. $model->id.'">'.$model->title.'</a>
                    </div>
                    <div class="wrapper-autor">
                        <a href=""><i class="fa fa-user"></i>Slovomagazine</a>
                    </div>

                    <div class="wrapper-text">
                        <p>'.$model->preview_text.'</p>
                    </div>

                    <div class="wrapper-more text-right">
                        <a href="post/'. $model->id.'">| ЧИТАТЬ ДАЛЕЕ</a>
                    </div>
                </div>';
					},
					'summary' => '',
					'itemOptions' => [
						'class' => 'wrapper-item item',
					],
					'pager' => [
						'class' => \kop\y2sp\ScrollPager::className(),
						'triggerText' => 'ПОКАЗАТЬ ЕЩЕ',
						'triggerTemplate' => '<div class="wrapper-show-more text-center ias-trigger" style="cursor: pointer"><a>{text}</a></div>',
						'noneLeftText' => 'Записей больше нет',
					]
				]);
				?>
Аватара пользователя
PartyPoison
Сообщения: 69
Зарегистрирован: 2017.04.27, 11:04

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение PartyPoison »

Artikk писал(а): 2017.05.08, 13:56 так ошибка http://c2n.me/3Kdsinm
Само собой ошибка, вы вид мой скопировали просто с моей моделью, сформируйте свой. Чтобы все это еще сделать в должном виде прочитайте про свойство itemView для ListView.
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

все равно не работает....
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

Artikk писал(а): 2017.05.08, 07:16 сейчас когда я нажимаю на кнопку ничего не происходит, но когда перезагружаю страницу записи меняются просто, но не добавляются ниже
я выше делал, так работало ,но не перезружалось и не подгружаля контент
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

Контроллер:

Код: Выделить всё

public function actionIndex()
	{
		//$dataProvider = Product::find()->all();
		/*$dataProvider = new ActiveDataProvider([
			'query' => Product::find(),
			'pagination' => [
				'pageSize' => 3,
			],
			'sort' => [
				'defaultOrder' => [
					'id' => SORT_DESC,
				]
			],
		]);*/

		$dataProvider = new ActiveDataProvider([
			'query' => $query = Product::find(),
			'sort'=>array(
				'defaultOrder'=>['created' => SORT_DESC],
			),
			'pagination' => [
				'pageSize' => 8,
			],
		]);


		Yii::$app->controller->view->params = Yii::$app->session;
		$this->layout = 'mains';
		$this->setMeta('Название сайта', 'Ключи', 'Описание');
		return $this->render('index', compact('dataProvider'));
	}
вид:

Код: Выделить всё

<?php
				echo \yii\widgets\ListView::widget([
					'dataProvider' => $dataProvider,
					'itemView' => function($model){
						return '<div class="wrapper-image">
                    <img src="/uploads/posts/">
                    <a href="/rubric/">пример</a>
                </div>
                <div class="wrapper-content">
                    <div class="wrapper-title">
                        <a href="post/">пример</a>
                    </div>
                    <div class="wrapper-autor">
                        <a href=""><i class="fa fa-user"></i>Slovomagazine</a>
                    </div>

                    <div class="wrapper-text">
                        <p>пример</p>
                    </div>

                    <div class="wrapper-more text-right">
                        <a href="post/">| ЧИТАТЬ ДАЛЕЕ</a>
                    </div>
                </div>';
					},
					'summary' => '',
					'itemOptions' => [
						'class' => 'wrapper-item item',
					],
					'pager' => [
						'class' => \kop\y2sp\ScrollPager::className(),
						'triggerText' => 'ПОКАЗАТЬ ЕЩЕ',
						'triggerTemplate' => '<div class="wrapper-show-more text-center ias-trigger" style="cursor: pointer"><a>{text}</a></div>',
						'noneLeftText' => 'Записей больше нет',
					]
				]);
				?>
все модели я убрал. но пишет ошибку: http://c2n.me/3KfDCMz

почему так?
Аватара пользователя
Akulenok
Сообщения: 437
Зарегистрирован: 2014.05.05, 18:32
Откуда: localhost

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Akulenok »

А как этот плагин использовать вместо LinkPager?
данные я вывожу через <?php foreach ($models as $comment) : ?>
и после этого вывожу <?= LinkPager::widget(['pagination' => $pages]) ?> который выводит постраничную навигацию
ភាសាខ្មែរ Yii2 - это кайф!
Аватара пользователя
Йож
Сообщения: 574
Зарегистрирован: 2015.08.26, 03:05

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Йож »

Через DI переопределите \yii\widgetsLinkPager на \kop\y2sp\ScrollPager.

Если версия Yii свежая, то можно так в конфиге:

Код: Выделить всё

'container' => [
        'definitions' => [
            'yii\widgets\LinkPager' => [
                'class' => \kop\y2sp\ScrollPager::className(),
                'container' => '.comments-container',
                'item' => '.item',
                'paginationSelector' => '.pagination',
                'triggerTemplate' => '<tr class="ias-trigger"><td colspan="100%" style="text-align: center"><a style="cursor: pointer">{text}</a></td></tr>',
            ], 
        ],
    ],
Только не забудьте html разметку под конфиг вытавить или наоборот.
А так, конечно, лучше через listview - там и же пагинация сразу будет подцепляться..
Artikk
Сообщения: 742
Зарегистрирован: 2017.02.10, 09:12

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение Artikk »

Вид:

Код: Выделить всё

<?php
				echo  \kop\y2sp\ScrollPager::widget([
					'dataProvider' => $dataProvider,
					'itemView' => function($model){
						return '<div class="wrapper-image">
                    <img src="/uploads/posts/">
                    <a href="/rubric/">пример</a>
                </div>
                <div class="wrapper-content">
                    <div class="wrapper-title">
                        <a href="post/">пример</a>
                    </div>
                    <div class="wrapper-autor">
                        <a href=""><i class="fa fa-user"></i>Slovomagazine</a>
                    </div>

                    <div class="wrapper-text">
                        <p>пример</p>
                    </div>

                    <div class="wrapper-more text-right">
                        <a href="post/">| ЧИТАТЬ ДАЛЕЕ</a>
                    </div>
                </div>';
					},
					'summary' => '',
					'itemOptions' => [
						'class' => 'wrapper-item item',
					],
					'pager' => [
						'class' => \kop\y2sp\ScrollPager::className(),
						'triggerText' => 'ПОКАЗАТЬ ЕЩЕ',
						'triggerTemplate' => '<div class="wrapper-show-more text-center ias-trigger" style="cursor: pointer"><a>{text}</a></div>',
						'noneLeftText' => 'Записей больше нет',
					]
				]);
				?>

ошибку пишет http://c2n.me/3KfT2b0
sosnovskiy
Сообщения: 239
Зарегистрирован: 2017.03.28, 20:03

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение sosnovskiy »

У \kop\y2sp\ScrollPager нет такого параметра как dataProvider - https://github.com/kop/yii2-scroll-page ... lPager.php

И это виджет пагинации а не view
Последний раз редактировалось sosnovskiy 2017.05.10, 11:49, всего редактировалось 1 раз.
sosnovskiy
Сообщения: 239
Зарегистрирован: 2017.03.28, 20:03

Re: Ajax подгрузка товара по клтку на кнопку

Сообщение sosnovskiy »

Вот пример как использовать этот виджет:

Код: Выделить всё

echo GridView::widget([
     'dataProvider' => $dataProvider,
     'pager' => [
        'class' => \kop\y2sp\ScrollPager::className(),
        'container' => '.grid-view tbody',
        'item' => 'tr',
        'paginationSelector' => '.grid-view .pagination',
        'triggerTemplate' => '<tr class="ias-trigger"><td colspan="100%" style="text-align: center"><a style="cursor: pointer">{text}</a></td></tr>',
     ],
]);
Ответить