I want to be able to call external js file in mvc 5 _layout page, i have done a few researches on google, but no success, below is my code in the _Layout Head section:
<!-- start: MAIN JAVASCRIPTS -->
<!--[if lt IE 9]>
<script src="~/assets/plugins/respond.min.js"></script>
<script src="~/assets/plugins/excanvas.min.js"></script>
<script type="text/javascript" src="~/assets/plugins/jQuery-lib/1.10.2/jquery.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jQuery-lib/2.0.3/jquery.min.js")"></script>
<!--<![endif]-->
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/bootstrap/js/bootstrap.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/blockUI/jquery.blockUI.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/iCheck/jquery.icheck.min.js")"></script>
<!-- end: MAIN JAVASCRIPTS -->
<script>
jQuery(document).ready(function () {
Main.init();
Index.init();
});
</script>
#RenderSection("JavaScript", required : false)
#RenderSection("CSS", required : false)
Then at the bottom of the _Layout page i have this:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/assets/plugins")
#RenderSection("Scripts", required : false)
In the View, i have this:
#section JavaScript
{
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script type="text/javascript" src="#Url.Content("~/assets/plugins/flot/jquery.flot.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/flot/jquery.flot.pie.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/flot/jquery.flot.resize.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery.sparkline/jquery.sparkline.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery-easy-pie-chart/jquery.easy-pie-chart.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery-ui-touch-punch/jquery.ui.touch-punch.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/plugins/fullcalendar/fullcalendar/fullcalendar.js")"></script>
<script type="text/javascript" src="#Url.Content("~/assets/js/index.js")">
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
}
Please i will appreciate i someone could assist in suggesting what to do. thanks
move
#Scripts.Render("~/bundles/jquery")
to before its dependencies
i.e.
<script type="text/javascript" src="#Url.Content("~/assets/plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js")"></script>
requires JQuery.js
but you load it after. So moving the include of JQuery above the script which required it, will fix that issue.
Please apply this to all scripts and their dependencies
Just like in normal HTML:
<script type="text/javascript" src="http://link-to-external-javascript-file.js"></script>
Related
This is how my scripts in homepage look like . But i keep getting the error Uncaught TypeError: carouselWithDescription.caroufredsel is not a function
<script type="text/javascript">
$("#DownloadApp").click(function () {
fbq('track', 'Lead');
});
</script>
<!-- Bootstrap Libraries -->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/bootstrap/js/bootstrap.js"></script>
<!-- Masonry Library -->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/isotope/jquery.isotope.min.js"></script>
<script type="text/javascript" src="~/Content/NewHomePage/vendors/isotope/imagesloaded.pkgd.min.js"></script>
<!-- Revolution Slider jQuery-->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/revolution-slider/js/jquery.themepunch.revolution.min.js"></script>
<!-- Quote Rotator jQuery-->
<script src="~/Content/NewHomePage/vendors/quote-rotator/js/jquery.quoterotator.min.js" type="text/javascript"></script>
<!-- Inview Plugin-->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/inview/jquery.inview.js"></script>
<!-- Magnific Popup Plugin -->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- CarouFredSel Plugin-->
<script type="text/javascript" src="~/Content/NewHomePage/vendors/carouFredSel-6.2.1/jquery.carouFredSel-6.2.1-packed.js"></script>
<script type="text/javascript" src="~/Content/NewHomePage/scripts/plugins.js"></script>
<script type="text/javascript" src="~/Content/NewHomePage/scripts/main.js"></script>
<script type="text/javascript" src="~/Content/NewHomePage/scripts/custom.js"></script>
<!-- Options Panel Scripts-->
<script type="text/javascript" src="~/Content/NewHomePage/scripts/_sample.js"></script>
Issue was due to multiple times listing of jquery . The page was referring master layout which was interupting the loading of some files.Removde the refference now it works fine.
I am doing various modifications to my NGINX Magento server and part of this is to do front end optimisations
I am currently using a CDN plugin to host my JS but Magento always calls JS lines (huge massive calls to JS libariries which looks ugly in the code view) that I want to combine to one line.
I know you can use Admin > Developer to merge JS files but I dont want to do this. I want to make this:
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/js.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/form.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/translate.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/cookies.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/product.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/configurable.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar.js"></script>
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar-setup.js"></script>
Change to
<script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/prototype/validation.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/builder.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/effects.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/dragdrop.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/controls.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/scriptaculous/slider.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/js.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/form.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/translate.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/mage/cookies.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/product.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/varien/configurable.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar.js"></script><script type="text/javascript" src="http://dz36xlwnpud7z.cloudfront.net/cdn/210393/js/calendar/calendar-setup.js"></script>
I think is what you're looking for. I tested this with Magento 1.9.2.1.
In this file Mage_Page_Block_Html_Head, function getCssJsHtml() on line 210 character 112-119 you'll find this . "\n". Remove that from the function and your JS files will be rendered in one line as you requested.
Keep in mind not to modify core files but to extend the class and override only this function to maintain rest of functionality.
I am working in a JQuery Mobile App and Phonegap.
I declare a File1.js file in the header, as the last file in the header.
So, I have a little function within the js file:
$('#SendMailButton').bind('tap',function(e){
alert("Hello");
});
When the user press the button, everything works ok.
Latter, I move this function from the File1.js file to a new File2.js file
and I declare File2.js below the File1.js as following:
<script src="js/File1.js"></script>
<script src="js/File2.js"></script>
But it doesn't works.
The complete header is as:
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/File1.js"></script>
<script src="js/File2.js"></script>
What am I wrong?
You are loading two jquery.mobile, also you are loading jquery after load jquery mobile, try with this head:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script src="js/iscroll.js" type="text/javascript"></script>
<script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/File1.js"></script>
<script src="js/File2.js"></script>
Today i wanted to add datepicker() to my page.So I downloaded jqueryui and added then in the sequence below.
<script type="text/javascript" src="js/jquery.js"></script>
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
It didn't work. It took me whole day to figure out what is wrong. it was the SEQUENCE of js files included!!! To work my code i had to include them like bellow.("jquery.js" position had to change)
<script src="js/superfish.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/retina.min.js"></script>
<script src="assets/validate.js"></script>
<script src="js/jquery.placeholder.js"></script>
<script src="js/functions.js"></script>
<script src="js/wizard_func.js"></script>
<script src="check_radio/jquery.icheck.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/navi_artstyle.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/mapmarker.jquery.js"></script>
<script type="text/javascript" src="js/mapmarker_func.jquery.js"></script>
Can some one explain this please. Please give me a Source so I wont make this mistake again.
Normal jQuery (core)
jQuery migrate if you have
jQuery UI
jQuery mobile
Scripts that need jQuery / scripts that are jQuery plugins
Other scripts like bootstrap
You own scripts depending which is needed first
First you have to include normal jQuery library.After that You have to include other jquery library like jquery ui and jquery mobile and all finally you have to include your own javascript files.
As mentioned in comments you have to mention the scripts in the order you use that.
Simply anything used Jquery will goes after jQuery, anything that depends on jQuery UI goes after jQuery UI etc.
I want to add some javascript in my web page:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="${contextPath}/js/jquery.ui.widget.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.iframe-transport.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"></script>
But the content after script tags is not displayed when I tried after start tag <body>.
I also tried before the end of tag </body>, it displayed but javascript is not executed.
And Chrome does not generate any error
I use JSP 2.0:
<?xml version="1.0" encoding="UTF-8" ?>
<jsp:root
xmlns:jsp="http://java.sun.com/JSP/Page"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:form="http://www.springframework.org/tags/form"
version="2.0">
<jsp:directive.page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false"/>
<jsp:output doctype-root-element="html" doctype-system="about:legacy-compat" />
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- ... -->
</html>
UPDATE
It generates short tag javascript and it seems to be a problem for the browser:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"/><script type="text/javascript" src="/edalis/js/jquery.ui.widget.js"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.iframe-transport.min.js"/>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js"/>
<script type="text/javascript" src="/edalis/js/3dupload.js"/>
FIXED I found a solution to avoid auto tag closure but It is not pretty :-/
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript">/**/</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript">/**/</script>
<script src="${contextPath}/js/jquery.ui.widget.js" type="text/javascript">/**/</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.iframe-transport.min.js" type="text/javascript">/**/</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.5.2/jquery.fileupload.min.js" type="text/javascript">/**/</script>
<script src="${contextPath}/js/3dupload.js" type="text/javascript">/**/</script>
try adding type="text/javascript" to your script tags, maybe JSP tries to execute them