andreixfr's avatar

jQuery Ajax - when I switch the page it's loading blank page - Laravel pagination

I have a problem with my Laravel pagination and Ajax. When I'm on the parent / main page, I have all I need, but yesterday I implemented Ajax jQuery on this, and now, when I switch the pages, didn't reloading the page, which is good, but is loading a blank page, and I don't know why isn't loading content. ( example : https://imgur.com/a/sSI2IIo )

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>
                                    <a href="/cancel-invitation/{{$record->id}}"><i class="fa fa-times"> </i>Cancel</a>
                                </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_tab_2 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 script:

<script type="text/javascript">
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();
</script>

Here is my controller:

$initiated =  \App\Invitation::with('user')
    ->where('inviter_id', Sentinel::getUser()->id)
    ->orderBy('id', 'desc')
    ->paginate(6);
0 likes
1 reply
Tray2's avatar

You need to display the data in your page with javascript.

So when you receive the response you need to grab the containing element and change it's inner html to the new data.

Something like

<div id="#content">
    My original data is here
</div>

<script>
    function nextPage() {
      let response = JSON.parse(loadNextPage());

      let el = document.querySelector('#content');

      el.innerHTML =  parseToTable(response);
    }
    
    function parseToTable(response) {
        //Convert json to html table
    }
</script>

This is a very simplified example and will not work out of the box.

Please or to participate in this conversation.