Avoid refreshing the page at pagination - php

Question

I want to avoid refreshing page when i switch the pages using pagination from Laravel because when I switch the page from 1 to page 2, It redirects to the parent page. How can I avoid reloading page when i switch the pages? I have 2 tabs at Invitation - Received and Initiated. On Initiated, I have pagination, when i press on page 2 for example, I get redirected to the parent page which is Invitation, I need to stay on the page Initiated when i switch the page from pagination.
Here is my controller:
$initiated = \App\Invitation::with('user')
->where('inviter_id', Sentinel::getUser()->id)
->orderBy('id', 'desc')
->paginate(6);
Here is my view:
<div id="initiated" class="profile-edit tab-pane fade" style="background: none repeat scroll 0 0;">
<dl class="dl-horizontal">
<ul class="nav justify-content-center u-nav-v5-3 u-nav-primary " role="tablist"
data-target="nav-5-3-primary-hor-center" data-tabs-mobile-type="slide-up-down"
data-btn-classes="btn btn-md btn-block u-btn-outline-primary"
style="display: flex;justify-content: flex-end;">
<li class="nav-item active">
<a a data-toggle="tab" href="#grid" style="font-size: 12px"><i class="fa fa-th-large"></i> Grid</a>
</li>
<li class="nav-item">
<a a data-toggle="tab" href="#list" style="font-size: 12px"><i class="fa fa-bars"></i> List</a>
</li>
</ul>
<div class="tab-content">
<div id="grid" class="tab-pane fade in active">
<?php $count_user = 0;
?>
#foreach($initiated as $record)
#if($count_user == 0)
<div class="row margin-bottom-20 ">
#endif
<?php $count_user++; ?>
<div class="col-sm-6 sm-margin-bottom-20">
<div class="profile-blog">
<img style="border-radius: 0% !important" class="rounded-x"
src="{{ asset('thumbnail') }}/{{ $record->user ? $record->user->profile_picture : '' }}"
alt="">
<div class="name-location" style="top: 30px;position: relative">
#if($record->user->role[0]->slug == 'individuals' ? $record->user->role[0]->slug : '')
<i style="font-size: 13px;position: relative;" class="icon-user"></i>
#elseif($record->user->role[0]->slug == 'organizations' ? $record->user->role[0]->slug :
'')
<i style="font-size: 13px;position: relative;"
class="icon-hotel-restaurant-172 u-line-icon-pro fa- fa-lg"></i>
#endif
<a id="my-link" style="color: #555;text-decoration: none;font-size: 16px"
href="{{ url('') }}/{{ $record->user ? $record->user->username : '' }}">{{ $record->user ? $record->user->username : '' }}</a>
</h3>
</div>
<div class="clearfix "></div>
<strong style="font-size: 13px"><i style="padding: 5px"
class="icon-real-estate-020 u-line-icon-pro"></i>Location :
</strong>{{ $record->user ? $record->user->country->country : '' }} <span
class="{{ $record->user ? $record->user->country->flag : '' }}"></span><br>
<strong style="font-size: 13px"><i style="padding: 5px"
class="icon-notebook fa-"></i>Industry :
</strong>{{ $record->user ? $record->user->industry->industry : '' }}<br>
#if($record->user->role[0]->slug == 'organizations' ? $record->user->role[0]->slug : '')
#if(isset($record->user->organization_type->organization_type))
<strong style="font-size: 13px"><i
class="icon-hotel-restaurant-172 u-line-icon-pro fa- fa-lg"
style="padding: 5px;font-size: 13px"></i>Organization :
</strong>{{ $record->user ? $record->user->organization_type->organization_type : '' }}#endif
#endif
#if($record->user->role[0]->slug == 'individuals' ? $record->user->role[0]->slug : '')
#if(!empty($record->user->career_path[0]))
<strong style="font-size: 13px"><i class="icon-speedometer"
style="padding: 5px"></i>Function :
</strong>{{ $record->user ? $record->user->career_path[0]->functions->function : '' }}#endif
#endif
<hr>
<ul class="list-inline share-list">
<li>
<i class="fa fa-times"> </i>Cancel
</li>
</ul>
</div>
</div>
#if($count_user == 2)
</div>
<?php $count_user = 0; ?>
#endif
#endforeach
</div>
<div id="list" class="tab-pane fade">
<?php $count_user = 0;
?>
#foreach($initiated as $record)
#if($count_user == 0)
<div class="row">
#endif
<?php $count_user++; ?>
<div class="col-sm-12 sm-margin-bottom-20" style="margin-bottom: 12px">
<div class="profile-blog" style="padding: 5px">
<img style="margin-right: 10px"
src="{{ asset('thumbnail') }}/{{ $record->user ? $record->user->profile_picture : '' }}"
alt="">
<div class="name-location">
<h3> #if($record->user->role[0]->slug == 'individuals' ? $record->user->role[0]->slug :
'')
<i style="font-size: 13px;position: relative;" class="icon-user"></i>
#elseif($record->user->role[0]->slug == 'organizations' ?
$record->user->role[0]->slug : '')
<i style="font-size: 13px;position: relative;"
class="icon-hotel-restaurant-172 u-line-icon-pro fa- fa-lg"></i>
#endif <a id="my-link" style="color: #555;text-decoration: none;font-size: 16px"
href="{{ url('') }}/{{ $record->user ? $record->user->username : '' }}">{{ $record->user ? $record->user->username : '' }}</a>
</h3>
<ul class="list-inline share-list d-flex pull-right"
style="bottom: 25px;position: relative;margin-bottom: -20px;left: -25px">
<li style="left: 25px;position: relative">
<a href="/cancel-invitation/{{$record->id}}"><i
class="icon-custom-me rounded fa fa-times"> </i></a>
</li>
</ul>
</div>
<div style="display: flex;right: 2px;position: relative;bottom: 12px;margin-bottom: -10px">
<div style="padding-right: 15px">
<strong><i class="icon-real-estate-020 u-line-icon-pro"></i> :
</strong>{{ $record->user ? $record->user->country->country : '' }} <span
class="{{ $record->user ? $record->user->country->flag : '' }}"></span>
</div>
<div style="padding-right: 10px">
<strong><i class="icon-screen-tablet fa-"></i> :
</strong>{{ $record->user ? $record->user->industry->industry : '' }}
</div>
<div style="padding-right: 10px">
#if($record->user->role[0]->slug == 'organizations' ? $record->user->role[0]->slug :
'')
#if(isset($record->user->organization_type->organization_type))
<strong><i class="icon-speedometer"></i> :
</strong>{{ $record->user ? $record->user->organization_type->organization_type : '' }}
#endif
#endif
</div>
<div style="padding-right: 10px">
#if($record->user->role[0]->slug == 'individuals' ? $record->user->role[0]->slug :
'')
#if(!empty($record->user->career_path[0]))
<strong><i class="icon-frame fa-"></i> :
</strong>{{ $record->user ? $record->user->career_path[0]->functions->function : '' }}
#endif
#endif
</div>
</div>
</ul>
</div>
</div>
#if($count_user == 2)
</div>
<?php $count_user = 0; ?>
#endif
#endforeach
</div>
</div>
</dl>
{!! $initiated->render() !!}
</div>
Here is my Ajax:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
$('.pagination a').on('click', function (e) {
e.preventDefault();
var url = $(this).attr('href');
$('#initiated').load(url + ' div#initiated');
});
</script>

Answer 1

You'd probably want to use jQuery's .load() on the actual element that you cares instead of rewriting the whole HTML. Perhaps something like this:
$('.pagination a').on('click', function (e) {
e.preventDefault();
var url = $(this).attr('href');
$('#initiated').load(url + ' div#initiated');
});
Remember to re-run this script everytime after new content is loaded with AJAX if the pagination links are rewritten. With the complete parameter in the .load() function, you can do this:
function ajaxPaging() {
$('.pagination a').on('click', function (e) {
e.preventDefault();
var url = $(this).attr('href');
$('#initiated').load(url + ' div#initiated', null, ajaxPaging); // re-run on complete
});
}
ajaxPaging();
Update: Unable to preventDefault inside passive event listener due to target being treated as passive.
You might run into this error on Chrome. To fix it, try this before your other script calls (reference):
(passiveSupported && (active || el == window.document || el == window.document.body || el == window)) ? el.addEventListener(name, fn, { passive: false, capture: bubble }) : el.addEventListener(name, fn, bubble || false);