In my Laravel 9 project that I am working on, I want to put a javascript file containing common functions in app.blade.php. As per How to include External CSS and JS file in Laravel 5.5, I placed the js file in public/js folder and included the following in app.blade.php
<!-- common js functions added by Ravi -->
<script src="{{ asset('js/common_js.js') }}" ></script>
However, this file is not getting included on the page, and the js functions included in the file are not available in console.
Could someone advise me how to include a js file so that it is available for all pages?
Thanks.
if you are using laravel vue do this
place th common_js.js file in resources folder than change this
//in webpack.mix.js
mix.js(["resources/js/app.js","resources/js/common_js.js"], "public/js")
and in app.blade.php use this
<script src="{{ mix('js/app.js') }}" defer></script>
than
npm run dev
run command
php artisan view:clear
you need to check the path rendered by asset() if it's not the correct path you can change the asset path from the .env file ASSET_URL
Related
I'm new to Laravel and I'm trying to compile and upload my resources using Laravel Mix.
mix.js('resources/js/app.js','public/js')
.js('resources/js/users.js','public/js')
.sass('resources/sass/app.scss', 'public/css')
.css('resources/css/myStyle.css','public/css/myStyle.css')
These resources compiled successfully; in my users.js file, I have a JS script function that alerts some text on button click. In my Blade layout, I'm importing files like the following.
<!-- Scripts -->
<script src="{{ mix('js/users.js') }}"></script>
<!-- <script src="{{mix('/js/NotResourced.js')}}"></script> -->
<script src="{{ mix('js/app.js') }}"></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/myStyle.css') }}" rel="stylesheet">
I understand that Mix compiles the resources and puts them in the public directory so the browser can read them. But when I inspect my loaded files in the browser, the users.js is not among them. I've changed the order in which the files are loaded, but it didn't work. What I noticed is that in my Blade layout, I'm placing them in an HTML head tag. So I changed the position of the script file to before the body close tag position. However, when I inspect my loaded files on the browsers, the app.js file has existed, but the HTML head tag and users.js are not there.
Am I doing anything wrong here? And please, what's the proper way to get this done?
I've found what solved my issue, and the answer as follow :
Use scripts() method to minify any number of JavaScript files on webpack.mix.js file
like this
mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
], 'public/js/all.js');
this is a proper way to compile your JS asset .
I want to use this package for audio equalizing animation. I want to add it in my Laravel project so I copied two files which are
jquery.reverseorder.js
jquery.equalizer.js
to /myproject/node_modules/myjss/
and added these two lines
import 'myjss/jquery.equalizer'
import 'myjss/jquery.reverseorder'
into /myproject/resources/js/app.js
but it returns TypeError: $(...).equalizer is not a function
How can I fix it?
You don't need to save those files like that. Just save them in laravel's assets folder. then in laravel, you should include it like this <script type="text/javascript" src="js/jquery.reverseorder.js"></script> . in src path, you can use asset_path of laravel. You can include this path in js or laravel's blade template.
My question is simple, where should I store js files like bootstrap.js or my own files?
I found out this
Where should I store JS in Laravel 5?
But I really don't understand how should I include it in my view to be used.
If you are using either of two case in your mentioned link like below
There are 2 places where I can store javascripts: resources/assets/javascripts and public/js.
If you put the files in resources/assets/javascripts, then should add gulp tasks to copy them into public/js folder so it will ultimately present into public/js folder .
2) You can directly put these files in public/js.
Then you can call it in your layout file or any blade file like this
<script src="{{ asset('/js/bootstrap.js') }} "></script>
And if you are using laravelcollective/html form then you can also do this like
{{ Html::script('js/bootstrap.js') }}
you can put it inside public/js folder
Then you can add it in header or footer as usual like <script src="{{ asset('assets/js/bootstrap.js') }} " type="text/javascript"></script>
In my project there is folder named mine with 2 subfolders (static folder & templates folder) and 1 app.py file init.
I have put my jQuery script file inside the static folder and shop.html file is in the templates folder. I want to link that html file to that js file.
I put this inside the html file:
<script type=text/javascript src="{{url_for('static', filename='/static/hide.js') }}"></script>
But it does not work? What is the problem?
You have a duplicate 'static' in there:
url_for('static', filename='hide.js')
The first 'static' will automatically populate with the URL which points to the static folder, therefore putting 'static' in the filename field is redundant.
url_for('static', filename='static/hide.js')
# '/static/static/hide.js'
url_for('static', filename='hide.js')
# '/static/hide.js'
my jquery file path is c:\xampp\htdocs\project\resources\assets\js\jquery.min.js
..I have tried like below on my page but jquery file don't included ! What I am wrong ..
{{-- <script src="{{ URL::asset('assets/js/jquery.min.js') }}"></script> --}}
The URL::asset() is a helper function in laravel,
when you use this function it automatically generates the URL path to the
ProjectName/public and you have to specify the remaining path inside the asset method.
So, first you would want to place the css , js , 'images' and 'fonts' files inside your public folder that is in the root directory of your project.
then you can use the asset() or URL::asset() to locate your file.
the standard folder structure looks like this ..
ProjectName/public/css/main.css
ProjectName/public/js/jquery.min.js
etc ..
i think that would work for you .
Add those file in public/ folder like public/assets/js/jquery.min.js
Please make sure you have proper access rights to aforementioned resource (js file). You can also try to view the file with your web browser by visit http://your_hostname/assets/js/jquery.min.js