Menu
I am using Laravel 5.6. This page did not work for me.
pizza/index.blade.php looks like this:
@extends('layouts.app') @section('content') <!-- Styles --> <link href="{{ asset('css/pizza.css') }}" rel="stylesheet"> <!-- Scripts --> <script src="{{ asset('js/components/pizza.js')}}"></script> <div class="container"> <div class="row justify-content-center"> <div class="card"> <div class="card-header">Pizza</div> <div class="card-body"> <form action="/pizzas" method="post"> @if ($errors->any()) <div class="alert alert-danger" role="alert"> Please fix the following errors </div> @endif @include('pizza.table') </form> </div> </div> </div> </div> @endsection pizza/table.blade.php:
<div class="pizza-selection"> <b>Thanks god its pizza day! Select your pizza of the day!</b> <table id="pizzas" class="md-box"> <tr> ... </tr> @foreach ($pizzas as $pizza) ... @endforeach <tr> ... <input type="button" class="md-box btn btn-default" id="add_new_pizza" onClick="addPizza()" value="Add Pizza!"> </td> </tr> </table> ... I get a reference error when I click on the "add_new_pizza" button, onClick="addPizza()", addPizza() is not defined. However, I try to import pizza.js in index.blade.php
<script src="{{ asset('js/components/pizza.js')}}"></script> printing out asset('js/components/pizza.js') returns http://localhost:8080/js/components/pizza.js which looks right to me.
public/js/components/pizza.js looks like follows:
import PizzaService from '../services/PizzaService.js'; async function addPizza(){ // some functionality } It also worked when I had the function addPizza() inside the script at .blade.php.
Also, find the repository on GitHub if you need any further code reviews: https://github.com/andrelandgraf/laravel-docker
EDIT: When I copy the pizza.js inside <script><script> it works fine, but I receive a SyntaxError: import declarations may only appear at top level of a module. This SyntaxError dissapears when I import the script via src like you can see in my code examples. For me, this indicates that the script is not loaded at all.
EDIT2 & Solution: I used @kerbholz solution. I added @stack('scripts') to the bottom of the body in app.blade.php and inside @section('content') of index.blade.php I know @push('stack') the pizza.js file.
I am now one step further but I still receive the SyntaxError stated in EDIT. Is there a workaround for that or do I just have to remove the import of PizzaService.js and add a <scipt>-Tag for this file as well?
EDIT3: Okay this issue is not related. It looks like ES6 modules are not yet supported by browsers.
914
Your compiled JavaScript will typically be placed in the public/js directory. The app. js file will load the resources/assets/js/bootstrap. js file which bootstraps and configures Vue, Vue Resource, jQuery, and all other JavaScript dependencies.
Unlike some PHP templating engines, Blade does not restrict you from using plain PHP code in your templates. In fact, all Blade templates are compiled into plain PHP code and cached until they are modified, meaning Blade adds essentially zero overhead to your application.
Anything outside of your @section block will not be rendered.
You could edit your layouts/app.blade.php and add a @stack('head') where you want your styles/javascript to appear (preferably in the <head> section of your HTML).
In any blade file that @extends('layouts.app') you can then use
@push('head') <!-- Styles --> <link href="{{ asset('css/pizza.css') }}" rel="stylesheet"> <!-- Scripts --> <script src="{{ asset('js/components/pizza.js')}}"></script> @endpush to push content into that stack.
For more information visit https://laravel.com/docs/5.6/blade#stacks
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
