How to use pjax with pagination in yii2 - php

Question

I want to use pjax with pagination in yii2.
When user clicks on next page, i want to reload only one div with dynamic contents.
I have put pjax::begin() and pjax::end() before and end of my div.
This is my controller code :
public function actionRestaurantDetails(){
$this->layout = "detail";
if(isset($_REQUEST['rid']) && !empty($_REQUEST['rid'])){
$rid = $_REQUEST['rid'];
$snRestaurantsDetail = Restaurants::find()->where(['id'=>$_REQUEST['rid']])->one();
$snRestaurantMenuCategoryArr = MenuCategories::find()->where(["status"=>"1"])->all();
$snRestaurantMenusArr = RestaurantMenu::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"])->all();
$query = RestaurantsGallery::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"]);
$snRestaurantgallerysArr = RestaurantsGallery::find()->where(['restaurant_id'=>$_REQUEST['rid'],'status'=>"1"])->all();
$pagination = new Pagination(['totalCount' => $query->count(), 'pageSize'=>3]);
$models = $query->offset($pagination->offset)
->limit($pagination->limit)
->all();
$snRestaurantLayoutsArr = $snRestaurantsDetail->getRestaurantLayouts();
$snRestaurantTablesArr = $snRestaurantsDetail->getRestaurantTables();
$snRestaurantWorkingHoursArr = $snRestaurantsDetail->getRestaurantWorkingHours();
$snRestaurantMealTimesArr = $snRestaurantsDetail->getRestaurentMealTimes();
//p($snRestaurantsDetail);
}
return $this->render('restaurant_detail', [
'snRestaurantsDetail' => $snRestaurantsDetail,
'snRestaurantMenuCategoryArr' => $snRestaurantMenuCategoryArr,
'snRestaurantMenusArr' => $snRestaurantMenusArr,
'snRestaurantMealTimesArr' => $snRestaurantMealTimesArr,
'snRestaurantWorkingHoursArr' => $snRestaurantWorkingHoursArr,
'snRestaurantgallerysArr' => $snRestaurantgallerysArr,
'models' => $models,
'pagination' => $pagination,
]);
}
And this is my view :
<?php
use common\models\RestaurantMenu;
use yii\widgets\Pjax;
?>
<div class="container">
<div class="row align-items-center site-vh-100">
<div class="col-md-12">
<?php
$url = Yii::getAlias('#web')."/img/chiefs-rs-text.png";
?>
<!-- <a class="brand" href="#"><img src="<?php echo $url; ?>" width="35%" height="35%"></a> -->
<h1 class="site-heading site-animate mb-3"><?= !empty($snRestaurantsDetail) ? $snRestaurantsDetail->name : "-" ?></h1>
<h2 class="h5 site-subheading mb-5 site-animate">Please book our restaurant now</h2>
<?php if(Yii::$app->user->isGuest){ ?>
<p>For Booking Restaurant :Register Now</p>
<?php }else{ ?>
<p>Book Now</p>
<?php } ?>
</div>
</div>
</section>
<section class="site-section section_details" id="section-about">
<div class="container">
<div class="row">
<div class="col-md-5 site-animate mb-5">
<h4 class="site-sub-title">Our Story</h4>
<h2 class="site-primary-title display-4">Welcome</h2>
<p><?= !empty($snRestaurantsDetail->description) ? $snRestaurantsDetail->description : "No contents found." ?></p>
<!-- <p class="mb-4">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p> -->
</div>
<div class="col-md-1"></div>
<div class="col-md-6 site-animate img" data-animate-effect="fadeInRight">
<img src="<?= ($snRestaurantsDetail->photo) ? Yii::getAlias('#web')."../../../uploads/".$snRestaurantsDetail->photo : "No image uploaded"?>" alt="chiefsRS" class="img-fluid" style="width:100%;height: 60vh">
</div>
</div>
</div>
</section>
<section class="site-section section_details" id="section-menu">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mb-5 site-animate">
<h2 class="display-4">Delicious Menu</h2>
<div class="row justify-content-center">
<div class="col-md-7">
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
</div>
<div class="col-md-12 text-center">
<ul class="nav site-tab-nav nav-pills mb-5" id="pills-tab" role="tablist">
<?php
if(!empty($snRestaurantMenuCategoryArr)){
foreach ($snRestaurantMenuCategoryArr as $key => $category) { ?>
<li class="nav-item site-animate">
<a class="nav-link <?= (strtolower($category->name) == "breakfast") ? 'active' : '' ?>" id="pills-<?= strtolower($category->name)?>-tab" data-toggle="pill" href="#pills-<?= strtolower($category->name)?>" role="tab" aria-controls="pills-<?= strtolower($category->name);?>" aria-selected="true"><?= $category->name;?></a>
</li>
<?php }
}
?>
</ul>
<div class="tab-content text-left">
<?php
if(!empty($snRestaurantMenuCategoryArr)){
foreach ($snRestaurantMenuCategoryArr as $key => $category) { ?>
<div class="tab-pane fade <?= (strtolower($category->name) == "breakfast") ? 'show active' : '' ?>" id="pills-<?= strtolower($category->name)?>" role="tabpanel" aria-labelledby="pills-<?= strtolower($category->name)?>-tab">
<div class="row">
<?php
$breakfastMenu = RestaurantMenu::find()->where(['restaurant_id'=>$_REQUEST['rid'],'menu_category_id'=>$category->id,'status'=>"1"])->all();
// p($breakfastMenu);
if(!empty($breakfastMenu)){
foreach ($breakfastMenu as $key_menu => $menu) { ?>
<div class="col-md-6 site-animate">
<div class="media menu-item">
<img class="mr-3" src="<?php echo Yii::getAlias('#web')."/../../uploads/".$menu->photo; ?>" class="img-fluid" alt="chiefsRS">
<div class="media-body">
<h5 class="mt-0"><?= !empty($menu->name) ? $menu->name : ""?></h5>
<p><?= !empty($menu->description) ? $menu->description : ""?></p>
<h6 class="text-primary menu-price"><?= !empty($menu->price) ? "$".$menu->price : ""?></h6>
</div>
</div>
</div>
<?php
}
}
?>
</div>
</div>
<?php }
}
?>
</div>
</div>
</div>
</div>
</section>
<!-- END section -->
<?php
Pjax::begin(['id' => 'gallery_r','timeout'=>100000]); ?>
<section class="site-section section_details" id="section-gallery">
<div class="container">
<div class="row site-custom-gutters">
<div class="col-md-12 text-center mb-5 site-animate">
<h2 class="display-4">Gallery</h2>
<div class="row justify-content-center">
<div class="col-md-7">
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
</div>
</div>
</div>
<div id="categories"></div>
<?php if (!empty($models)) {
foreach ($models as $key => $image) {
?>
<div class="col-md-4 site-animate">
<a href="<?php echo Yii::getAlias('#web') . "../../../uploads/" . $image->image_name; ?>" class="site-thumbnail image-popup">
<img src="<?php echo Yii::getAlias('#web') . "../../../uploads/" . $image->image_name; ?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title; ?>">
</a>
</div>
<?php
}
}
?>
</div>
</div>
</section>
<?php echo \yii\widgets\LinkPager::widget([
'pagination' => $pagination,
]);
Pjax::end();?>
<!-- END section -->
<section class="site-section section_details bg-light" id="section-contact">
<div class="container">
<div class="row">
<div class="col-md-12 text-center mb-5 site-animate">
<h2 class="display-4">Get In Touch</h2>
<div class="row justify-content-center">
<div class="col-md-7">
<p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.</p>
<p class="text-black">
<?php
if(!empty($snRestaurantsDetail)){ ?>
Address: <br><?= $snRestaurantsDetail->address; ?><br>
Phone: <br><?= $snRestaurantsDetail->contact_no; ?><br> <br>
Email: <br> <?= $snRestaurantsDetail->email; ?>
<?php } ?>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="map"></div>
<?php// p($snRestaurantsDetail); ?>
<input type="hidden" name="lat" id="lat" value="<?= $snRestaurantsDetail->lattitude; ?>">
<input type="hidden" name="long" id="long" value="<?= $snRestaurantsDetail->longitude; ?>">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvpANF446OIBFdLaqozAf-lheEZ__oVVg&libraries=geometry"></script>
<script type="text/javascript">
$.pjax.reload({container: '#gallery_r'});
</script>
<?php Pjax::begin(['id'=>'gallery_r']);
if(!empty($models)){
foreach ($models as $key => $image) { ?>
<div class="col-md-4 site-animate">
<a href="<?php echo Yii::getAlias('#web')."../../../uploads/".$image->image_name;?>" class="site-thumbnail image-popup">
<img src="<?php echo Yii::getAlias('#web')."../../../uploads/".$image->image_name;?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title;?>">
</a>
</div>
<?php }
Pjax::end();
echo \yii\widgets\LinkPager::widget([
'pagination' => $pagination,
]);
}?>
And this is my js code :
$.pjax.reload({container: '#gallery_r'});
And I call this jquery to add class after pjax load to display contents :
jQuery(document).on("pjax:success", "#gallery_r", function(event){
contentWayPoint();
}
);
var contentWayPoint = function() {
var i = 0;
$('.site-animate').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('site-animated') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .site-animate.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
var effect = el.data('animate-effect');
if ( effect === 'fadeIn') {
el.addClass('fadeIn site-animated');
} else if ( effect === 'fadeInLeft') {
el.addClass('fadeInLeft site-animated');
} else if ( effect === 'fadeInRight') {
el.addClass('fadeInRight site-animated');
} else {
el.addClass('fadeInUp site-animated');
}
el.removeClass('item-animate');
}, k * 50, 'easeInOutExpo' );
});
}, 100);
}
} , { offset: '95%' } );
};
And on one button click I am calling this URL like this :
<p class="mb-0">Read More</p>
This URL calls as ajax call and loads only pjax container div, When i reload this page manually then it will display the whole page.I don't know why this happened ?

Answer 1

You should move the LinkPager inside the Pjax scope.
<?php
Pjax::begin(['id' => 'gallery_r']);
if (!empty($models)) {
foreach ($models as $key => $image) {
?>
<div class="col-md-4 site-animate">
<a href="<?php echo Yii::getAlias('#web') . "../../../uploads/" . $image->image_name; ?>" class="site-thumbnail image-popup">
<img src="<?php echo Yii::getAlias('#web') . "../../../uploads/" . $image->image_name; ?>" alt="chiefsRS" class="img-fluid" style="width:80%;height:50vh;" title="<?= $image->image_title; ?>">
</a>
</div>
<?php
}
echo \yii\widgets\LinkPager::widget([
'pagination' => $pagination,
]);
Pjax::end();
}
?>