I have a jsp file that includes multiple scripts at the end, such as
<script src="/resources/scripts/app.js"></script>
<script src="/resources/scripts/user.js"></script>
<script src="/resources/scripts/check.js"></script>
However, I'm getting back only enclosing script tags like this:
<script src="/resources/scripts/app.js"/>
<script src="/resources/scripts/user.js"/>
<script src="/resources/scripts/check.js"/>
This causes the browser to try to correct this and ends up only including the first script tag and the other script tags are ignored.
Does anyone know how I can stop spring from converting the script tags to self enclosing?
Related
I've created 'test.js' file in 'resources/js/' and added console.log(first) to it
In the welcome.blade.php I have something like that:
<body>
#vite(['resources/js/test.js'])
<script type='text/javascript'>
console.log(second)
</script>
</body>
What I expect is to execute those scipts in order from top to bottom, however it returns output:
second
first
I guess #vite(['resources/js/test.js']) is executed asynchronously by default, but I want to change it.
Is there any better way to do this than to put all the internal JS in DOMContentLoaded?
Changing type from 'text/javascript' to 'module' helped.
<script type='module'>
console.log(second)
</script>
So I have this template in Thymeleaf:
<script th:src="#{|${#request.requestURI}ace-builds/src-noconflict/ace.js|}" type="text/javascript" charset="utf-8"></script>
What I want it to do is pull the current directory(?) it's in, and attach it to the front of the source. So if this is on the page www.mywebsite.com/mypage, it will generate the source tag /mypage/ace-builds/src-noconflict/ace.js.
From other posts here, it looks like that's what should happen, for me, I get this instead:
/mypage/mypage/ace-builds/src-noconflict/ace.js
I can't for the life of me figure out why this is happening. For those wondering why I'd want to do this in the first place, this program is running out of a WAR on a tomcat 9 server, and so the source tag needs to include the mypage war file name to pull from it, which I can hardcode to make work, and I can't pull static resources with just /ace-builds/src-noconflict/ace.js.
Never mind, I am a fool and missed the advise in one of the threads I was checking. Just needed to use:
<script th:src="#{ace-builds/src-noconflict/ace.js}" type="text/javascript" charset="utf-8"></script>
I was trying regular src before, without thymeleaf, and thought the leading / was necessary. Not the case.
I want to #include a view in my main view. The thing is I've wrote sοme javascript code to interact with that piece of code. Is there a way to include both html and javascript code, since for the second one I have to add <script> tag? I #include this view in many files so I don't want to hardcoded.
Here's three options of things you can do, but there are plenty more:
<html><body>
<!-- A javascript to be added by a particular view-->
<script type="text/javascript">
#yield('in-view-javascript')
</script>
<!-- A javascript only files, no script tag-->
<script type="text/javascript">
#include('views._partials.javascript-1')
#include('views._partials.javascript-2')
#include('views._partials.javascript-3')
</script>
<!-- A javascript code with script tag-->
#include('views._partials.javascript-code')
</body></html>
In views you can
#section('in-view-javascript')
console.log('in-view-javascript');
#stop
Or you can include another javascript file here:
#section('in-view-javascript')
#include('views._partials.javascript')
#stop
Your javascript-1, javascript-2, javascript-3 would be just javascript without the <script> tag.
And javascript-code would be a full javascript code, including the tag.
Example CSS
#wrap{margin:20px}
Code prettify wraps the whole line in .com
<span class="com">#wrap{margin:20px}</span>
Somebody has a similar issue here.
Where someone answers "Are you loading lang-css.js?".
Here's what I'm loading in the footer.
<script src="/js/google-code-prettify/lang-css.js"></script>
<script src="/js/google-code-prettify/prettify.js"></script>
I can see both of them with web inspector. I tried changing the order and loading them from the header. I'm using the latest version.
All help is greatly appreciated :)
Thanks!
The order you link to the javascript files matters. You need to call the base code (prettify.js) first followed by the css specific code (lang-css.js). You can place the script tags either in the head section or at the end of the document... both work but placing at the end of the document will speed up the page load.
<script src="/js/google-code-prettify/prettify.js"></script>
<script src="/js/google-code-prettify/lang-css.js"></script>
You will also need to ensure that you are linking the stylesheet in the head of your document.
<link rel="stylesheet" type="text/css" href="/css/prettify.css">
You also need to add the correct classes your pre tag(s). The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag.
<pre class="prettyprint lang-css linenums">
Finally, make sure you call the "prettyPrint()" function on page load.
<body onload="prettyPrint()">
I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.
There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.
I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").
Here is the page: -link removed by author-
Here is prototype.js: -link removed by author-
I have absolutely no idea what is causing this error and JavaScript isn't my strongest side.
When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:
Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release,
didn't work right and even produced a stack overflow error).
Changed around the order of the scripts, and changed noConflict:
<script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
<script type="text/javascript">
<!--
// more jquery, all $'s replaced with jQuery
-->
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// everything else, including prototype scripts
-->
</script>
And that's it! Now I don't get the "Line 464" error and all scripts work fine.
Thank you #Ken and #Diodeus for leading me to the solution.
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
Surround the code that uses jQuery with
(function ($) {
... // Your code
})(jQuery)
This way it uses local $ which is bound to jQuery and and jQuery only.
Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.
I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.
If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>