We Keep Coding

Translation with Thymeleaf in JavaScript

In my HTML page I'm loading my translation with Thymeleaf like that:
<button type="button" ng-click="$ctrl.resetData()" th:text="#{general.reset}">Reset</button>
Is it possible to translate text wich is hard coded in my JavaScript code?
'Loading Data...' should be translated with th:text="#{general.loadingData}" <- but this is the way I would translate it im my HTML page, this doesn't work for JavaScript Code. All the translations are in a messeges_en.properties file.
How can I translate the text in JavaScript?
function(request: any) {
asLoading.show('Loading Data...');
return request || $q.when(request);
}

You should use javascript Intl API.
FormatJs is a modular collection of JavaScript libraries for internationalization that are focused on formatting numbers, dates, and strings for displaying to people.
It has support for ICU message format (International Components for Unicode) which is also well supported in java as well.
So you can expose your translations in ICU message format and consume them from both java and javascript.
In general, it is better to treat javascript and java code as separate applications as opposed to treating javascript as something that is tacked on top of a java template language like thymeleaf.

How to duplicate HTML templates with different contents (text, picture)

I am making a website where I am going to use the same template for a lot of the same pages, only the text and picture needs to be changed. The only thing that is different from the different pages are the different sports, so I have a jumbotron picture that I want to change, as well as the text about the sport itself. I am wondering if there is any smart ways of doing this instead of making a .html file for every page?

Some file-hosting services allow for a base HTML template, but usually, you will need to create a HTML file for every page on a site. If you use Adobe Muse, for example, it will output the code with the least amount of white-space and with the most efficient size possible. But it will still output multiple HTML pages.
TLDR: You will need to make a HTML document for each page on your site, usually.

Yes, there is a way.
Don't use css in that page itself. Create another page containing only css codes and name it as "css.css" and place the file in same folder in which the html file is present.
Then use external link for css. Insert the code given below in the head part of the html document.
<link rel="stylesheet" type="text/css" href="css.css">

consider to use some templates instead of using plain html.
if you are doing server-side rendering then there are a lot of frameworks you can use for each language.Just google popular framework for the backend language you are using.
For frontend side you can use some Single page application framework for example angular, react, vue or something like handlebars. check them and pick one

javascript alternative to php include

What is the javascript equivalent to PHP's include(file.html) specifically without needing to place it in a div like $("#div").load("file.html");? I'd like to get away from using PHP and find out how to do this in Javascript without using a div placeholder and just loading it into webcode to use with things like bootstrap modals or buttons.

in this case, php acts as a preprocessor - it sees that include line, fetches the html and then drops the contents of the file in-place. Javascript can't really do that in the same way because it only lives on the browser.
You have some options
Do you an http request to a resource that will return the html, and then render that html string to a location (html id tag of some sort)
Use a different preprocessor. There's loads and it depends on what runtime you're on. NodeJS? Ruby? Go? Java? Python? All of them use something different - but they'll give you a one-to-one alternative for the directives you want to use inside your html files. Here's a great article that gives an overview of a number of different options: https://css-tricks.com/the-simplest-ways-to-handle-html-includes/

naturally, when you want to load a resource from js (when it is possible and do not try to access a resource that triggers a cross domain origin problem) you use AJAX
a simple implementation using jQuery:
$.get('file.html', function(file) {
console.dir(file);
});

Executing groovy statements in JavaScript sources in Grails

