0
197
VistasLaravel - Uncaught TypeError: Cannot read properties of null (reading 'value')
I'm trying to use lightpick datepicker on my application. Unfortunately this works when I don't follow standards, and doesn't work when I do.
Blade :
@section('page_script')
<script src="{{ url('js/themeFiles/moment/moment.min.js') }}"></script>
<script src="{{ url('js/themeFiles/lightpick/lightpick.js') }}"></script>
<script src="{{ url('js/custom/datePicker.js') }}"></script>
<script src="{{ url('js/custom/planningStats.js') }}"></script>
@endsection
@section('content')
@include('planning.partials.planningStatsForm')
@endsection
datePicker.js:
var picker = new Lightpick({
field: document.getElementById('ddebut_picker'),
secondField: document.getElementById('dfin_picker'),
repick: true,
lang: 'fr',
singleDate: false,
selectForward: true
});
Error (if I use the above code) :
If I use the script tags inside @section('content') and do no use separate @section('page_script') section then everything works perfectly. But for the current code, it doesn't work. I haven't changed anything in the js, controller, blade or model.
2 Respuestas
Responde la pregunta0
My JS was not able to find the elements, as my order was incorrect (even when it was correct when I checked the page source. Confusing though.).
I used defer attribute to solve my issue.
[defer, a Boolean attribute,] is set to indicate to a browser that the script is meant to be executed after the document has been parsed, but before firing DOMContentLoaded.
According to this answer, order matters. There are other ways to solve the issue but I found defer to be most useful for external scripts.
@section('page_script')
<script src="{{ url('js/themeFiles/moment/moment.js') }}" defer></script>
<script src="{{ url('js/themeFiles/moment/moment.min.js') }}" defer></script>
<script src="{{ url('js/themeFiles/lightpick/lightpick.js') }}" defer></script>
<script src="{{ url('js/custom/datePicker.js') }}" defer></script>
<script src="{{ url('js/custom/planningStats.js') }}" defer></script>
@endsection
0
It deepens where the page_scripts in your layout included. I think in the head. Search in your code for @stack('page_script').
You can add in your Layout a section above the closing body. @stack('custom_scripts'). Then would be work if you "follow standard".
Change only the name from page_script to @section('custom_script').