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
Related
Hi I have a problem with some JS files.
I have linked my JS files like this:
<script type="text/javascript" src="js/autocomplete.js"></script>
<script type="text/javascript" src="js/epos.js"></script>
<script type="text/javascript" scr="js/newRep.js"></script>
<script type="text/javascript" src="js/printLabelCustomer.js"></script>
<script type="text/javascript" src="js/addNewWork.js"></script>
The problem is that only this works:
<script type="text/javascript" src="js/printLabelCustomer.js"></script>
but if I put, for example, the contents of "js/newRep.js" inside "js/printLabelCustomer.js" all works fine.
Where am I doing wrong?
I used JavaScript in script tag in html like this:
<script src="file.js" type="text/javascript"></script>
With use of above code, file.js is linked to our html page. But when we add async or defer to the script tag, file.js cannot be executed in these codes:
<script src="file.js" type="text/javascript" async="async"></script>
<script src="file.js" type="text/javascript" defer="defer"></script>
Could you help me, please?
Why such problem I faced with it?
In addition, for more clarifying I add a section of html comprised of file.js loading as follow:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Dr.Kayvanfar</title>
<meta charset = "UTF-8" />
<link type="text/css" rel="stylesheet" href="Main_CSS.css" />
<noscript> Your browswer don't support JS</noscript>
</head>
<body>
<div id="container" style="width:1500px;margin-left:auto;margin-right:auto;color:blue;">
<div id="header" style="height:100px;background-color:rgb(0,0,0); margin-bottom:20px;margin-top:20px; color:rgb(255,255,255);padding-top:5%">
<span class="topheader">Future Students</span>
<span class="topheader">Current Students</span>
<span class="topheader">Research & Teaching</span>
<span class="topheader">Communities</span>
**<script src="file.js" type="text/javascript" async ></script>**
</div>
</body>
</html>
It should be:
<script src="file.js" type="text/javascript" defer></script>
// Or
<script src="file.js" type="text/javascript" async></script>
// Or
<script src="file.js" type="text/javascript" async defer></script>
When to use which one:
If the script is modular and does not rely on any scripts then use async.
If script is relied on any other script then use defer.
Though you can use both:
If you specify both, async takes precedence on modern browsers, while older browsers that support defer but not async will fallback to defer.
Source
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 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>
In my default.jspx which contains the basic layout for the page I am trying to import some jquery libraries as follows
<head>
...
<spring:url value="/resources/js/lib/jquery-1.9.1.min.js" var="jquery_url" />
<spring:url value="/resources/js/lib/jquery.tokeninput.js" var="jquery_tokeninput_url" />
<script src="${jquery_url}" type="text/javascript"></script>
<script src="${jquery_tokeninput_url}" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
</script>
<util:load-scripts />
...
</head>
but when the page is rendered in the browser the first script tag swallows the two others
<head>
...
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery-1.9.1.min.js">
//These lines are inside the first script tag
<script type="text/javascript" src="/roo-inari/resources/js/lib/jquery.tokeninput.js"/>
<script type="text/javascript">
$.noConflict();
//The tag is closed here
</script>
<link href="/roo-inari/resources/dijit/themes/tundra/tundra.css" type="text/css" rel="stylesheet">
...
Any idea what might be causing this? The project is based on a spring roo generated web mvc scaffold.
I am using Chrome v.25.
The simple solution was to write a comment inside the tag so that it is not closed automatically. Silly me
<script src="${jquery_url}" type="text/javascript"><!-- required for some browsers --></script>