Arios Arios - 4 years ago 145
PHP Question

Layout will crash after loading finish with laravel

I am using laravel as my framework, i am facing the problem which is i @extends a php into another php, it works fine. But i not sure why the layout will become strange when the page is loading finish.

This is my code

@extends('layouts.cal')
<!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</title>

<!-- Fonts -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

<!-- Styles -->
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<style>
body {
font-family: 'Lato';
}

.fa-btn {
margin-right: 6px;
}
</style>
</head>
<body id="app-layout">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">

<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#spark-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
Laravel
</a>
</div>

<div class="collapse navbar-collapse" id="spark-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li><a href="{{ url('/') }}">Home</a></li>
</ul>

<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
@if (Auth::guest())
<li><a href="{{ url('/login') }}">Login</a></li>
<li><a href="{{ url('/register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<ul class="dropdown-menu" role="menu">
<li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
</ul>
</li>
@section('content1')
<div id="calendar"></div>
@endsection
@endif
</ul>
</div>
</div>
</nav>

@yield('content')

<!-- JavaScripts -->
{{-- <script src="{{ elixir('js/app.js') }}"></script> --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>


My cal.blade.php

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

<!-- Styles -->
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
{{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
<link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
<link href='css/fullcalendar.css' rel='stylesheet' />
{{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>

$(document).ready(function() {

$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function(date, allDay, jsEvent, view) {
$("#eventdata").show();
$("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
},

});

});

</script>
<style>

body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}

#calendar {
max-width: 900px;
margin: 0 auto;
}

</style>
</head>
<body>


@yield('content1')


</body>
</html>


What i added is

@extends('layouts.cal')


And in the if else statement, i add

@section('content1')
<div id="calendar"></div>
@endsection


The function works fine, i just cant find out what is the problem why the layout will change when the page is loading finish.
Laravel Page




I tried this method.

@extends('layouts.cal')
@section('content')
//my code here
@if (Auth::guest())
<li><a href="{{ url('/login') }}">Login</a></li>
<li><a href="{{ url('/register') }}">Register</a></li>
@else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>

<ul class="dropdown-menu" role="menu">
<li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
</ul>
</li>
@section('content1')
<div id="calendar"></div>
@endsection
@endif


@endsection


It is still works, but the problem is the navigation bar of the page will be disappear when the user is not login.




After modified the cal.blade.php

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

<!-- Styles -->
{{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
{{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
<link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
<link href='css/fullcalendar.css' rel='stylesheet' />
{{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}

<style>

body {
margin: 40px 10px;
padding: 0;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
font-size: 14px;
}

#calendar {
max-width: 900px;
margin: 0 auto;
}

</style>
</head>
<body>
<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>

$(document).ready(function() {

$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
dayClick: function(date, allDay, jsEvent, view) {
$("#eventdata").show();
$("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
},

});

});

</script>

@yield('main_add_js')


</body>
</html>

Answer Source

Always start your HTML with your first blade template. Your first blade template is cal.blade.php. So start your HTML and body tag on that file.

Your all essential CSS files should be included in this file.

For eg:-

Your cal.blade.php file should be

<html>
<head>
    // Add all your essential CSS files here.
 @yield('manual_add_css_section')
    // This yield section isoptional for you
</head>

<body>

 @yield('main_content_section')
  // This is the main content section. 2nd blade file will use this section. In your case you are using for displaying calender.    

   // Include all your required Js Files here just above `</body>` tag.

 @yield('manual_add_js_section')
   // This yield section is optional for you to use script tag. It will load at the end.
</body>
</html>

cal.blade.php

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700" rel='stylesheet' type='text/css'>

    <!-- Styles -->
    {{-- <link href="{{ elixir('css/app.css') }}" rel="stylesheet"> --}}
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}
    <link rel='stylesheet' href='css/lib/cupertino/jquery-ui.min.css' />
    <link href='css/fullcalendar.css' rel='stylesheet' />
    {{--<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />--}}

    <style>

        body {
            margin: 40px 10px;
            padding: 0;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;@section('content')
        }

    </style>
</head>
<body>



@yield('content')

@if (Auth::user())
<div id="calendar"></div>
@endif

<script src='js/lib/moment.min.js'></script>
<script src='js/lib/jquery.min.js'></script>
<script src='js/fullcalendar.min.js'></script>

<script>
    $(document).ready(function() {
      // Check calender div is exist or not. 
      // In case of guest user it will not present
      if($("#calendar").length ){
        $('#calendar').fullCalendar({
            theme: true,
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            dayClick: function(date, allDay, jsEvent, view) {
                $("#eventdata").show();
                $("#eventdata").load("/events/add/"+allDay+"/"+$.fullCalendar.formatRange( date, 'dd/MM/yyyy/HH/mm'));
            },

        });
       }

    });
</script>


</body>
</html>

I have not make too much changes here. I have added this lines to body section.

@if (Auth::user())
<div id="calendar"></div>
@endif

app.blade.php

@extends('layouts.cal')
@section('content')

                @if (Auth::guest())
                    <li><a href="{{ url('/login') }}">Login</a></li>
                    <li><a href="{{ url('/register') }}">Register</a></li>
                @else
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                            {{ Auth::user()->name }} <span class="caret"></span>
                        </a>

                        <ul class="dropdown-menu" role="menu">
                            <li><a href="{{ url('/logout') }}"><i class="fa fa-btn fa-sign-out"></i>Logout</a></li>
                        </ul>
                    </li>

                @endif


@endsection

I have removed @section('content1') from this file because there is no need to use it here. I have taken that section into carl.blade.php file. Perhaps you can use it anywhere you want.

Hope this will work for you .

All the best. :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download