Twitter Bootstrap Question posted in

Blade template (layout file) is working on one file but not working on another file in Laravel-Twitter bootstrap

I have a very weird problem. When I extends blade template (layout) to one page, it works but if I extend the same blade template in my other page then it doesnt work. Anyone knows why is it happening ? Any Help please ?

genericLayout.blade.php

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>@yield('title') - myUNIMentor</title>
  <meta name="description" content="Free Bootstrap Theme by BootstrapMade.com">
  <meta name="keywords" content="free website templates, free bootstrap themes, free template, free bootstrap, free website template">

  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans|Candal|Alegreya+Sans">
  <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/imagehover.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

          <a class="navbar-brand" href="/home">
            <div class="test">
              <span><img src="img/mum_logo_black.png" width="50"; height="35">My</span>Uni<span>Mentor<img src="img/mum_logo_black.png" width="50"; height="35"></span>
            </div>
          </a>

      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">

          <li class="nav-item dropdown">
              <a class="nav-link" href="#pablo" id="navbarDropdownProfile" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="material-icons">  </i>
                <p class="d-lg-none d-md-block">
                  Account
                </p>
              </a>
              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownProfile">
                <a class="dropdown-item" href="#">Profile</a> <br/>
                <a class="dropdown-item" href="#">Settings</a>
                <div class="dropdown-divider"></div> 
                <a class="dropdown-item" href="{{ route('logout') }}"
                          onclick="event.preventDefault();
                                          document.getElementById('logout-form').submit();">
                          {{ __('Logout') }}
                      </a>

                      <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                          @csrf
                      </form>
                </a>
              </div>
            </li>
          <li></li>
          <li>
          <div class="card-body">
                  @if (session('status'))
                      <div class="alert alert-success" role="alert">
                          {{ session('status') }}
                      </div>
                  @endif


            </li>
        </ul>
      </div>
    </div>
  </nav>

<section id="feature" class="section-padding">
    <div class="container">
      <div class="row">
        <div class="header-section text-center">

        <h2> <font color='#5FCF80'><a href="/home">Dashboard </a></font> - @yield('title') </h2>
        @yield('content')

        @if(Session::has('message'))
                  <div class="alert alert-success"><span class="glyphicon glyphicon"></span><em> "{!! session('message') !!}"</em></div>
                @endif
        <hr class="bottom-line">
        </div>

        <div class="text-center">

      <form class="well form-horizontal" action="/search" method="POST">

              {{ csrf_field() }}

          <input type="text" name="search" placeholder="Search..">
          <button type="submit" class="btn"> Submit
          </button>
        </form>
      </div>

      </div>
  </div>
</section>

<section id="organisations" class="section-padding">
    <div class="container">
      <div class="row">

              @yield('details')

        <div class="detail-info">
            <hgroup>
               <!-- <div class = "text-center"> -->
                @yield('content2')
            </hgroup>
        </div>
      </div>
    </div>
  </section>


  <!--Footer-->
  <footer id="footer" class="footer">
    <div class="container text-center">
        Footer 1
      <ul class="social-links">
        <li><a href="#link"><i class="fa fa-twitter fa-fw"></i></a></li>
        <li><a href="#link"><i class="fa fa-facebook fa-fw"></i></a></li>
        <li><a href="#link"><i class="fa fa-google-plus fa-fw"></i></a></li>
        <li><a href="#link"><i class="fa fa-dribbble fa-fw"></i></a></li>
        <li><a href="#link"><i class="fa fa-linkedin fa-fw"></i></a></li>
      </ul>
      © Footer 2 with copyright
      <div class="credits">
        Footer 3
      </div>
    </div>
  </footer>
  <!--/ Footer-->

  <script src="js/jquery.min.js"></script>
  <script src="js/jquery.easing.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/custom.js"></script>
  <script src="contactform/contactform.js"></script>

</body>
</html>

The blade file where the above template is working after extending

@extends('layout.genericLayout')
@section('title', 'List')

@section('content')

<p>if have any content that will go here<p>

@endsection

@section('content2')

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>

