javascript - Laravel: Load more data from controller into view -
i ask how can display more data using js or ajax , call controller displaying result view. until 'm displaying 8 posts limit(8) first time. 'm using ajax call controller , bring each time more 8 posts. problem 'm facing posts same each time call controller or ajax.
postscontroller
class postscontroller extends controller { public function index(request $request) { $posts = post::orderby('created_at', 'desc')->limit(4)->get(); $categories = category::all(); if ($request->ajax()) { $view = view('posts.load', compact('posts', 'categories'))->render(); return response()->json(['html'=>$view]); } return view('posts.display', compact('categories', 'posts')); } } the controller called web, route
route::get('/posts', 'postscontroller@index');
i call foreach method posts.display
<div class="col-md-8 col-md-offset-2" id="grid" style="padding-top: 40px;"> @foreach($posts $post) @if(strlen($post->body) < "701") <div class="item"> <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0"> <span class="time">{{$post->created_at}}</span> <a href=""> <span class="emoji"> {{emoji::findbyname("link")}} </span> </a> <a href=""> <span class="emoji"> {{emoji::findbyname("mail")}} </span> </a> <a href=""> <span class="emoji"> {{emoji::findbyname("pin")}} </span> </a> </div> <div class="tr-text"> <div class="col-md-12 td-text"> <p><a>{{$post->body}}</a></p> </div> </div> <div class="tr-tag"> <div style="padding: 1px 0 1px 0; text-align: center"> {{emoji::findbyname("tag")}}tag: @foreach($categories $category) @if($category->id == $post->category_un) <a href=""><span class="tag-un">#{{$category->name}}</span></a>, @endif @if($category->id == $post->category_fac) <a href=""><span class="tag-fac">#{{$category->name}}</span></a> @endif @endforeach </div> </div> <div class="tr-options"> <a href="" style="color: #dca20f"><span class="cool">(0) {{emoji::findbyname("cool")}}</span></a> <hr class="vt-hr" /> <a href="" style="color: #aa8062"><span class="poo">(0) {{emoji::findbyname("poo")}}</span></a> <hr class="vt-hr" /> <a href="" style="color: #000000"><span class="speech">(0) {{emoji::findbyname("speech")}}</span></a> </div> </div> @elseif(strlen($post->body) > "700") <div class="item"> <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0"> <span class="time">{{$post->created_at}}</span> <a href=""> <span class="emoji"> {{emoji::findbyname("link")}} </span> </a> <a href=""> <span class="emoji"> {{emoji::findbyname("mail")}} </span> </a> <a href=""> <span class="emoji"> {{emoji::findbyname("pin")}} </span> </a> </div> <div class="tr-text"> <div class="col-md-12 td-text"> <p class="more"><a>{{$post->body}}</a></p> <?php // echo strlen($post->body);?> <!--- <a><span>Διάβασέ την συνέχεια..</span></a> --> </div> </div> <div class="tr-tag"> <div style="padding: 1px 0 1px 0; text-align: center"> {{emoji::findbyname("tag")}}tag: @foreach($categories $category) @if($category->id == $post->category_un) <a href=""><span class="tag-un">#{{$category->name}}</span></a>, @endif @if($category->id == $post->category_fac) <a href=""><span class="tag-fac">#{{$category->name}}</span></a> @endif @endforeach </div> </div> <div class="tr-options"> <a href="" style="color: #dca20f"><span class="cool">(0) {{emoji::findbyname("cool")}}</span></a> <hr class="vt-hr" /> <a href="" style="color: #aa8062"><span class="poo">(0) {{emoji::findbyname("poo")}}</span></a> <hr class="vt-hr" /> <a href="" style="color: #000000"><span class="speech">(0) {{emoji::findbyname("speech")}}</span></a> </div> </div> @endif @endforeach </div> <div class="ajax-load text-center" style="display:none"> <p><img src=""></p> </div> in end 'm using ajax, footer, calls controller via url , data same limitation
<script type="text/javascript"> $(window).scroll(function() { var flag = 0; if($(window).scrolltop() + $(window).height() >= $(document).height()) { $.ajax( { url: '/posts', type: 'get', /*beforesend: function() { $('.ajax-load').show(); }*/ data: { 'offset': flag, 'limit': 8 }, success: function(data){ $('.ajax-load').hide(); $("#grid").append(data.html); flag += 8; } }) } }); function loadmoredata(){ $.ajax( { url: '/posts', type: 'get', /*beforesend: function() { $('.ajax-load').show(); }*/ data: { 'offset': 0, 'limit': 8 } }) .done(function(data) { if(data.html == " "){ $('.ajax-load').html("no more records found"); return; } $('.ajax-load').hide(); $("#grid").append(data.html); flag += 8; }) .fail(function(jqxhr, ajaxoptions, thrownerror) { alert('server not responding...'); }); } all data displayed ajax copy of posts.display code @ posts.load
@foreach($posts $post) @if(strlen($post->body) < "701") <div class="item"> <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0"> <span class="time">{{$post->created_at}}</span> <a href=""> <span class="emoji"> {{emoji::findbyname("link")}} </span> </a> <a href=""> <span class="emoji"> {{emoji::findbyname("mail")}} </span> </a> <a href=""> <span class="emoji"> {{emoji::findbyname("pin")}} </span> </a> </div> <div class="tr-text"> <div class="col-md-12 td-text"> <p><a>{{$post->body}}</a></p> </div> </div> <div class="tr-tag"> <div style="padding: 1px 0 1px 0; text-align: center"> {{emoji::findbyname("tag")}}tag: @foreach($categories $category) @if($category->id == $post->category_un) <a href=""><span class="tag-un">#{{$category->name}}</span></a>, @endif @if($category->id == $post->category_fac) <a href=""><span class="tag-fac">#{{$category->name}}</span></a> @endif @endforeach </div> </div> <div class="tr-options"> <a href="" style="color: #dca20f"><span class="cool">(0) {{emoji::findbyname("cool")}}</span></a> <hr class="vt-hr" /> <a href="" style="color: #aa8062"><span class="poo">(0) {{emoji::findbyname("poo")}}</span></a> <hr class="vt-hr" /> <a href="" style="color: #000000"><span class="speech">(0) {{emoji::findbyname("speech")}}</span></a> </div> </div> @elseif(strlen($post->body) > "700") <div class="item"> <div class="col-col-12 tr-share share" style="padding: 1px 0 1px 0"> <span class="time">{{$post->created_at}}</span> <a href=""> <span class="emoji"> {{emoji::findbyname("link")}} </span> </a> <a href=""> <span class="emoji"> {{emoji::findbyname("mail")}} </span> </a> <a href=""> <span class="emoji"> {{emoji::findbyname("pin")}} </span> </a> </div> <div class="tr-text"> <div class="col-md-12 td-text"> <p class="more"><a>{{$post->body}}</a></p> <?php // echo strlen($post->body);?> <!--- <a><span>Διάβασέ την συνέχεια..</span></a> --> </div> </div> <div class="tr-tag"> <div style="padding: 1px 0 1px 0; text-align: center"> {{emoji::findbyname("tag")}}tag: @foreach($categories $category) @if($category->id == $post->category_un) <a href=""><span class="tag-un">#{{$category->name}}</span></a>, @endif @if($category->id == $post->category_fac) <a href=""><span class="tag-fac">#{{$category->name}}</span></a> @endif @endforeach </div> </div> <div class="tr-options"> <a href="" style="color: #dca20f"><span class="cool">(0) {{emoji::findbyname("cool")}}</span></a> <hr class="vt-hr" /> <a href="" style="color: #aa8062"><span class="poo">(0) {{emoji::findbyname("poo")}}</span></a> <hr class="vt-hr" /> <a href="" style="color: #000000"><span class="speech">(0) {{emoji::findbyname("speech")}}</span></a> </div> </div> @endif @endforeach so question is, why brings same data? every time @ end of scroll , ajax call controller sticks first 8 posts instead 8 next one. missing or code wrong? appreciate it.
with @shan help, found problem.
first fixed js in footer on one:
<script type="text/javascript"> var pagenumber = 2; $(document).ready(function() { $.ajax({ type : 'get', url: "websiteurl/posts?page=" +pagenumber, success : function(data){ pagenumber +=1; if(data.length == 0){ }else{ $('#grid').append(data.html); } },error: function(data){ }, }) }); $(window).scroll(function() { if($(window).scrolltop() + $(window).height() >= $(document).height()) { $.ajax({ type : 'get', url: "websiteurl/posts?page=" +pagenumber, success : function(data){ pagenumber +=1; if(data.length == 0){ }else{ $('#grid').append(data.html); } },error: function(data){ }, }) } }); function loadmoredata(){ $.ajax({ type : 'get', url: "http://communitune.com/posts?page=" +pagenumber, success : function(data){ pagenumber +=1; if(data.length == 0){ // :( no more articles }else{ $('#grid').append(data.html); } },error: function(data){ }, }) } </script> and put fixed controller into
public function index(request $request) { $posts = post::orderby('created_at', 'desc')->paginate(8); //$posts = post::orderby('created_at', 'desc')->limit(8)->get(); $categories = category::all(); if ($request->ajax()) { $view = view('posts.load', compact('posts', 'categories'))->render(); return response()->json(['html'=>$view]); } return view('posts.display', compact('categories', 'posts')); } the credits goes @shan, in comment helped me solve this.
Comments
Post a Comment