Laravel Ajax request returning whole page rather than just data

Question

I'm trying to use ajax to find the next page on my pagination. However it keeps bringing in the whole body. I've taken a print screen to show the problem.

I'm not an expert on ajax show would appreciate some help as to how I can rectify this issue?

My code is below:

public function viewall()
{
    $data["projects"] = $projects = Auth::user()->projects()->paginate(3);

    if(Request::ajax())
            {

            $html = View::make('projects.viewall', $data)->render();
            return Response::json(array('html' => $html));
        }

        return View::make('projects.viewall')->with('projects', $projects);
}

Js/js.js

$(".pagination a").click(function()
{
    var myurl = $(this).attr('href');

    $.ajax(
    {
        url: myurl,
        type: "get",
        datatype: "html",
        beforeSend: function()
        {
            $('#ajax-loading').show();
        }
    })
    .done(function(data)
    {
        $('#ajax-loading').hide();
        $("#projects").empty().html(data.html);
    })
    .fail(function(jqXHR, ajaxOptions, thrownError)
    {
          alert('No response from server');
    });
    return false;
});

viewall.blade.php

@extends("layout")
@section("content")

<div class="container"> 
<h4>Your Projects</h4>

<div id="ajax-loading" class="alert alert-warning" style="display: none;">
<strong>Loading...</strong>
</div>

@if (Auth::check())
    @if (count($projects) > 0)
   @foreach ($projects as $project)

   <div class="one-third column" id="projects">

  {{ $project->project_name }}
    {{ $project->project_brief }}
   {{ date("d-m-Y", strtotime($project->start_day)) }}

   </div>

   @endforeach 
   @else
    <h5 class="errorslist">You have no projects click <a class="errorslist" href="/project/create">here to create a project</a></h5>
@endif
  @endif

  <div class="sixteen columns">
    {{ $projects->links() }}
    </div>
</div>
@stop

Answer 1

This line:

$("#projects").empty().html(data.html);

will fill the #project up with your returned html which you created here:

$html = View::make('projects.viewall', $data)->render() ;

So,you just need to change projects.viewall with only 'partial view' that you want to load.

Probably you don't need to extends your main layout.

Answer 2

But you render a view here:

$html = View::make('projects.viewall', $data)->render();

so html is created by Laravel and then you insert it as html into the #projects domElement.

Answer 3

I experienced this kind of problem, just run

dd( json_decode( json_encode( Products::paginate(5) ), true) );

and can get a hint :)

I have read a solution about this here:

http://www.tagipuru.xyz/2016/05/17/displaying-data-using-laravel-pagination-in-the-html-table-without-page-reload/