Skip to content Skip to sidebar Skip to footer
Home / Html / Javascript / Laravel / Php

Laravel 5 Js Is Blocking By App.js

Post a Comment
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

Solution 1:

Your app.blade.php should look like following:

<!DOCTYPE html><htmllang="{{ app()->getLocale() }}"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="csrf-token"content="{{ csrf_token() }}"><title>{{ config('app.name', 'Test') }}</title><!-- Styles --><linkhref="{{ asset('css/app.css') }}"rel="stylesheet"></head><body><divid="app">
            @yield('content')
        </div><!-- Scripts --><scriptsrc="{{ 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:

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

Solution 2:

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

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

Post a Comment for "Laravel 5 Js Is Blocking By App.js"