I need to embed javascript directly into html page generated by Thymeleaf
Something like:
<script th:include="../static/assets/generated/scripts.js"></script>
But this simple usage leads to SAXParseException...
Is there any easy way to switch off parsing of the th:included
content? Or any other way how to embed content of resource int the result page?
I don't think that is possible out of the box. You could probably write an extension that can do it. Or maybe there is an existing one, but I couldn't find one right now.
Does it have to to be a separate JavaScript file? Can't you put your JavaScript code into a fragment and include it like any other fragment?
NB: Including JavaScript into your HTML file like that is usually bad web design und may be a sign that you have bigger problems and you haven't structured your code well. Why do you think you need to do that? Why can't you refer to an external script file?
Thats not a Thymeleaf-Thing. It's classic html:
<script src="/assets/generated/scripts.js"></script>
In version 3.0, you can do it in this way
<script th:src="#{/webjars/jquery/dist/jquery.min.js}"></script>
Related
Is there that I can continue my HTML code in another page, while being in the main code?
For example, in HTML you can make 1000 extra pages of JS and just use something like
<script src="js/example.js"></script>
to make the HTML page look cleaner, and less obstructed by the extra JS code,
is there a way I can do that to continue adding more HTML elements to another page while using the same stuff from my main page?
im writing a lot of HTML and don't want to make the main page too messy
If you rename your file to filename.php, you can use an include function. The code should look like this:
<?php
include 'header.html';
?>
You should probably put the files on the body. Just a warning: PHP is hard to learn at first, especially because you have to host a server and do many other things. To learn more about the subject, visit these sites:
W3schools PHP tutorial
XXAMP
Use jQuery .load()
$('#idofDiv').load('file.html');
You could consider using .php and using php include.
I am trying to display javascript code that is linked to the html page using a script tag as text on the same html page (and also syntax highlighted) as a tool for users to see the underlying javascript code.
Eventually I also want to display the html and css file contents as a learning tool so users can see all the components in a user-friendly manner on the same page (at the bottom in a tab control).
The other requirement is that the files are local and not stored on a web server. And last but not least I would like to keep this as simple as possible (no jQuery, no additional javascript if possible).
I have tried a couple of approaches without much success:
using HTML5 import and AJAX, encountered CORS and local file access
errors
embed HTML5 tag, encountered prompt to execute javascript, not good
iframe tag , encountered prompt to execute javascript, not good
I am looking for simple and working solutions, I have searched quite a bit, but it is difficult to find something where you want to "convert" javascript into plain text and display it on an HTML page.
Extracting the src attribute from the script element and loading the file content via a separate HTTP call is probably the most feasible solution.
An example for the lodash source code, using jQuery:
var src = $('#lodash').attr('src');
$.get(src, undefined, function(data) {
$('#content').text(data);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id='lodash' src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.2/lodash.js'></script>
<pre id='content'></pre>
I'm trying to refactor parts of our front-end at the moment, using Intellij. We have a lot of javascript that is within our JSPs. I'd like to be able to extract from the JSP into a .js fil and replace it with a script tag referencing that file. I know how to extract to an 'includes' file, but I'd like a way of extracting and replacing the code with a proper script tag.
Does anyone know of a plugin that can accomplish this quickly and easily? (Or a pre-existing function in Intellij that I'm unaware of)
Please vote for this issue (it's 5 years old and had zero votes).
just create one file with .js extension copy and paste your js codes with their function names. then include that file in your jsp project header section.
eg:
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
thats all..
One thing I don't like about writing javascript-based applications is that you have to put a lot of HTML code in Javascript to render new content. Is there a way I can split this up? I find it messy and bloated to combine them in the same javascript code.
You should check out jQuery's Template plugin, it might be helpful depending on what your creating.
May be I cannot understand the question but you can put javascript in the separate file:
<script type="text/javascript" src="some.js"></script>
And you can use jQuery which gives you another abstraction level under HTML:
$('div.button').animate({left: 650, height: 38}, 'slow');
Have you tried a client side template system like EJS ?
I often use a hidden div with prepared HTML which serves like a sample. Then in JS I just take a copy of this HTML-piece and insert the dynamic values.
IMHO, it's convenient because all samples are stored together inside HTML file, and JS code doesn't have to know much about it's structure.
I want a javascript code which will go through all the html file in my root folder and sub-folders and gets the content which are within a particular tag,
eg:
<div id="content">
!!this content!!
</div>
It should check for a comment at the top of html and only get the content if it exist.
<!--Allowed-->
It should only get if this is there. First of all is this possible? I wish jquery could do this!
Update:
Got enlightened that javascript is for client-side! So One last question, how does you use php to get the content that is within the a particular tag?
<div id="content">
!!this content!!
</div>
At first you have to get all the folders that are in the folder (on the server). That's not possible with JavaScript alone. You have to write a PHP (or any other web-language supported on your webspace/server) which gives you the filename-list.
Then you can load each file with jQuery's ajax-functions and test for your comment, etc.
Javascript has no access to the file system. You need a server side language to do that.
No it is not possible with javascript. It is a client side scripting language. You need a serverside scripting language like PHP. Check out http://php.net/ look up the fopen(), include(), and dir() functions.
If you know the exact content of the comment you're searching for, try this:
if(document.documentElement.innerHTML.indexOf('<!--Comment-->') > 0){
//voila!
}
If not, you can use regular expressions to parse the text. I'm not an expert in regex, so i can't say i can help you there.
Of course, this will only work on a per-page basis, it won't browse your file system. For that you should have a server-side language.
Hope this helps