0

Why do I get a javascript error (function not defined) on Internet Explorer when I try to call a function that lives inside a different js file?

I'm using laravel blades, this is my parent template:

<!DOCTYPE html>
<html>
    <head>

        <!-- METAS -->
        <title>@yield('titulo')</title>



        @yield('css')

    </head>


    <body> 

        @include('navbar')

        @yield('content')

        @include('footer')

        <!-- Here I have jquery and bootstrap js files... -->


        <script src="{{ asset('js/sitio/custom.js') }}" type="text/javascript"></script>


        @yield('js')

    </body> 

</html>

So within the extending view I have:

@extends('layouts.template')
@section('content')
<button id="button" type="button">Click me</button>
@endsection

@section('js')
<!-- Here I have a js file that calls a function that lives inside custom.js -->
<script src="{{ asset('js/some-js-file.js') }}"></script>
@endsection

Basically I have a button that when clicked needs to send some data over ajax:

Code inside some-js-file.js:

$(document).ready(function(){
   $('#button').on('click', function(){
      sendAjax(); //the error is here, I get a 'sendAjax is not defined'
   })

});

Code inside custom.js:

//this function is declared inside the global scope

function sendAjax(){
   //do things
}

It's also worth mentioning that the code segment that calls the custom.js file's function gets executed inside a $(document).ready().., also, this only happens with internet explorer, in other browsers such as firefox, chrome and safari works always fine.

I've read a suggestion to change the location of my custom.js file and move it inside <head> tag but I would need to also move jquery and bootstrap js libraries because that custom file makes use of them, and according to this answer, it is NOT recommended to move jquery inside <head> tags because of performance. How can I solve this?

Aarón Gutiérrez
  • 1,400
  • 3
  • 16
  • 41
  • 1
    Could you please provide the function in `custom.js` which is said "not defined" in IE and the javascript code calling the function? If possible, please provide the necessary plain html and script code which can reproduce the issue in IE 11. I can't reproduce the issue with only the above structures. – Yu Zhou Feb 13 '20 at 09:16
  • @YuZhou Done, it's no big deal what it does, but I have added what I'm trying to do... – Aarón Gutiérrez Feb 13 '20 at 15:54
  • There's indeed nothing special with the functions and I made a simple test [like this](https://www.w3schools.com/code/tryit.asp?filename=GBW1D8YV7LEY), it can work well in IE 11. Now I can only think of checking the path and the loading of `custom.js` file. You could use the Network tab in F12 dev tools to check if the file is loaded correctly [like this](https://i.stack.imgur.com/UgMQp.png). Make sure the file is completely loaded before you call the `sendAjax` function. – Yu Zhou Feb 14 '20 at 08:47

0 Answers0