This is an article written in order to explain on solving an error message popped in a plugin added or installed in a Web Browser specific which in this context is Mozilla Firefox. It is an error presented in a plugin named Firebug. The plugin itself added or installed for debugging and detecting client-side scripting such as Javascript which is JQuery as one of them. It can be shown in the following image :
The definition of ‘$(document).ready(function() {‘ is considered error. And the error message stated is ‘$ is not defined’. Below is the full script of JQuery defined :
$(document).ready(function() {
});
It is defined in a blade view template file as shown below :
@extends('master')
@section('content')
....
@endsection
<script type="text/javascript">
$(document).ready(function () {
...
});
</script>
The error itself can be solved by practissing the solution given in the article titled ‘JQuery Error Message $ is not defined’ which exists in this link. The solution is quite simple actually, it is done by importing the JQuery file library.
After several attempts trying to find the culprit of the error triggered, as shown above, the declaration or the definition of JQuery script file which is actually a Javascript placed or located outside of the ‘@section’ block or area. This is the main problem which generates the error message.
Actually after looking in the blade view file template, the import definition is already defined in other blade view file template named master.blade.php. Below is the actual structure of those files :
resources |--views |----master.blade.php |----module |------index.php
The important thing is the master.blade.php file which is the main blade view file template. It is actually the default template file which is used across all pages. And in this page, all of the main important files which is needed for the application are included and imported. Below is the important line of code which is used to import JQuery file library and it is declared in the master.blade.php file :
<script src="{{ URL::asset('js/jquery-3.2.1.min.js') }}"></script>
To be able to see how to actually placed the JQuery file library, read the article titled ‘How to add JQuery in Laravel blade view template’ which can be found in this link.
So, in the above section defined, the JQuery script must be placed inside the ‘@section’ block or area in order for the JQuery script to be recognized and to be properly executed. It is because ‘@extends’ is a keyword used in blade view template file to override all of the sections defined inside the blade view template. So, in this context, ‘@extends’ keyword will indirectly used any definition or declaration stated in the master.blade.php file. It is obvious since in the ‘@extends’ keyword, it is specifically stated ‘master’ as shown below :
@extends('master')
So, the following is how to correct the problem by moving the script inside the ‘@section’ block or division :
@extends('master')
@section('content')
<script type="text/javascript">
$(document).ready(function () {
...
});
</script>
@endsection