I have a js file where there is a function with multiple parameters
function initSlider(slider, sliderRow, slides, CLONES_COUNT, doAutoPlay) {
. . .
}
And I want to use this function on different pages, but with slightly different parameters, let's say for one of the pages there will be
initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1)
The question is, how do I call this initialization function on the page itself?
The usual page for laravel, blade.php where at the end there is a section with scripts
@section('scripts')
<script src="/js/slider.js"></script>
@endsection
I tried like this
@section('scripts')
<script src="/js/slider.js"></script>
<script>
$(document).ready(function(){
initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1);
});
</script>
@endsection
I seem to be doing everything right, but I get errors
jQuery.Deferred exception: initSlider is not defined ReferenceError: initSlider is not defined at HTMLDocument. (http://test.loc/blog/article_1:730:9) at e (https://code.jquery.com/jquery-3.6.0.min.js:2:30038) at t (https://code.jquery.com/jquery-3.6.0.min.js:2:30340) undefined
Uncaught ReferenceError: initSlider is not defined at HTMLDocument. (article_1:730) at e (jquery-3.6.0.min.js:2) at t (jquery-3.6.0.min.js:2)
You need to call your function inside $(document).ready()
The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins.
Explanation: Scripts get loaded asynchronously, thus it is not guaranteed that your script file will be loaded before you call the function. Using .ready() you make sure the function is called once everything else is loaded.
@section('scripts')
<script src="/js/slider.js"></script>
<script>
$(document).ready(function(){
initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1);
});
</script>
@endsection