There are essentially 2 places to define JavaScript functions in Grails, directly in a element on the GSP, and within a separate javascript source file under /web-app/js (for example, application.js). We have defined a commonly reused javascript function within application.js, but we also need to be able to generate parts of the function dynamically using groovy code. Unfortunately, ${some groovy code} does not appear to be processed within separate javascript source files.
Is the only way to do this by defining the javascript function within a script tag on a GSP page, or is there a more general solution? Obviously we could define the javascript function in a script tag within a template GSP file which would be reused, but there is a lot of push to keep our javascript functions defined all together in one place (i.e. the external javascript source file). This has performance benefits as well (the javascript source files are usually just downloaded once by each client's browser, instead of reloading the same javascript functions within the source of every html page they visit). I have toyed around with the idea of breaking the function up into static and dynamic pieces, putting the static ones in the external source and putting the dynamic ones in the template GSP, then gluing them together, but this seems like an unnecessary hack.
Any ideas?
(edit: It may sound like the idea of dynamically generating parts of a JavaScript function, which is then downloaded once and used over and over again by the client, would be a bad idea. However, the piece which is "dynamic" only changes perhaps once a week or month, and then only very slightly. Mostly we just want this piece generated off the database, even if only once, instead of hard coded.)

An easy solution to keep your JavaScript unobtrusive is to create a JavaScriptController and map its actions "/js/*" by adding this to your UrlMappings.groovy file:
"/js/$action"{
controller = "javascript"
}
then just create an action for each dynamic JS file you want, include in in your layout <HEAD>, and presto, you've got a JS file that you can insert Grails snippets into! :)
Note: I've found that there's currently a bug in Grails that doesn't map file extensions to content-types properly, so you'll need to include <%# page contentType="text/javascript; UTF-8" %> at the top of your view files.

This is a great solution. I would like to offer a suggestion to use somthing other then a mapping of "/js/$action" because this is no longer going to allow you to access you javascript files in /web-app/js/. All your javascript files would have to be moved to a the directory your controller would point to.
I would use something like
"/dynjs/$action"
This way you still can point to files in the /web-app/js/ files with out conflict and enjoy the benifits of gsp tags in javascript files
Please correct me if I'm wrong.

Or this... have a tag/service/dynamic method that lets tags write out their JS+CSS+whatever else, to a "cache" which is used to build the JS+CSS resources by a different controller.
Full concept here: [http://www.anyware.co.uk/2005/2009/01/19/an-idea-to-give-grails-tags-esp/][1]

If you want to use models created by the controller (that rendered HTML page which reference the Javascript in which you intend to use groovy code) in the Javascript code, then you can use this technique:
This technique does not need to change URL mappings and does not require you to create extra controller.
In your view GSP add javascript as follows:
<script type="text/javascript">
<g:render template="/javascript/yourJavascriptFile"/>
</script>
In views folder create a "javascript" folder. And create a file named:
_yourJavascriptFile.gsp
You can not only use all the GSP code in your _yourJavascriptFile.gsp file, but you can also use all the models created in your controller (that is rendering the view).
NOTE: There is nothing special about javascript folder. You can name it anything you want OR use an existing view folder. This is just a matter of organizing and identifying your HTML spitting GSP from Javascript spitting GSPs. Alternatively, you can use some naming conventions like: _something.js.gsp etc.

Name your scripts like this
/wherever/the/js/files/are/thescript.js.gsp
The gsp code inside will be rendered correctly by grails. This works, but I have no idea if it's considered a Good Idea or not.

There is another way - pass in the generated code into a function that expects closures. Those closures is generated by the program of course. The generated code is of course inlined/script-tagged in the gsp page.
it may or may not work depending on the nature of the code being generated. But i suspect it will work, and if it doesnt, minor tweaking to the coding style of your javascript will definitely make it work. Though, if these 'generated' code doesnt change much, this quite overkill imo.

Does anyone know of a good article for creating MVC based components/ extension methods?

I've a couple of extension methods I've been developing for a couple of projects, they currently rely heavily on some AJAX to make bits and pieces work. The problem is that they require copying and pasting JavaScript files to the project you want to use it in.
As this JavaScript file only needs to be used once (all instances of the rendered control use the same file) I'd like to do something like add the script element to the headers collection of the page it's used on via a web-resource (embedding the file as a resource in the assembly). In Web-forms this wasn't a problem - you could add a script block to the headers with a specific ID and simply check for it on page load.
What's the MVC equivalent - is there an equivalent?
I'd like a solution that doesn't require the consumer to copy and paste/ add lines to pages or config...any thoughts?

Stephen Walther has some very good articles on MVC, including Html Helpers.
http://weblogs.asp.net/stephenwalther.
A great place to see Html Helpler code is the MVC source code available at
Codeplex.
There is a tutorial at www.asp.net/mvc on Html Helpers

Here ya go, this guy wrote a custom FormlessScriptManager that will let you register scripts even when there is no <form runat="server"> in your page.
http://developmentalmadness.blogspot.com/2008/04/abstracting-systemwebuiscriptmanager.html