Solution 1 :

It’s maybe from the address of the files. see browser console for error or test file address on the source page.

Problem :

Some of the following .js and .css files load just fine, like custom_javascript.js, while others, like the common-scripts.js file, do not load at all. By load, I mean load to the DOM on the HTML page.

I have tried reordering the files, putting them at the top and bottom of the html page, removing one or more, and some functionality will work depending on how it is arranged, but I have been unable to get everything to work at the same time.

My thought is they are just out of order, so I think my question is: How do I know what order these script/link tags should be in?

<!-- Bootstrap core CSS -->
<link href="{{ url_for('static', filename='lib/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<!--external css-->
<link href="{{ url_for('static', filename='lib/font-awesome/css/font-awesome.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/zabuto_calendar.css') }}" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/style-responsive.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='lib/chart-master/Chart.js') }}"></script>
<!-- js placed at the end of the document so the pages load faster -->
<script src="{{ url_for('static', filename='lib/jquery/jquery.min.js') }}"></script>
<script src="{{ url_for('static', filename='lib/bootstrap/js/bootstrap.min.js') }}"></script>
<script class="include" type="text/javascript" src="{{ url_for('static', filename='lib/jquery.dcjqaccordion.2.7.js') }}"></script>
<script src="{{ url_for('static', filename='lib/jquery.scrollTo.min.js') }}"></script>
<script src="{{ url_for('static', filename='lib/jquery.nicescroll.js') }}" type="text/javascript"></script>
<script src="{{ url_for('static', filename='lib/jquery.sparkline.js') }}"></script>
<!--common script for all pages-->
<script src="{{ url_for('static', filename='lib/common-scripts.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='lib/gritter/js/jquery.gritter.js') }}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='lib/gritter-conf.js') }}"></script>
<!--script for this page-->
<script src="{{ url_for('static', filename='lib/sparkline-chart.js') }}"></script>
<script src="{{ url_for('static', filename='lib/zabuto_calendar.js') }}"></script>

<!-- PROGRAM CUSTOM JS FILE -->
<script type="text/javascript" src="{{ url_for('static', filename='custom_javascript.js') }}"></script>
<!-- PROGRAM CUSTOM CSS FILE -->
<link type="text/javascript" src="{{ url_for('static', filename='custom_css.css') }}">

Comments

Comment posted by Si8

The supporting script/css files should be at top… followed by your dependent script/css files. When you say it doesn’t load what do you mean? Have you checked the Network tab?

By