(jQuery) Uncaught ReferenceError: $ is not defined in Laravel

Question

Jquery

<script src="http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js"></script>

my code

<script type="text/javascript">
        function readURL(input){
          if(input.files && input.files[0]){
            var reader = new FileReader();
            reader.onload=function(e){
              $('#showimages').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
          }
        }
        $("#inputimages").change(function(){
          readURL(this);
        });
        </script>


        <img src="" id="showimages">
        <input type="file" name="images" id="inputimages">

and i got this error

Uncaught ReferenceError: $ is not defined at http://localhost/project/public/user/1/edit:308:9

*line 308 -> $("#inputimages").change(function(){

Im new in js and jquery, Help me solve this error please...

I wrote the script out of the section. That was why the error occurred, see my answer.

@FauziPadLaw I'm also faced same problem with you using datatable. Check my updated answer. — 502_Geek, Nov 25 '16 at 10:23

score 15 · Accepted Answer · answered Nov 25 '16 at 12:40

15

Thankyou for everyone!

This error is solved, in .blade.php laravel i have to write

@section('script')
<script type="text/javascript">
//my code here
</script>
@endsection

answered Nov 25 '16 at 12:40

Fauzi PadLaw

219
1
2
12

15

**Additional Help** If someone is loading jQuery from bootstrap.js (Laravel default for bootstrap preset) make sure you app.js script tag is not using `defer`. – Naveed Ahmed Jul 01 '18 at 23:54
This was the problem I didn't realize I was creating for myself. The `defer` was causing it to do exactly that. At which point jQuery was not available to the view. Thanks for the comment! – Damon Apr 19 '19 at 16:28
found on internet `The defer attribute tells the browser not to wait for the script. Instead, the browser will continue to process the HTML, build DOM. The script loads “in the background”, and then runs when the DOM is fully built.` removing `defer` from `` works perfectly – Mohamed Raza Nov 03 '21 at 18:11

score 2 · Answer 2 · answered Nov 25 '16 at 09:08

To use Jquery, remember it has to import before using

Your problem is look like your Jquery is not imported. Maybe your path is incorrect or you imported it after your script.

First, check this url http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js with with your web browser. If it exist you will see a lot of javascript code there.

Then to import it from your local server.

<script src="http://localhost/project/public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script>
      //your script here.
</script>

Another choice using cdn instead:

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
     //your script here
</script>

im pretty sure that jquery is imported and the path is accessable, but thanks for the answer :) — Fauzi PadLaw, Nov 25 '16 at 09:38

score 1 · Answer 3 · answered Nov 25 '16 at 09:05

1

Looks like jQuery wasn't loaded when your script is exectued.

You should load jQuery before scripts that are using it.

answered Nov 25 '16 at 09:05

Alexey Mezenin

158,981
26
290
279

score 1 · Answer 4 · edited Nov 25 '16 at 13:25

You have JavaScript running before the page is fully loaded.
You can load another plugin which may have overwritten the $ variable.
Your JavaScript file is not being properly loaded into your page(Check you script path and try to open link directly on browser).

Make sure all javascript code is being run inside a code block such as:

$(document).ready(function () {
  //your code
});

or

(function($){ })(jQuery);

or equivalent pure javascript code.

502_Geek · Answer 5 · 2016-11-25T10:23:16.853

There may be two potential problem in your code.

You don't have to put your code before scripts that using it. (Check your view source from browser)
You may imported another jQuery library.

If you imported two different jQuery Library, you can solve with noConflict()

e.g

  <script type="text/javascript">
    j = $.noConflict();
    function readURL(input){
      if(input.files && input.files[0]){
        var reader = new FileReader();
        reader.onload=function(e){
          j('#showimages').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
      }
    }
    j("#inputimages").change(function(){
      readURL(this);
    });
  </script>

Try my updated answer. Assumed you have main layout file.

<head>
 <script src="{!! asset('plugins/jQuery/jquery-2.2.3.min.js') !!}"></script> 
 <script src="{!! asset('bootstrap/js/bootstrap.min.js') !!}"></script>
 <script src="{!! asset('plugins/select2/select2.full.min.js') !!}">    </script> 
 <script src="{!! asset('plugins/slimScroll/jquery.slimscroll.min.js') !!}"></script> 
 <script src="{!! asset('plugins/fastclick/fastclick.js') !!}"></script>     
 @yield('script')

<body>
    @yield('content')
     <script src="{!!asset('plugins/datatables/jquery.dataTables.min.js')!!}"></script> 
</body>
 </head>

thankyou :) Actually i have solved that error. in .blade.php laravel i have to write `@section('script') @endsection ` — Fauzi PadLaw, Nov 25 '16 at 12:30

(jQuery) Uncaught ReferenceError: $ is not defined in Laravel

5 Answers5