Laravel Blade not showing section

Question

I'm having troubles with Blade showing a section. This is my main layout file:

<!DOCTYPE html>
<html lang="en">
    <!-- Include Header -->
    @include('layouts.header')
    <body class="index-page">
        <!-- Include Navigation -->
        @include('layouts.navigation')
        <div class="wrapper">
                @include('layouts.banner')
                <div class="main main-raised">
                    <!-- Include Content -->
                    @yield('content')
                </div>      
        </div>
    <!-- Include Footer -->
    @include('layouts.footer')
    <!-- Include Modals -->
    @include('layouts.modals')
    <!-- Include Scripts -->
    @include('layouts.scripts')
    </body>
</html>

And this is the layouts.header file:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>Title</title>

    <!-- Styles -->
    <link href="/assets/css/app.css" rel="stylesheet">
    @yield('styles')

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">

    <!-- Scripts -->
    <script>
        window.Laravel = <?php echo json_encode([
            'csrfToken' => csrf_token(),
        ]); ?>
    </script>
    @yield('header')
</head>

And finally, the navigation file:

        @if (Auth::user())
        @section('styles')
            <link href="/assets/css/vendor/wizard.css" rel="stylesheet">
            <link href="/assets/css/vendor/bootstrap-select.css" rel="stylesheet">
            <link href="/assets/css/vendor/summernote.css" rel="stylesheet">
        @endsection
        @endif

        <nav class="navbar navbar-fixed-top navbar-color-on-scroll navbar-
           <!-- A lot of boring code here -->
        </nav>
@section('modals')
    @if (Auth::user())
        @include('layouts.modals.addonupload')
    @else
        @include('layouts.modals.login')
        @include('layouts.modals.register')
        @include('layouts.modals.reset')
    @endif
@endsection

@section('scripts')
    @if (Auth::user())
        @include('layouts.modals.js.addonupload')
    @endif
@endsection

So, in theory, the css files I define in layouts.navigation on the top should get included in the header where I yield them. But they don't for some reason.

Mind you, the modals I include at the bottom of the navigation work as intended. Further more, I had this working before. But I had the css section (which is now in the navigation file) in another view responsible for the content. All I did was to move the styles section from the content view file into the navigation file.

The background is this: I have a modal that requires certain css and js files. I want to provide that modal on every view as long as the user is logged in. I don't want to hard code them into the header because I don't need them if the user is not logged in. And again, the modals and scripts section at the bottom work fine. Just the styles section doesn't get included in the header. Would anyone know why?

Thanks!

score 1 · Answer 1 · answered Feb 03 '17 at 21:00

1

If you want to inclide some css and javascript conditionally, I'd recommend using @push This way you can include the resources the best way possible.

e.g. scripts.blade.php

<script src="{{ secure_asset('bower\jquery\dist\jquery.min.js') }}"></script>
<script src="{{ secure_asset('bower\materialize\dist\js\materialize.min.js') }}"></script>

@stack('scripts')

answered Feb 03 '17 at 21:00

online Thomas

8,864
6
44
85

Well. I changed `@yield('styles')` to `@stack('styles')` in my layouts.header, and `@section` to `@push` as well as `@endsection` to `@endpush` in my navigation.blade. Same outcome :/ – Artemios Antonio Balbach Feb 03 '17 at 21:21
can you doublecheck it really does get included (your navigation blade)? – online Thomas Feb 03 '17 at 21:24
I'm sorry, what exactly do you mean? Make sure my navigation.blade.php gets included into the main layout? If so, yeah it does. Take a look at my first code snippet in my initial post: ` @include('layouts.navigation')` Further more, the navigation gets loaded like it should. Everything inside of navigation.blade.php works, even all the modal includes at the bottom. Just, as I said, the section at the top for css does not get included into the header. Therefore the css files are not being loaded. – Artemios Antonio Balbach Feb 03 '17 at 21:34
I understand! Good luck, my guess is that you're blade stack is to complicated and you are better of just including after the top level template. – online Thomas Feb 03 '17 at 21:38
1

Well I got it working. What I did is I included the css section in the header directly, and the modals inside modals.blade.php and script section inside scripts.blade.php, both of which get included into the main layout file. It works, and it's not really much of a difference, so I can live with it. Still, I'd like to know why it wasn't working before, because before felt more streamlined to me. I have a navigation partial that has modals which need css/js, so add sections for each in the nav file. Sounds more elegant. Anyway, now they are included in the header and the modal partials. – Artemios Antonio Balbach Feb 03 '17 at 21:57
By the way, is there an advantage using `@stack` over `@yield`respectively `@push` over `@section`? I read a bit about it, and to me both seem to do the very same thing. – Artemios Antonio Balbach Feb 03 '17 at 22:00

score 0 · Answer 2 · answered Feb 03 '17 at 20:59

0

Would it make a difference if you change your code to the following?

@section('styles')
    @if (Auth::user())
        <link href="/assets/css/vendor/wizard.css" rel="stylesheet">
        <link href="/assets/css/vendor/bootstrap-select.css" rel="stylesheet">
        <link href="/assets/css/vendor/summernote.css" rel="stylesheet">
    @endif
@endsection

You have the @if-statement inside the @section for your 'modals' and 'scripts' section, which according to you, works fine.

answered Feb 03 '17 at 20:59

Jeffrey

476
4
13

Sorry @Jeffrey I should have been more specific. No it does not make a difference. Because it doesn't even work without the if-statement. So only `@section('styles') @endsection` by itself doesn't even work. – Artemios Antonio Balbach Feb 03 '17 at 21:16

Laravel Blade not showing section

2 Answers2