Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi All, I am trying to design a web application using Django. The application requires to use Materializecss, jQuery (DatePicker and Select2) and Datatables. My challenge is to include the necessary .css and .js files only once in base.html such that these libraries are cascaded in other pages as well. Any tips in including these files correctly would help a lot. Thanks.

What I have tried:

HTML
<!DOCTYPE html>
{% load static %}
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css"
          rel="stylesheet">
    <link href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
          rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
    <!--Let browser know website is optimized for mobile-->
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <link href="{% static 'css/dashboard2.css' %}" rel="stylesheet">
    <title>Title</title>
</head>

<body>
{% include 'partials/sidenav.html' %}
{% include 'partials/navbar.html' %}
{% block content %}
{% endblock %}

<!--<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>-->
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script
    src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js">
</script>
<script
    src="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js" type="text/javascript">
</script>
<script>
	// Code for SideNav
</script>

<script>
	// Code for DataTable
</script>
</body>
</html>
Posted
Updated 21-Nov-22 19:23pm

1 solution

It is only possible if base.html functioning as a base/master page - which is not supported in plain html, but supported in many development packages...
Like Django templating...

Django | Creating and Using MasterPages[^]
 
Share this answer
 
Comments
Member 15839423 22-Nov-22 1:56am    
Yes. That's what I am trying to achieve. Django template base.html, trying to use the partials concept. I am getting jQuery is not defined error.
Kornfeld Eliyahu Peter 22-Nov-22 2:25am    
Getting the error in the base.html? Maybe the order of your include is wrong?
On what line do you get the error?
Member 15839423 22-Nov-22 4:53am    
The Network tab shows the beloww:
( function( factory ) {
"use strict";

if ( typeof define === "function" && define.amd ) {

// AMD. Register as an anonymous module.
define( [ "jquery" ], factory );
} else {

// Browser globals
factory( jQuery );
}
} )( function( $ ) {
"use strict";
Member 15839423 22-Nov-22 4:58am    
Link to image: https://i.postimg.cc/RV4pVBXD/image.png

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900