@if(isset($find))
    <h1> Found for <font color='#5FCF80'> <b> {{ $search }} </b></font> </h1>

    <table>
  <tr>
      <th>Name</th>
      <th>Subject</th>
      <th>City</th>
      <th>Country</th>
      <th>Overall</th>
      <th></th>
  <tr>

    @foreach($find as $f)
  <tr>
      <td> {{ $f->users->first_name }} {{ $f->users->last_name }} </td>
      <td> {{ $f->subjects->subject_name }} </td>
      <td> {{ $f->users->city }} </td>
      <td> {{ $f->users->country }} </td>
      <td></td>
      <td> 
        <a href=""> Give Rating </a> <br/>
        <a href="/show-user-profile/{{ $f->users->id }}"> Contact Mentor </a> 
      </td>

  </tr>
    @endforeach
  </table>

@else
<p> No result has been found for <b> {{ $search }} </b>. Please try again with a new search. </p>

@endif

@endsection

The blade file where the layout template is not working when I extend the same template

@extends('layout.genericLayout')
@section('title', 'User Profile')

@section('content')

<p>if have any content that will go here<p>

@endsection

@section('details')

<h3>{{ Auth::user()->first_name }} {{ Auth::user()->last_name }}</h3>
<p>{{ Auth::user()->year_of_study }} <br/> {{ Auth::user()->city }}, {{ Auth::user()->country }}</p>

@endsection

@section('content2')

<div class="text-center">
      <a href="/add-new-review"> Add User Review </a>
    </div>

<form class="form-horizontal" method="POST" role="form" action="">

    {{ csrf_field() }}

    <div class="form-group">
        <label>First Name</label>
        <input type="text" name="fn" class="signup-control form" id="fn" value="{{ Auth::user()->first_name }}"/>
        <div class="validation"></div>

        &nbsp; &nbsp; &nbsp;

        <label>Last Name</label>
        <input type="text" name="ln" class="signup-control form" id="ln" value="{{ Auth::user()->last_name }}"/>
        <div class="validation"></div>
    </div>

    <div class="form-group" data-rule="required">
        <label>Email</label> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <input type="text" name="unique_id" class="signup-control form" id="text" value="{{ Auth::user()->email }}" data-rule="email" disabled/> 
        <div class="validation"></div>

        &nbsp; &nbsp; &nbsp;

        <label>Password</label> &nbsp;
        <input type="password" class="signup-control form" name="pass" id="pass" value="**********" />
        <div class="validation"></div>
    </div>

    <div class="form-group">
        <label>City</label> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
        <input type="text" name="city" class="signup-control form" id="city" value="{{ Auth::user()->city }}"/>
        <div class="validation"></div>

        &nbsp; &nbsp; &nbsp; 

        <label>Country</label> &nbsp; &nbsp; &nbsp;
        <input type="text" name="country" class="signup-control form" id="country" value="{{ Auth::user()->country }}"/>
        <div class="validation"></div>
    </div>

    <div class="form-group">
        <label>Year of Study</label>
        <input type="text" name="yos" class="signup-control form" id="yos" value="{{ Auth::user()->year_of_study }}" size="30" />
        <div class="validation"></div>
    </div>

    <div class="form-group">

    </div>

    @endsection

</form>

@section('content2')

<h3>R</h3>
<p>All R's will go here in this tab</p> 

@endsection

Can it be because I am passing an id to see the user profile because even if I create a new blade.php file it does not take the layout and just display the content instead? I even tried creating new files in different view folders. This shouldnt be the case if it is.

I did check the console after the page is loaded and I found these errors. The page is not finding the relevant template files

Failed to load resource: the server responded with a status of 404 (Not Found)
imagehover.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
style.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
mum_logo_black.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
jquery.easing.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.min.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
custom.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
contactform.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
font-awesome.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
bootstrap.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
imagehover.min.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
style.css:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Tags:

2

Answers


  1. 0

    genericLayout.blade.php is missing @yield('content1').

    Login or Signup to reply.
  2. 0

    In your genericLayout.blade.php file these lines should be changed from:

    <script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
<script src="contactform/contactform.js"></script>

    To:

    <script src="{{asset('js/jquery.min.js')}}"></script>
<script src="{{asset('js/jquery.easing.min.js')}}"></script>
<script src="{{asset('js/bootstrap.min.js')}}"></script>
<script src="{{asset('js/custom.js')}}"></script>
<script src="{{asset('contactform/contactform.js')}}"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search