Initialize js function on the page

Question

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)

Please check this out https://stackoverflow.com/questions/25962958/calling-a-javascript-function-in-another-js-file. — xtv369, Nov 23 '21 at 15:34

score 2 · Accepted Answer · answered Nov 23 '21 at 15:35

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

answered Nov 23 '21 at 15:35

Eriks Klotins

4,042
1
12
26

get this `jQuery.Deferred exception: initSlider is not defined ReferenceError: initSlider is not defined` – chu Nov 23 '21 at 15:41
does your slider.js define it? What does the debugger say? – Eriks Klotins Nov 23 '21 at 15:45
it does not come to the slider.js file, if you write this `initSlider(slider, sliderRow, slides, (slides.length < 2) ? 0 : 1, slides.length > 1);` in the file itself before the `initSlider` function, then everything will work – chu Nov 23 '21 at 15:53
but I need to call from blade.php – chu Nov 23 '21 at 15:53
I do not have initSlider defined on the page itself – chu Nov 23 '21 at 15:58
is the initSlider defined at all? what happens if you call it from the console? – Eriks Klotins Nov 23 '21 at 21:36

Initialize js function on the page

1 Answers1