I have a problem when I import my library lodash.js and when I use underscore.
I have seen in other posts, that we can use the method _.noConflict ()
I use it like this:
<script type="text/javascript" src="/etc/chat/inline.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/polyfills.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/styles.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/vendor.bundle.js"></script>
<script type="text/javascript" src="/etc/chat/main.bundle.js"></script>
<script type="application/javascript">
_u = _.noConflict();
</script>
However, my project needs to use the library lodash () so this solution does not work.
Is there another solution?
Related
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 have these jquery files included but some plugins work and some are not when i change squence then some plugins work but other give error. Please tell me best squence of these files. Thanks
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="js/urdutextbox.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
<script src="js/jquery.cookie.js"></script>
This would work.
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/urdutextbox.js"></script>
Also note that you do not need to include normal and minified versions (*.min.js). And since jquery-ui.js depends on jquery core code, it could be kept down to jquery core.
Also please note that you may not require two or more versions of a jquery core thing as it might not make any sense. Instead if you really wish to have some recently added functionality, please make your own custom file by going to jquery custom build at this link.
Just because a version of jQuery requires a certain version doesn't mean it won't work with a later version.
I would try to remove:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
I would also completely remove this since there's no way for a plugin to work after you remove jQuery as a global.
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
Also, you're free to remove the type="text/javascript" from your script tags, no issue with it but it's not needed.
I'd put your site functions after all the other scripts are include as well, and I'd put jquery.cookie.js before the ui stuff, just as preference.
So, I'd end up with:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/urdutextbox.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
<script src="js/jquery-ui-sliderAccess.js"></script>
<script src="js/jquery-ui-timepicker-addon.min.js"></script>
<script src="js/sitefunction.js"></script>
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>
I'm trying to run three sets of JS code in my header tag, however, I can only seem to run two at a time with the following code (see below)...
(this code below works perfectly fine on it's own)
<link rel="stylesheet" href="http://www.frhdesigns.com/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/lightbox.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
...Now when I add the third set of code to the mix (3rd set of js code below) which is a code for fading images, I can't seem to get all three to work together when I view the page. I know JS is all about order...but I don't know the order...
<script type="text/javascript" src="_fade_in/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="_fade_in/js/custom.js"></script>
thanks!
ok. where should I place this line of code
<script type="text/javascript" src="_fade_in/js/custom.js"></script>
**in the following sequence?**
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/prototype.js"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="_fade_in/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.frhdesigns.com/lightbox2.04/js/lightbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery.localScroll.defaults.axis = 'y';
jQuery.localScroll();
});
</script>
Judging by the names of your files, it looks like you are loading jQuery twice.
<script type="text/javascript" src="http://www.frhdesigns.com/jquery-vertical-scroll/js/jquery.min.js"></script>
<script type="text/javascript" src="_fade_in/js/jquery-1.3.2.min.js"></script>
Get rid of the second jQuery include and update the first to the particular version you need (if it isn't already).
You need to enable jQuery.noConflict(); for jQuery.
<script type="text/javascript">
jQuery.noConflict();
// Use jQuery instead of $
jQuery(document).ready(function(){
jQuery("div").hide();
});
// prototype codes
// scriptaculous
</script>