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'
Related
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
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 .
Tried loading static files: CSS, Javascript using django static tag
None of the Javascripts is working, and most of the css are also not loaded
Error for Javascript(for all JS):
The script from “http://127.0.0.1:8000/static/jquery.min.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
Django version: - 3.0.1
My files and code:
Base.html>>
{% load static %}
<link rel="stylesheet" type="text/css" href={% static 'animate.css' %}>
<script src="{% static 'jquery.min.js' %}"></script>
settings.py>>
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static")
]
STATIC_ROOT = os.path.join(BASE_DIR, "assets")
I am not using any virtual environment.
My project folder tree.
My project Folder and sub directories
put your static files in your my_app/static/ (rather than creating another my_app subdirectory), where my_app is an app folder inside the main project folder. also create a folder with name same as that of your app name inside static folder and place your static files there. which would properly distinguish between your static files.
so your final app directory structure look like
my_app/
|____static/
|____my_app/
|____css/
| # your css files
|____js/
| # js files
|___images/
# your image files
and update your base.html with
<link rel="stylesheet" href="{% static 'my_app/css/main.css' %}" />
Hopefully that works.
Remove the STATIC_ROOT.
Hopefully that works.
I am trying to add a link to a folder in the npm_modules folder located in the root of my Django project to one of my templates. However, when attempting to do so, the path typed in is simply appended to the current url and is treated as a link. Since my folder is not there, it is not loaded and my javascript crashes.
Since it is best practice to keep the npm_modules folder in root, how do I go about referencing folders within it inside my templates?
<script src="\node_modules\angular-file-upload\dist\angular-file-
upload.min.js" type="text/javascript"></script>
You need to keep your npm package file in static folder. Then in template
{% load staticfiles %}
...
<script src="{% static node_modules\angular-file-upload\dist\angular-file-
upload.min.js %}" type="text/javascript"></script>
Assume you save your angular-file-upload.min.js in folder static/node_modules/angular-file-upload/dist
In settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
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>