In my webpage I am doing two things:
Image slide show
Image popup
For that I had included 6 JavaScript files, but it conflicts. It works fine individually. How can I avoid the JavaScript conflict?
I had included the js file like this:
----------------for popup-------------
<div id="content">
<div class="chat in">
<div class="msg Nth">
<script type="text/javascript" src="popup/js/prototype.js"></script>
<script type="text/javascript" src="popup/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="popup/js/lightbox.js"></script>>
<div class="msg Nth">
--------------for slideshow-------------
<script src="scrollbar_2/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<script src="scrollbar_2/jquery-ui-1.7.1.custom.min.js" language="javascript" type="text/javascript"></script>
<script src="scrollbar_2/slider_test.js" language="javascript" type="text/javascript"></script>
I'm pretty sure Lightbox is dependent upon JQuery, so it should be placed AFTER you load in JQuery, like so:
<script src="scrollbar_2/jquery-1.3.2.min.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript" src="popup/js/lightbox.js"></script>
It is also best practice to put all your JavaScript files towards the END of your HTML file in case some of the JavaScript files are dependent upon the elements in the DOM being loaded first.
However, more clarity around the exact error message would be useful for helping you debug.
Related
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>
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/
The order of the javascript files in an html file only makes a difference if they are interdependent. For example if you have a script that uses JQuery and you have declared the jquery script after your script, you will have problem. So when you have a script (or scripts) that is used from another script (or scripts) declare first the script (or scripts) that is used and then the script (or scripts) that uses it.
I use lodash accross my website and its now telling me that uniqBy is not a function. I thought maybe this was due to me using an older version of the library so I updated it and still had the same issue. I do bring it into the html via ejs <%- include %> but when using something like ejs lodash wont work as expected. I try to use _.uniqBy to sort an array but unless I specifically insert a lodash script into html it wont work.
<%- include ../partials/scripts.ejs%>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs/dt-1.10.12/datatables.min.js"></script>
<script type="text/javascript" src="/js/accounting/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="/js/accounting/jszip.min.js"></script>
<script type="text/javascript" src="/js/accounting/pdfmake.min.js"></script>
<script type="text/javascript" src="/js/accounting/vfs_fonts.js"></script>
<script type="text/javascript" src="/js/accounting/buttons.html5.min.js"></script>
<!-- <script type="text/javascript" src="/js/lodash.js"></script> Works with this -->
<script type="text/javascript">
// Returns undefined unless the lodash script tag is uncommented
console.log(_.uniqBy);
</script>
<script type="text/javascript" src="/js/cost/list.js">//Lodash used in here</script>
<%- include ../partials/footer.ejs%>
And the scripts partial is:
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-formhelpers.min.js"></script>
<script type="text/javascript" src="/js/select2.min.js"></script>
<script type="text/javascript" src="/js/moment.min.js"></script>
<script type="text/javascript" src="/js/lodash.js"></script>
<script type="text/javascript" src="/js/jquery.cookiebar.js"></script>
<script type="text/javascript" src="/js/slide.js"></script>
<script type="text/javascript" src="/js/email.js"></script>
<script type="text/javascript" src="/js/jspdf.js"></script>
In my cost/list.js I use jquery with document.ready() before I use lodash so my question is why does this happen? I thought maybe first it was scope but It cant be as I use these files everywhere and never had this issue before. Then I thought maybe it was the loading as the ejs including of partials could load either before or after the page is ready but my js cost/list.js should wait for it to be ready due to the $(document).ready(). Im not sure what the issue is and any ideas as to whats happening with the ejs includes would be great.
Went through the page a bit more and found out its pdfmake use lodash too but they use an older version(3.x) whereas today im on (4.17.4) this is why as pdfmakes lodash comes last it takes precedence and becomes the global. Hopefully this will help someone in the future. Check your scripts I went through them one by one moving my lodash script after every other script and found it that way
I've been having trouble implementing jQuery - in particular, replicating this exercise from Code Academy. I understand from this other question on Stack Overflow that the <script> referencing jQuery.js needs to be placed before the <script> referencing the local JavaScript file in order for the $(document).ready(); to be recognized.
As such, here is index.html:
<!DOCTYPE html>
<html>
<head>
<title>Behold!</title>
<link rel='stylesheet' type='text/css' href='http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css'/>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
</head>
<body>
<div id="menu">
<h3>jQuery</h3>
<div>
<p>jQuery is a JavaScript library that makes your websites look absolutely stunning.</p>
</div>
<h3>jQuery UI</h3>
<div>
<p>jQuery UI includes even more jQuery goodness!</p>
</div>
<h3>JavaScript</h3>
<div>
<p>JavaScript is a programming language used in web browsers.</p>
</div>
</div>
</body>
</html>
And then here is my index.js:
$(document).ready(function() {
$("#menu").accordion({collapsible: true, active: false});
});
In both Chrome and IE, this displays as a entirely blank page, with no trace of the jQuery accordion or text whatsoever.
Please let me know if I'm overlooking something - I really appreciate the help. Thanks!
This:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.j" type="text/javascript"></script>
Should be this:
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
I don't know if this error is just from copy'n'paste but the file extension is incorrect (should be "js" and not "j").
Furthermore you do not include jQuery itself (only jQuery UI).
Use the following head-Area:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<script type='text/javascript' src='index.js'></script>
These work for me.
the website can be found here: http://www.healthygit.com
Basically when the site loads depending on what order I include the javascript depends what breaks, for example:
If I include the Menu JavaScript (below) first then the menu will not work but the image slider will.
Menu JS:
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/jquery.easing.js"></script><!-- jQuery Easing effects -->
<script type="text/javascript" src="js/megamenu_plugins.js"></script><!-- Mega Menu Plugins (scroller, form, hoverIntent) -->
<script type="text/javascript" src="js/megamenu.js"></script><!-- Mega Menu Script -->
But if I include the menu files last the menu will work and the slider will not, the slider files are:
<script type="text/javascript" src="js/jquery.list-rotator.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
The errors I am getting are:
ReferenceError: jQuery is not defined
...),delay:m(a(this).attr("delay"),bE),effect:r[a(this).attr("effect")]!=undefined?...
jquery....min.js (line 1)
And
ReferenceError: $ is not defined
$(document).ready(
preview.js (line 1)
Can anyone help me please?
I noticed in your webpage that you placed jQuery last. I think it should be at the first. Have you tried it in the following order:
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery -->
<script type="text/javascript" src="js/jquery.easing.js"></script><!-- jQuery Easing effects -->
<script type="text/javascript" src="js/megamenu_plugins.js"></script><!-- Mega Menu Plugins (scroller, form, hoverIntent) -->
<script type="text/javascript" src="js/megamenu.js"></script><!-- Mega Menu Script -->
<script type="text/javascript" src="js/jquery.list-rotator.min.js"></script>
<script type="text/javascript" src="js/preview.js"></script>
Tell me if it helps.
I am using jquery and its related plugins in my site.
Since i use more js. for visiting each page in my site. all the js loads so site loading time increases.
How to use js libraries efficiently without loading js for each page visit.
UPDATE:
I am using
<!-- JQUERY-->
<script src="{$TEMPLATE_FACK}/js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$.noConflict();
</script>
<script src="{$TEMPLATE_FACK}/js/global.js" type="text/javascript"></script>
<!-- JQUERY.VALIDATE SCRIPT -->
<script src="{$TEMPLATE_FACK}/js/jquery.validate.js" type="text/javascript"></script>
<!--JS VALIDATION SCRIPTS -->
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/lib/prototype.js"></script>
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/scriptaculous/src/scriptaculous.js"></script>
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jsvalidate.js"></script>
<!--jQuery URL Script-->
<script type="text/javascript" language="javascript" src="{$TEMPLATE_FACK}/js/jquery.url.js"></script>
<!-- TINYMCE SCRIPTS -->
<script type="text/javascript" src="{$TEMPLATE_FACK}/tinymce/jquery.tinymce.js"></script>
<script src="{$TEMPLATE_FACK}/tinymce/tiny_mce_src.js" type="text/javascript"></script>
<script src="{$TEMPLATE_FACK}/js/quicktags.js" type="text/javascript"></script>
<!-- WORD COUNT -->
<script src="{$TEMPLATE_FACK}/js/jquery.wordcount.js" type="text/javascript"></script>
<!-- Thick box scripts -->
<script src="{$TEMPLATE_FACK}/js/thickbox.js" type="text/javascript"></script>
<!--JS FOR GRAPH (Highcharts Refer: http://highcharts.com/ref/#plotOptions-pie-point-events)-->
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/highcharts.js"></script>
<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/themes/gray.js"></script>
-->
<!-- 1b) Optional: the exporting module -->
<!--<script type="text/javascript" src="{$TEMPLATE_FACK}/js/graph/modules/exporting.js"></script>-->
<!--JS FOR Tag adding in Faq add1.html - added by Mogan Dec 02, 2010-->
<script src="{$TEMPLATE_FACK}/js/create_html.js" type="text/javascript"></script>
<!--FANCY BOX -->
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="{$TEMPLATE_FACK}/js/fancybox/jquery.fancybox-1.3.2.js"></script>
This much of js i am using in header section. once i am visiting each page all these loads again and again
The user doesn't have to load it each time, just be sure to set your cache headers correctly so the user caches the JavaScript files that are reused. For libraries specifically (since this is tagged jQuery), look at using a CDN - which will also have the cache headers I mention, as well as parallelizing the download since it's not on your own domain.
Also, you can use a Content delivery network (CDN) for libraries like jQuery etc. Google provides a bunch.
Additionally to the previous answer you should minify all javascript file together, optionally you can use gzip compression.