jquery - Does the order of javascript makes a difference?

Question

I'm wondering if the order of the javascript in a page will affect how things work? If yes, is there any problem on my way of arranging them?

<script src="vendor/jquery/jquery.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<script src="js/sb-admin-2.min.js"></script>

<script src="vendor/chart.js/Chart.min.js"></script>

<script src="vendor/datatables/jquery.dataTables.min.js"></script>

<script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

<script src="js/demo/chart-area-demo.js"></script>

<script src="js/demo/chart-pie-demo.js"></script>

<script src="js/demo/datatables-demo.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>


  


  

 

question from:https://stackoverflow.com/questions/65937037/does-the-order-of-javascript-makes-a-difference

Answer 1

Yes it makes a huge difference and you have made the mistake of including TWO versions of jQuery, bootstrap and datatables. You need to remove

• <script src="vendor/jquery/jquery.min.js"></script>
• <script src="vendor/datatables/jquery.dataTables.min.js"></script> and
• <script src="vendor/datatables/dataTables.bootstrap4.min.js"></script>

and move the bootstrap one to before the data tables

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="js/sb-admin-2.min.js"></script>
<script src="vendor/chart.js/Chart.min.js"></script>
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>
<script src="js/demo/datatables-demo.js"></script>

I would personally have EITHER CDN OR downloaded versions

But take a look at the guidelines

https://getbootstrap.com/docs/5.0/getting-started/introduction/

https://cdn.datatables.net/