I've just added a subscription form from mailchimp to my page and my existing java functions have stopped working. Obviously there are two conflicting sources. Here's the original:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and the mail chimp source:
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
What can I do to have the two work in tandem?
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
https://api.jquery.com/jquery.noconflict/
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 have included jquery in javascript but it is not working wt to do
i hv also included jquery in it
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
jQuery should run at the beginning
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
The browser reads the javascript files in the order you place them.
Try reversing them to
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11./jquery.min.js"></script>
<script type="text/javascript" src="/home/aman/html/book_cricket.js"></script>
I was using jQuery 1.6 before. Then, needed a slideshow which works with jQuery 1.7.
Both versions are conflicting on my HTML page. Any solution to avoid the jQuery conflicts would be appreciated in the following code...
<script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
$(document).ready(function(){
$('#nav ul').superfish();
packages_slider();
testimonials_slider();
set_datepicker();
set_select();
set_captcha(true);
validation();
jquery_miscellaneous();
});
</script>
<script src="js/jquery-ui.1.8.16.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/sliders.js" type="text/javascript"></script>
<script src="js/superfish.js" type="text/javascript"></script>
<script src="js/pdate.js" type="text/javascript"></script>
<script src="js/jquery.datepick.pack.js" type="text/javascript"></script>
<script src="js/jquery.selectbox-0.1.3.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.min.js" type="text/javascript"></script>
<script src="js/jquery.form.js" type="text/javascript"></script>
<script src="js/miscellaneous.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"> </script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($){
$('#basic-slider').advancedSlider({width: 1200,
height: 600,
}
});
});
</script>
<script type="text/javascript" src="js/jquery.transition.min.js"></script>
<script type="text/javascript" src="js/jquery.advancedSlider.min.js"></script>
Don't use both versions. Just upgrade to 1.7 1.8.
There are dirty tricks to get this (partially) working, but it's asking for trouble, a lot of maintenance hell, and twice the amount of code to be downloaded to the client. You really don't want to walk that road.
You need to read up on how $.noConflict() works. The first $.noConflict() you call resets the $ to undefined, meaning the first $(document).ready() will error, as $ is not the function you expect.
If you keep the second $.noConfict(), after you've called it you'll have the following;
$ will point to jQuery 1.6.4
jQuery will point to jQuery 1.7.2
When I include the enhance.js plugin it makes a conflict with other jquery plugins, such as UI jquery plugins
I can't use the date picker functions for example .
what is the possible solution ?
From documentation: http://api.jquery.com/jQuery.noConflict/
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
And/or you can use aliasing here:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
// Code that uses jQuery's $ can follow here.
});
// Code that uses other library's $ can follow here.
</script>