Laravel 5 js is blocking by app.js

Question

I am using a javascript inside home.blade.php it extends layout/app.blade.php

@extend(layout.app)

when I extend javascript inside home.blade.php stop working, So I commented out

<script src="{{ asset('js/app.js') }}" defer></script> in app.blade.php then javascript starts working. I am not sure what is the issue can anyone help me to fix this.

home.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
   <div class="row justify-content-center">
      <div class="col-md-8">
         <div class="card">
            @if (Auth::user()->email=='admin@admin.com')
            <div class="card-header">Reports</div>
            <div class="card-body">
               <a href="view-reports">View Report</a><br>
               <a href="create-user">Create User</a>
            </div>
         </div>
         @else
         <div class="card-header">Report Form</div>
         <div class="card-body">
            @if (session('status'))
            <div class="alert alert-success">
               {{ session('status') }}
            </div>
            @endif
            <!-- You are logged in! -->
            @if(session()->has('message'))
            <div class="alert alert-success">
               {{ session()->get('message') }}
            </div>
            @endif
            <form action="store" method="post">
               <input type="hidden" name="name" value="{{Auth::user()->name}}">
               <label for="check_log">Checked Logs </label><br>
               <input type="radio" name="check_log" value="yes"> Yes
               <input type="radio" name="check_log" value="no"> No<br><br>
               <label for="verified_ticket"> Checked and Verified for pending tickets </label><br/>
               <input type="radio" name="verified_ticket" value="yes"> Yes
               <input type="radio" name="verified_ticket" value="no"> No<br><br>
               <label for="ticket_found"> Found any ticket that can be done by you </label><br/>
               <input type="radio" name="ticket_found" value="yes"> Yes
               <input type="radio" name="ticket_found" value="no"> No<br><br>
               <div id="box">
                  <label for="ticket_id"> Tickets done by you (INTERNAL Ticket ID'S) </label><br/>
                  <input type="text" name="ticket_id[]" id="name" class="name"><br/><br>
                  <label for="ticket_details"> what did you do</label><br/>
                  <input style="width: 65%; height: 100px;" type="text" name="ticket_details[]" width="200px" height="100px" value=""><br><br>
                  <label for="time"> Time Taken</label><br/>
                  <input type="text" name="time[]" id="name" class="name"><br/><br>
                  <div id="addmore">
                     <a href="#" id="add">Add More Input Field</a>
                  </div>
                  <br><br>
               </div>
               <label for="other_task"> Other Tasks (Should be specify what did you do and time taken for each task) </label><br/>
               <input style="width: 65%; height: 100px;" type="" name="other_task" value=""><br><br>
               <label for="shift_handoff"> Task/Alert that's needs attention from next shift/Dennis </label><br/>
               <input style="width: 65%; height: 100px;" type="" name="shift_handoff" value=""><br><br>
               <input type="checkbox" name="agree" value="agree"> I Agree<br><br>
               <input type="hidden" name="_token" value="{{csrf_token()}}">
               <input type="submit" name="submit" value="submit">
            </form>
            @endif
         </div>
      </div>
   </div>
</div>
@endsection
@section('javascript')
<script type="text/javascript">
   $(document).ready(function(){

       $('#add').click(function(){
           var inp = $('#box');

           var i = $('input').size() + 1;

           $('<div id="box' + i +'"><label for="ticket_id"> Ticket ID </label><br/><input type="text" name="ticket_id[]" id="name" class="name"><br/><br><label for="ticket_details[]"> what did you do</label><br/><input style="width: 65%; height: 100px;" type="text" name="ticket_details[]" width="200px" height="100px" value=""><br><br><label for="time"> Time Taken</label><br/><input type="text" name="time[]" id="name" class="name"><br><br><img src="Minus.png" width="32" height="32" border="0" align="top" class="add" id="remove" /><br><br> <div id="addmore"><a href="#" id="add">Add More Input Field</a></div><br><br></div>').appendTo(inp);

           i++;

       });



       $('body').on('click','#remove',function(){

           $(this).parent('div').remove();

       });

   });
</script> 
@endsection

app.balde.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSRF Token -->
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <title>{{ config('app.name', 'Daily report') }}</title>
      <!-- Scripts -->
      <script src="{{ asset('js/app.js') }}" defer></script>
      <!-- Fonts -->
      <link rel="dns-prefetch" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,600" rel="stylesheet" type="text/css">
      <!-- Styles -->
      <link href="{{ asset('css/app.css') }}" rel="stylesheet">
   </head>
   <body>
      <div id="app">
         <nav class="navbar navbar-expand-md navbar-light navbar-laravel">
            <div class="container">
               <a class="navbar-brand" href="{{ url('/') }}">
               {{ config('app.name', 'Laravel') }}
               </a>
               <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <!-- Left Side Of Navbar -->
                  <ul class="navbar-nav mr-auto">
                  </ul>
                  <!-- Right Side Of Navbar -->
                  <ul class="navbar-nav ml-auto">
                     <!-- Authentication Links -->
                     @guest
                     <li><a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a></li>
                     <li><a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a></li>
                     @else
                     <li class="nav-item dropdown">
                        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                        {{ Auth::user()->name }} <span class="caret"></span>
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                           <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>
                        </div>
                     </li>
                     @endguest
                  </ul>
               </div>
            </div>
         </nav>
         <main class="py-4">
            @yield('content')
            <script src="{{ asset('js/app.js') }}"></script>
            @yield('javascript')
         </main>
      </div>
   </body>
</html>

Answer 1

Your app.blade.php should look like following:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

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

        <title>{{ config('app.name', 'Test') }}</title>

        <!-- Styles -->
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    </head>
    <body>
        <div id="app">
            @yield('content')
        </div>

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}"></script>
        @yield('javascript');
    </body>
</html>

The above is your main layout file so to say. You want to use that layout file and add content or additional javascript functionality if you want to extend it in your other blade files.

To accomplish this in a nice way, we use the @yield('javascript') keyword to add a javascript file or function.

So your other blade files which extend this blade file should look like following:

@extends('layouts.app')

@section('content')
   // some content 
@endsection

@section('javascript')
   // your javascript
@endsection

First you are loading the layout blade file and afterwards you can insert your specific content and javascript to each section where you used the keyword yield('xxx')

After having a look at your source code:

You are loading jquery in your home.blade.php which is not ideal, if you want to load it you should load it in your main blade php file. But you actually dont need to load it if you are using laravels default app.js file. The default app.js file already requires following require('./bootstrap');. That file already contains jquery if you did not change it.

try {
    window.$ = window.jQuery = require('jquery');

} catch (e) {}

So check if your app.js requires the bootstrap file and check if your bootstrap file includes jquery if yes, you do not need to load jquery in your blade file.

Thus you should load the app.js file in your main blade. Load it like this at the bottom:

      ...
      <script src="{{ asset('js/app.js') }}"></script>
      @yield('javascript')
   </body>
</html>

Answer 2

see https://laravel.com/docs/5.6/blade#stacks

for adding script to your child view you need to use stack