4

I have put the JS files in order that they should load to avoid any errors in console and get everything working, however when I look at the network tab in developer tools, the files are being loaded differently to what is in the web page...

Here is the order in code: 

<script src="/js/lib/jquery-3.3.1.min.js"></script>
<script src="/js/lib/jquery-ui.min.js"></script>
<script src="/js/lib/bootstrap.bundle.min.js"></script> <!-- Includes popper.js -->
<script src="/js/lib/toastr.min.js"></script>

<!-- Page specific scripts -->

<script src="/js/lib/moment.min.js"></script>
<script src="/js/lib/daterangepicker.js"></script>
<script src="/js/lib/Chart.min.js"></script>

<script src="/js/partials/daterange.js"></script>
<script src="/js/partials/utils.js"></script>
<script src="/js/partials/charts.js"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.16/b-1.5.1/b-html5-1.5.1/b-print-1.5.1/cr-1.4.1/datatables.min.js"></script>

<script src="/js/partials/dataTable.js"></script> 

<script src="/js/mainBundle.js"></script>

And this is what I get in dev tools: enter image description here

  • errors in console, that jQuery is loaded too late... (it is 1st in the code...)

Things I think can have an impact - I am using some JS files stored locally, some fetched from cdnjs.

I am using templating (blade) within Laravel (some script calling is from main template, some from 'page-specific'). But I would think that php parses everything together beforehand.

lovemyjob
  • 579
  • 1
  • 5
  • 22
  • Can you create a merged javascript file with the scripts in the correct order? – Aurel Bílý Feb 19 '18 at 16:32
  • Possible duplicate of [load and execute order of scripts](https://stackoverflow.com/questions/8996852/load-and-execute-order-of-scripts) – DDRamone Feb 19 '18 at 16:33
  • Definte *"Includes popper.js"*. Also: The order in which they're downloaded by the network layer does not necessarily reflect the order in which they're executed. (In fact, probably doesn't in this case.) – T.J. Crowder Feb 19 '18 at 16:33
  • @AurelBílý I could but I load some JS on some pages, while the other don`t need it. That is why I split them and use templates. – lovemyjob Feb 19 '18 at 16:34
  • I can see a pattern here where cdnjs JS files are being loaded faster and therefore causing errors for locally loaded jQuery.... – lovemyjob Feb 19 '18 at 16:37

1 Answers1

5

When you load multiple JavaScript files, the browser will load handfuls at a time (usually about 5). They may finish or even start in a different order.

But, that is okay. Even if they finish loading in a different order, they will still be run in the order that you have specified (unless you are using defer or async which affect the run order).

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
samanime
  • 25,408
  • 15
  • 90
  • 139
  • Is the **run** order affect, or just the **load** order? The run order is what matters for your code. The load order is generally irrelevant. – samanime Feb 19 '18 at 16:42
  • Also, with `jQuery` in particular, are you being sure to wrap the relevant code in ready functions? – samanime Feb 19 '18 at 16:43
  • yes I am sure. I am getting this error: `Cannot read property 'aDataSort' of undefined` – lovemyjob Feb 19 '18 at 16:45
  • 1
    Hmm, it's unlikely that it's the order they are loaded by the browser causing that. They should be running in the appropriate order. You could test that by putting a `console.log` at the top of each file to see which ones run when. There may be something else going on. – samanime Feb 19 '18 at 17:33
  • I followed your advice and it loads in correct order. Thanks for reasuring it. I still got a `jQuery.Deferred exception: Cannot read property 'aDataSort' of undefined TypeError: Cannot read property 'aDataSort' of undefined` for some reason, but I guess it is going to be another question... – lovemyjob Feb 20 '18 at 08:20
  • And I found the reason behind the error as well. So, all well and good. Thank you for your support :) – lovemyjob Feb 20 '18 at 08:27