Please download this file public.rar and extract to your public folder (C:\wamp\www\test_laravel\public)
Step 1: Edit route file (C:\wamp\www\test_laravel\app\Http\routes.php) and add
Route::controller('tutorial', 'TutorialController');
Step 2: Create view file navbar.blade.php, view1.blade.php, view2.blade.php, and view3.blade.php in C:\wamp\www\test_laravel\resources\views\tutorial (please create tutorial folder if not exist)
navbar.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Tutorials</title>
<!-- Styles -->
<link href="{{ asset('bootstrap-3.3.6/css/bootstrap.min.css') }}" rel="stylesheet">
</head>
<body>
<style>
.loading {
background: lightgoldenrodyellow url('{{asset('images/processing.gif')}}') no-repeat center 65%;
height: 80px;
width: 100px;
position: fixed;
border-radius: 4px;
left: 50%;
top: 50%;
margin: -40px 0 0 -50px;
z-index: 2000;
display: none;
}
</style>
<div class="container-fluid">
<div class="row"></div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Header</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="javascript:ajaxLoad('{{url('tutorial/view1')}}')">View 1</a></li>
<li><a href="javascript:ajaxLoad('{{url('tutorial/view2')}}')">View 2</a></li>
<li><a href="javascript:ajaxLoad('{{url('tutorial/view3')}}')">View 3</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div id="content">click any menu above to change content here</div>
<div class="loading"></div>
</div>
<div class="col-md-3"></div>
</div>
</div>
<!-- JavaScripts -->
<script src="{{ asset('js/jquery-1.11.2.min.js') }}"></script>
<script src="{{ asset('bootstrap-3.3.6/js/bootstrap.min.js') }}"></script>
<script>
function ajaxLoad(filename, content) {
content = typeof content !== 'undefined' ? content : 'content';
$('.loading').show();
$.ajax({
type: "GET",
url: filename,
contentType: false,
success: function (data) {
$("#" + content).html(data);
$('.loading').hide();
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
}
</script>
</body>
</html>
view1.blade.php
<h1>View 1</h1>
view2.blade.php
<h1>View 2</h1>
view3.blade.php
<h1>View 3</h1>
Step 3: Create controller file TutorialController.php in here C:\wamp\www\test_laravel\app\Http\Controllers
<?php
namespace App\Http\Controllers;
class TutorialController extends Controller
{
public function getNavbar()
{
return view('tutorial.navbar');
}
public function getView1()
{
return view('tutorial.view1');
}
public function getView2()
{
return view('tutorial.view2');
}
public function getView3()
{
return view('tutorial.view3');
}
}
How to test? open your browser and type http://localhost/test_laravel/public/tutorial/navbar. You will see this screen
10 comments:
tutorial is work perfectly , but if we have a script inside the blade view . the script is not executed . how to fix it ?
Hi Cristian,
I think it should work. Could you share me your code?
Hey, could you tell me, how is this possible in new Laravel 5.3?
My problem is:
[BadMethodCallException]
Method controller does not exist.
Thank you
thanks a lot for your help, it works. could we remove "processing" when loading content??
How to use it in Foundation. I'm using foundation instead of bootstrap. I tried it in foundation it will not work.
I really appreciate information shared above. It’s of great help. If someone want to learn Online (Virtual) instructor lead live training in AJAX, kindly contact us http://www.maxmunus.com/contact
MaxMunus Offer World Class Virtual Instructor led training on AJAX. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ trainings in India, USA, UK, Australlia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
For Demo Contact us.
Nitesh Kumar
MaxMunus
E-mail: nitesh@maxmunus.com
Skype id: nitesh_maxmunus
Ph:(+91) 8553912023
http://www.maxmunus.com/
how apot partial view then reload the page . it goes off
THank you for sharing this informative post. Looking forward to read more.
Best Laravel Web Development Services
Post a Comment