codovel

We no longer support this blog. Please visit this site instead. https://laravelprojectlab.com

Saturday, June 18, 2016

Laravel bootstrap ajax menu navigation with loading animation

Suppose that your project root folder is here C:\wamp\www\test_laravel.

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:

Unknown said...
This comment has been removed by the author.
Unknown said...

tutorial is work perfectly , but if we have a script inside the blade view . the script is not executed . how to fix it ?

BudgetFlyStay said...

Hi Cristian,
I think it should work. Could you share me your code?

Unknown said...

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

naresh karki said...

thanks a lot for your help, it works. could we remove "processing" when loading content??

Unknown said...

How to use it in Foundation. I'm using foundation instead of bootstrap. I tried it in foundation it will not work.

Anonymous said...

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/




Unknown said...

how apot partial view then reload the page . it goes off

Lucy Carter said...
This comment has been removed by the author.
Ankita Kumari said...

THank you for sharing this informative post. Looking forward to read more.
Best Laravel Web Development Services