Load javascript file only on one page

Question

Guys, I’m getting caught with something, I imagine it should be simple, but I’m all day moving files up and down and I can’t solve kkkkk

Next, I have a system inside a Gentelella template, and by default, it loads several javascript files at the bottom of the page.

My code, by always repeating the beginning and end, I have a header.php page and a footer.php. In this footer has all library inclusions getting like this:

<!-- jQuery -->
<script src="../vendors/jquery/dist/jquery.min.js"></script>    
<!-- Bootstrap -->
<script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="../vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="../vendors/nprogress/nprogress.js"></script>
<!-- iCheck -->
<script src="../vendors/iCheck/icheck.min.js"></script>
<!-- Datatables -->
<script src="../vendors/datatables.net/js/jquery.dataTables.js"></script>
<script src="../vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="../vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="../vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="../vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="../vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="../vendors/datatables.net-buttons/js/buttons.print.js"></script>
<script src="../vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="../vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="../vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="../vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="../vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="../vendors/jszip/dist/jszip.min.js"></script>
<script src="../vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="../vendors/pdfmake/build/vfs_fonts.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="../vendors/moment/min/moment.min.js"></script>
<script src="../vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- bootstrap-datetimepicker -->    
<!-- bootstrap-wysiwyg -->
<script src="../vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js"></script>
<script src="../vendors/jquery.hotkeys/jquery.hotkeys.js"></script>
<script src="../vendors/google-code-prettify/src/prettify.js"></script>
<!-- Summernote Text Editor -->
<script src="../vendors/dist/summernote.min.js"></script>

<script src="../vendors/dist/lang/summernote-pt-BR.js"></script>    
<!-- jQuery Tags Input -->
<script src="../vendors/jquery.tagsinput/src/jquery.tagsinput.js"></script>
<!-- Switchery -->
<script src="../vendors/switchery/dist/switchery.min.js"></script>
<!-- Select2 -->
<script src="../vendors/select2/dist/js/select2.full.min.js"></script>   
<!-- Autosize -->
<script src="../vendors/autosize/dist/autosize.min.js"></script>
<!-- jQuery autocomplete -->
<script src="../vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js"></script>    
<!-- starrr -->
<script src="../vendors/starrr/dist/starrr.js"></script>
<script src="../vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<!-- Ion.RangeSlider -->
<script src="../vendors/ion.rangeSlider/js/ion.rangeSlider.min.js"></script>
<!-- Bootstrap Colorpicker -->
<script src="../vendors/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<!-- jquery.inputmask -->
<script src="../vendors/jquery.inputmask/dist/min/jquery.inputmask.bundle.min.js"></script>
<!-- jQuery Knob -->
<script src="../vendors/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- Carrega clientes na OS -->
<script type="text/javascript" src="js/clientes.js"></script>

Good thing it happens. I am including in the last line the client.js file, which makes a request in the BD with a list of clients, and in it I use Jquery and Jquery UI. Then the mess starts, when I put the jquery-ui file on my footer, depending on the position, or stop working other template features, or for my code. Apparently ends up complicating because of the autocomplete that is already invoked in this footer.

The "gambiarra" I thought about doing is, try to load the jquery-ui.js file only on the page I need it on. But I can’t imagine how to do that. The "easy" solution would be to remove the header and footer of this page and put everything in the file of the page, but I want to avoid this, because if I change anything in the menus (which is still in development) I have to go also on this page and change also.

Anyway, any tip there helps me guys. Strong hug and everyone a great weekend.

Answer 1

Create a condition for your scripts to run only at a specific url.

if (window.location.href == "https://seusite.com") { //se a pagina corresponder, executar a função
   //sua função aqui 
}