I am creating an application in django and everything works great, except one template. all the template load the javascript and css files with any problem, but there's one template doen't load any css or JS file.
When I am typing the view of this template I make an typo error and after I fix it the template won't load any css or JS file
UPDATE: View definition indented
view
#permission_required('prov.views.configView',login_url='/login/')
def MasterFormView(request):
form = MasterForm(request.POST or None)
if request.method == 'POST':
idp = request.POST['id_proveedor']
a = request.POST['anio']
m = request.POST['mes']
id = Proveedor.objects.get(id_proveedor=idp)
obj,created = Master.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
if form.is_valid():
objdetrec,createddetrec = DetalleRecepcion.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
objdetcar,createddetcar = DetalleCargaArchivo.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
objdetcon,createddetcon = DetalleConci.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
objenvcon,createdenvcon = EnvioConci.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
objcer,createdcer = Certificado.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
objentcert,createdentcert = EntCertificado.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
objacepta,createdacepta = AceptCertificado.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
objrepro,createdrepro = Reproceso.objects.get_or_create(id_proveedor=id,anio=a,mes=m)
return HttpResponseRedirect('/monitor/')
if not created:
obj.id_proveedor = id
obj.anio = a
obj.mes = m
#-----------------------------
objdetrec.id_proveedor = id
objdetrec.anio = a
objdetrec.mes = m
#----------------------------
objdetcar.id_proveedor = id
objdetcar.anio = a
objdetcar.mes = m
#----------------------------
objdetcon.id_proveedor = id
objdetcon.anio = a
objdetcon.mes = m
#----------------------------
objenvcon.id_proveedor = id
objenvcon.anio = a
objenvcon.mes = m
#----------------------------
objcer.id_proveedor = id
objcer.anio = a
objcer.mes = m
#----------------------------
objentcert.id_proveedor = id
objentcert.anio = a
objentcert.mes = m
#----------------------------
objacepta.id_proveedor = id
objacepta.anio = a
objacepta.mes = m
#----------------------------
objrepro.id_proveedor = id
objrepro.anio = a
objrepro.mes = m
#----------------------------
obj.save()
objdetrec.save()
objdetcar.save()
objdetcon.save()
objenvcon.save()
objcer.save()
objentcert.save()
objacepta.ave()
objrepro.save()
return HttpResponseRedirect('/monitor/')
return render_to_response('masterform.html',
{'form':form})
form:
class MasterForm(forms.ModelForm):
def __init__(self,*args,**kwargs):
super(MasterForm,self).__init__(*args,**kwargs)
self.helper = FormHelper(self)
self.helper.layout.append(Submit('save','Grabar'))
self.helper.layout = Layout(
Fieldset('',
'id_proveedor',
'anio',
'mes',
Submit('save','Grabar'),
)
)
class Meta:
model = Master
url:
url(r'^masterform/$', 'prov.views.MasterFormView',name='masterform'),
The form update all the models specified and works fine, but doesn't have style or JS functions.
I don't know why all the others template can load the css files and this form don't
Anybody have the same issue or any idea how to fix this.
P.D.: in firebug the error is "PAGE NOT FOUND"
UPDATE Add the code of the html templates
masterform.html
{% extends 'base.html' %}
{% load crispy_forms_tags %}
{% block content %}
<div class="container">
<div class="col-sm-4"
<form method='POST' action='' class='form'>
<div class="form-group">
{% csrf_token %}
{% crispy form %}
</div>
</form>
</div>
</div>
{% endblock %}
base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Proveedores de Contenido</title>
<!-- Bootstrap core CSS -->
<link href="{{STATIC_URL|default:"/static/"}}admin/css/bootstrap.min.css" rel="stylesheet">
<link href="{{STATIC_URL|default:"/static/"}}admin/css/custom.css" rel="stylesheet">
<link href="{{STATIC_URL|default:"/static/"}}admin/css/jquery.dataTables.css" rel="stylesheet">
<link href="{{STATIC_URL|default:"/static/"}}admin/css/customtable.css" rel="stylesheet">
<link href="{{STATIC_URL|default:"/static/"}}admin/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="{{STATIC_URL|default:"/static/"}}admin/js/bootstrap.js"></script>
<!-- script type="text/javascript" src="/static/admin/js/jquery-1.11.1.min.js"></script -->
<script src="{{STATIC_URL|default:"/static/"}}admin/js/jquery.dataTables.js"></script>
<script src="{{STATIC_URL|default:"/static/"}}admin/js/dataTables.bootstrap.js"></script>
</head>
<body>
{% block content %}{% endblock %}
{% include 'footer.html'%}
</body>
</html>
When I create the viwe, form and template works fine and load every css and js file.
Later I make a change and accidentally type wrong some word. After I fix the typo error is the template won't load my css and js files.
But the form works fine, only don't have style.
I am thinking in rewrite all (view, form, htmltemplates and change the url) and see if there some corrupt file or configuration
It seems like your redirecting yourself to the masterform.html. This is where css and javascript are loaded.
Edit:
The files cant be found because you haven't the correct settings:
For app:
STATIC_URL = '/static/'
For prodject:STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
'/var/www/static/',
)
add these two settings to your settings file and dont forget to load them:
{% load staticfiles %}
at the top of all your html files.
Then you will not need your {{STATIC_URL | default}} anymore just use {{ STATIC_URL}}
Manage static files
Suggestion:
Make a {%block exta_head %} {% endblock %}
inside your of your main template so your extended templates can add there own files.
Related
I make site In laravel 9 with Inertiajs/vuejs 3 based on https://github.com/ColorlibHQ/AdminLTE 3 (dark mode).
I removed all jquery and use vuejs only. it works ok for for, but when I open site
is looks broken, like not all styles were loaded,
Please try enter to login into adminarea by url :
https://bi-currencies.my-demo-apps.tk/admin/currencies
credentials are in Login form
and pages looks like : https://prnt.sc/TCjBh0SefUMO 4
But if to refresh page with “CTRL+R” pages looks ok, in dark mode.
Any ideas why so and how that can be fixed?
More Details :
Adminare is based on https://github.com/ColorlibHQ/AdminLTE template(with "bootstrap": "^4.6.0").
Frontend is based on custom https://technext.github.io/space/v1.0.0/ template (with Bootstrap v5.0.1 )
I have the same design issue when I switch from admin area
frontend page https://bi-currencies.my-demo-apps.tk/home
I see this problem of other browsers of my Kubuntu 20 too.
Maybe problem is that that I use too different templates, but actually I use different layouts, so in
app/Http/Middleware/HandleInertiaRequests.php :
public function rootView(Request $request)
{
if ($request->segment(1) == 'user') {
return 'layouts/user';
}
if ($request->segment(1) == 'admin') {
return 'layouts/adminlte'; // TODO
}
return 'layouts/frontend'; // Current request is front-end
}
This project has no Redis or other chache tools installed. Sure I cleared all cache opening the site. Any other ideas?
Frontend template resources/views/layouts/frontend.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<link rel="shortcut icon" type="image/x-icon" href="/images/frontend_favicon.ico">
<link href="https://fonts.googleapis.com/css2?family=Yantramanav:wght#300;400;500;700;900&display=swap"
rel="stylesheet">
<!-- Styles -->
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<link rel="stylesheet" href="/css/theme.css">
<script src="/vendors/#popperjs/popper.min.js"></script>
<script src="/vendors/bootstrap/bootstrap.min.js"></script>
<script src="/vendors/is/is.min.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=window.scroll"></script>
<script src="/vendors/fontawesome/all.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
and admin template resources/views/layouts/adminlte.blade.php :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title inertia id="app_title">{{ config('app.name', 'Laravel') }}</title>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Styles -->
<link rel="stylesheet" href="/css/OverlayScrollbars.min.css">
<link rel="stylesheet" href="/css/fontawesome_all.min.css">
<link rel="stylesheet" href="/css/adminlte.min.css">
<link rel="stylesheet" href="/css/admin_custom.css">
#routes
<!-- Scripts -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script src="/js/Chart.bundle.js"></script>
<script src="/js/OverlayScrollbars.min.js"></script>
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="bg-light sidebar-mini layout-fixed layout-footer-fixed">
#inertia
</body>
</html>
1 common resources/js/app.js :
require('./bootstrap');
window.Toast = Swal.mixin({
toast: true,
position: 'top-end',
showConfirmButton: false,
timer: 3000,
timerProgressBar: false,
didOpen: (toast) => {
toast.addEventListener('mouseenter', Swal.stopTimer)
toast.addEventListener('mouseleave', Swal.resumeTimer)
}
})
require('#fortawesome/fontawesome-free/js/all.min.js');
// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, Link } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import mitt from 'mitt';
window.emitter = mitt();
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
import Multiselect from '#vueform/multiselect'
import VueUploadComponent from 'vue-upload-component'
import Paginate from "vuejs-paginate-next";
const app = createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component('inertia-link', Link)
.component('Paginate', Paginate)
.component('file-upload', VueUploadComponent)
.mixin({ methods: { route } })
.component('multiselect', Multiselect)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
also in admin/settings page I added “Clear Cache” button, clicking on it next commands are run :
\Artisan::call('config:cache');
\Artisan::call('route:cache');
\Artisan::call('cache:clear');
\Artisan::call('route:cache');
\Artisan::call('route:clear');
\Artisan::call('view:clear');
\Artisan::call('clear-compiled');
but clearing cache did not help with this problem.
Can it be that reason of this problem that I have 1 common resources/js/app.js both for admin area and frontend part?
Thanks!
Once I was faced same problem with inertia and that works for me. Usually that happened when you used multiple-layouts, as well as those layout have different style-scripts.
Reason (problem):
As you have used one layout for frontend-pages (public pages) and other one for admin-pages.
So when user visited front-pages, all style scripts of frontend-layout loaded and it's work fine and looks good.
But, when user switched to admin-layout that's layout style-scripts not loaded. So, On hard-refresh (Crtl+R) that URL the appropriate layout style-scripts got loaded.
I read many article to switch layouts on run-time every article gives same solutions as you did in HandleInertiaRequests.php.
Solution:
Then I come to a point where I need to switch layout on clicking some link I did hard-loading as shown in below snippet instead of redirection by inertia-link:
<a :href="route('home')">
Home
</a>
By this way appropriate layout style-script got loaded.
My Assumption:
Moreover, I've seen your site-source-code (Ctrl+U) as shown in screenshot. You haven't loaded style-scripts by Laravel asset() helper method.
I suggest to try once by loading scripts & style link in blade file by Laravel standard approach (using asset() method) that might be a problem.
Attach CSS sheet
<link href="{{ asset('frontend/css/bootstrap.min.css') }}" rel="stylesheet">
Attach JavaScript/jQuery scripts
<script src="{{ asset('frontend/js/jquery-3.5.1.min.js') }}"></script>
After using asset() method, your links in site-source-code (Ctrl+U)
looks something like that:
Note:
make sure you must set appropriate APP_URL in .env file.
I have a big problem.Django doesn't recognize my css files. PHG
My css file is located in polls, but Django won't recognize it as a static file
My home.html
<link rel="stylesheet" type="text/css" href="home.css">
<title>121212</title>
<body>
<div id="1212">
<li class="fafa">12112</li>
</div>
</body>
my settings.py
STATIC_URL = '/static/'
STATIC_DIRS = [os.path.join(BASE_DIR, "static"),]
STATIC_ROOT = os.path.join(BASE_DIR, 'static')```
It is a very SMALL problem, Mr XD.
In your template: {% load static %}
And then: <link href="{% static 'home.css' %}" rel="stylesheet">
Django was able to load a static .png file but not the static .css file, why?
settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
TEMPLATE_DIR = os.path.join(BASE_DIR,"templates")
STATIC_DIR = os.path.join(BASE_DIR,"static")
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
css file
h1{
color: red;
}
html
<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="utf-8">
<title>Django Guitar Page</title>
<link rel="stylesheet" href="{% static "css/mysyle.css" %}"/>
</head>
<body>
<<h1>Hi, this is text</h1>
<img src="{% static "images/a_picture.png" %}" alt="Uh oh, didn't show">
</body>
</html>
file path
first_app/static/css/mystyle.css
first_app/static/css/images/a_picture.png
It's a Spelling mistake
Change
{% static "css/mysyle.css" %}
to
{% static "css/mystyle.css" %}
in my case changed the structure to this:
├───myapp
│ ├───migrations
│ ├───templates
├───static
│ └───css
| └───style.css
└───myproject
├───templates
└───registration
and worked.
The theme applied by css does not work. In the past it used to apply but i do not what i did that its not executable anymore. base.htmnl is core template for other pages.
In base.html i have :
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{% static 'nana/css/main.css' %}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<nav class='navbar mynav-fixed-top navbar-expand-lg bg-dark' role='navigation' id='navbar'>
<div class="container-fluid">
</div>
</nav>
<div class="container-fluid">
{% block content %}
<div class="main">
</div>
{% endblock %}
main.css
body{background-color: yellow}
settings.py :
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]
The css does not work. I do not knwow why the application does not apply changes in css file. Would appreciate your though and help how to fix it.
In general it is best to have the link to your own custom stylesheet (in your case that is main.css) after the other stylesheets in the head-section. The bootstrap stylesheets may overwrite your main.css thus making it useless.
You have the link to main.css before the links to bootstrap.
You better set STATIC_ROOT instead of STATICFILES_DIRS if this is the only folder with static files in your project:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR,'static')
and change this {% load staticfiles %} to this {% load static %} in your templates - load staticfiles method is deprecated since 2.1.
Also, as already suggested in comments, put your stylesheet after all the thirdparty stylesheets - thus it will have higher priority. Also note that your style may have lower priority if any of prior stylesheets defines the same property with !important option.
You have not set the STATIC_ROOT, that's why your css is not showing up.
First Make sure in settings.py the debug setting is True
Debug=True
Put following code in settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticroot')
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
in your main urls.py
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# other urls
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
and then call following command
>python manage.py collectstatic
I am using django_compressor.
In template :
{% load compress %}
{% compress css %}
<link rel="stylesheet" href="/media/css/master.css" type="text/css" charset="utf-8">
{% endcompress %}
In settings :
DEBUG = True
MEDIA_URL = '/media/'
INSTALLED_APPS = [
'compressor',
// Here other installed app.
]
But When I do these things my css is not getting uploaded. When I remove the {% compress css %} tag My css start rendreing. Where I am doing mess? Can any one suggest me?
I would check two things:
if compress has access to the file itself
is generated file (e.g. under /media/cache/....) is accessible by browser
In settings COMPRESS is a boolean that decides if compression will happen. Default value is the opposite of DEBUG. So you should change DEBUG = True to DEBUG = False.
(https://github.com/carljm/django_compressor)