I'm new at Laravel and it confuses me on how to get it working.
Here is my Code:
app.blade.php (/views/layouts/)
<head>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Laravel</title>
<link rel="stylesheet" type="text/css" href="/css/app.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-8">
@yield ('content')
</div>
<div class="col-md-4 col-lg-4">
@include('inc.sidebar')
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<p class="text-muted">Place sticky footer content here.</p>
</div>
</footer>
@yield('jQuery')
</body>
home.blade.php (/views/)
@extends('layouts.app')
@section('content')
<h1>Home</h1>
<section class="controls">
<button type="button" class="btn btn-success" id="New">New</button>
<button type="button" class="btn btn-warning" id="Modify">Modify</button>
<button type="button" class="btn btn-danger" id="Close">Close</button>
</section>
@endsection
@section('sidebar')
@parent
<p>This is the appended to the sidebar.</p>
@endsection
@section('jQuery')
<script src="{{ asset('js/main.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
@endsection
main.js (public/js/)
alert('Alert Test');
$(document).ready(function(){
alert('DocReady');
$('#New').on('click',function(){
alert('New');
});
});
with the code above, the result I am receiving is a single alert message "Alert Test", a non-working button and an error of Uncaught ReferenceError: $ is not defined at:
$(document).ready(function(){
But my expectations should be an alert message "Alert Test", "DocReady" and a button that alert "New" when clicked without any errors or warnings.
I tried to change the block of code in home.blade.php (/views/) like this
<section class="controls">
<button type="button" class="btn btn-success" id="New">New</button>
<button type="button" class="btn btn-warning" id="Modify">Modify</button>
<button type="button" class="btn btn-danger" id="Close">Close</button>
<!-- Added Code -->
<script src="{{ asset('js/main.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>
<!-- Added Code -->
</section>
The result is 2 alert messages of "Alert Test" and 1 "DocReady" plus an alert message of "New" when the button is clicked but still the Uncaught ReferenceError: $ is still existing which is not required and I believe incorrect as I put duplicated script in my code.
Any advice on where to put exactly those jQuery code and how to properly call them? Thanks!
Added Note: I also tried to put the script regularly at the bottom of app.blade.php (/views/layouts/) file, and the output is a single alert message "Alert Test" and an error on reference.
