I would like use http://materializecss.com/ on Laravel 5.4 (compiled with webpack).
window.$ = window.jQuery = require('jquery');
require('materialize-css');
// or
// require('materialize-css/dist/js/materialize.js');
// but same issue
$(document).ready(function(){
$('.materialboxed').materialbox();
$('.modal').modal();
$('.parallax').parallax();
});
This is my code but the error is:
Uncaught TypeError: $(...).materialbox is not a function
It work with this :
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{{ asset('js/materialize.min.js') }}"></script>
<script>
$(document).ready(function(){
$('.materialboxed').materialbox();
$('.modal').modal();
$('.parallax').parallax();
});
</script>
But if I put jquery document ready
in app.js, it doesn't work :
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="{{ asset('js/materialize.min.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>
app.js :
$(document).ready(function(){
$('.materialboxed').materialbox();
$('.modal').modal();
$('.parallax').parallax();
});
I also had this kind of issue with materialize-css in Laravel 5.4, and my quick fix was to download the materializecss source to /resources/assets/ manually. This is what my directory looks like now,
/resources
----/js
-------app.js
-------bootstrap.js
----/materialize
-------/css
-------/fonts
-------/js
Then, on my bootstrap.js
, I added this code
require('../materialize/js/materialize.js');
And this solved my problem.
The way to include javascript in blades (in laravel) is:
<script src="{{ asset('assets\bower\jquery\dist\jquery.min.js') }}"></script>
<script src="{{ asset('assets\bower\materialize\dist\js\materialize.min.js') }}"></script>
Your assests (js & css) have to be located somewhere under /public
I would recommend using bower for your assetmanagement, but this is not required.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.