Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- JQUERY HANDLING THE LOAD MORE //USING DATA-ID ('POST->ID')
- <script>
- $(document).ready(function(){
- $(document).on('click','#btn-more',function(){
- // use data-page ==> next page's number i.e. load next page
- var page = $(this).data('page');
- $("#btn-more").html("Loading....");
- $.ajax({
- url : '{{ url("loadpost") }}',
- method : "GET",
- data : {_token:"{{csrf_token()}}", page: page },
- dataType : "text",
- success : function (data)
- {
- if(data != '')
- {
- $('#remove-row').remove();
- $('#load-data').append(data);
- }
- else
- {
- $('#btn-more').html("No More Post");
- }
- }
- });
- });
- </script>
- THE LOAD MORE BUTTON ITSELF
- <div class="about_memeber" id="remove-row" data-aos="fade-up" data-aos-duration="1500">
- <!-- you must be able to reference the $_GET['page'] == $request->page == $page -->
- <!-- $page++ ==> next page -->
- <button class="btn btn--secondary" id="btn-more" data-page="{{ $page++ }}"> Load more </button>
- </div>
- THE VIEW FOR BLOG
- <div class="clipcard posts" id="load-data" data-aos="fade-up" data-aos-duration="1500">
- @foreach($posts as $post)
- <div class="clipcard__body">
- <a href="{{route('blog', $post->slug)}}" class="hover-_effeft">
- <div class="row margin-bottom margin-top">
- <div class="col-12 col-md-4">
- <div class="blog_img_container">
- <div class="blog-image" style="background-image:url('/images/{{$post->image}}');">
- </div>
- <div class="author">
- <span>Written by {{$post->user->name}}</span><span> {{ date('F d, Y', strtotime($post->publish)) }}</span>
- </div>
- </div>
- <div class="col-12 col-md-4">
- <div class="blog-title">
- <h2>{{$post->title}}</h2>
- </div>
- </div>
- <div class="col-12 col-md-4">
- <div class="blog-content">
- <p>
- {!!$post->excerpt!!}
- </p>
- </div>
- </div>
- </div>
- </a>
- </div>
- @endforeach
- </div>
- THE PUBLIC FUNCTION IN MY CONTROLLER
- public function loadPost(Request $request)
- {
- $output = '';
- $id = $request->id;
- $posts = post::where('status',1)->orderBy('publish','DESC')->skip($request->page * 8)->take(8)->get();
- if(!$posts->isEmpty())
- {
- foreach($posts as $post)
- {
- $url = url('/images/'.$post->image);
- $body = str_limit(strip_tags($post->body), 350);
- $output .= '<div class="clipcard__body">
- <a href="'.route('blog', $post->slug).'" class="hover-_effeft">
- <div class="row margin-bottom margin-top">
- <div class="col-12 col-md-4">
- <div class="blog_img_container">
- <div class="blog-image" style="background-image:url('.$url.');"></div>
- </div>
- <div class="author">
- <span>Written by '.$post->user->name.'</span><span> '.date('F d, Y', strtotime($post->publish)).'</span>
- </div>
- </div>
- <div class="col-12 col-md-4">
- <div class="blog-title">
- <h2>'.$post->title.'</h2>
- </div>
- </div>
- <div class="col-12 col-md-4">
- <div class="blog-content">
- <p>
- '.$body.'
- </p>
- </div>
- </div>
- </div>
- </a>
- </div>';
- }
- $output .= '
- <div class="about_memeber" id="remove-row" data-aos="fade-up" data-aos-duration="1500">
- <button class="btn btn--secondary" id="btn-more" data-page=" '. $page++ .'"> Load more </button>
- </div>';
- echo $output;
- }
- THIS IS MY ROUTE FOR AJAX POST
- Route::post('loadpost','UserController@loadPost' );
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement