Loading laravel view with ajax - php

Question

I am new to web development.I am using laravel for my app where i used blade templates for creating pages.I have a main blade in which my header and footer exist and i am using it as wrapper.I want all of other pages to be open in that without reloading that base template and when i open the page it extends the main wrapper with new view correctly but when i update that page's content with ajax content of that page doubles the footer that may be because #includes() that creates a new page within existing one but i want to fix that double content and footer.Please help!Here is the code of pages that i used to load within the main wrapper
#extends('wrappertemplate')
#section('content')
<div class="body-content">`
And the content is here
</div>
#stop

Answer 1

I would advise that unless it's a very simple use case/playground exercise, that you don't do it this way, and instead define a proper API using Laravel, then use a front end framework like React, Angular, Ember etc etc. to interact with this API and handle DOM manipulation/creation. Seems v bizarre to re-render the entire page using HTML loaded of Ajax. There are plenty of tutorials on using Laravel and Various Front End Frameworks
However, for what you asked, you need to first create a page that extends wrappertemplate which you have. This should load without any content in the body
Then create a blade file which has the html that you want - it shouldn't extend anything. Then you just have a route and controller method which returns the contents of this file.
Then all you have to do is get your HTML over ajax and append it to the body.
This is just a sample controller:
class PageController extends Controller
{
// This is your method which renders the page that is essentially a wrapper
public function home()
{
return view('pages.home');
}
// This is your route which returns a partial, i.e. the content which gets refreshed
public function content()
{
$html = view('partials.home-content')->with(['name'=>'ExoticChimp'])->render();
return response->json(['html' => $html]);
}
}
Then your views:
<!--pages.home-->
#extends('wrappertemplate')
#section('content')
<div class="body-content">`
And the content is here
</div>
#stop
<!--partials.home-content-->
<h1>Hello {{$name}}</h1>
Then you'd just append the html parameter in the response to your body-content using basic jquery or js. I'm not going to write the JS as well, just google making AJAX requests using jQuery and there are a ton of articles on this stuff. I must stress though that you should look into using Laravel + a front end framework.
Tutorial: http://culttt.com/2015/04/06/getting-started-with-laravel-and-ember/
You should read up on the Laravel documentation for controllers.
http://laravel.com/docs/5.1/controllers