I'm using Spring Boot / MVC and learning Thymeleaf.
Let's say i have my scripts on another server.
https://staticserver.com/main.js
I've added the '//staticserver.com' portion to my model as jsLocation.
I want to do something on the lines of:
<script src="${jsLocation}/main.js"></script>
which would render
<script src="//staticserver.com/main.js"></script>
<script th:src="|${jsLocation}/main.js|"></script>
You can include external js file like below :
<script th:src="source to your external JS"></script>
You can refer below thread for more details as your query also relates to model.
Thymeleaf external javascript file shares the module attributes with html file
if your js file in /resources/static/js/
<script th:src="#{/resources/static/js/fileName.js}"> </script>
Related
Is the only way to use an external stylesheet with Elm to use Browser.element and do something like the following?
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="spectre.min.css">
<script src="elm.js"></script>
</head>
<body>
<div id="elm-app-is-loaded-here"></div>
<script>
var app = Elm.Main.init({
node: document.getElementById("elm-app-is-loaded-here")
});
</script>
</body>
</html>
What if I want to use a Browser.Document instead, or even a Browser.Application ?
When searching the internet for Elm and CSS, I only find libraries that write CSS using Elm, or that replace CSS with Elm code. But what if I already have a CSS stylesheet that I want to use. I'd like to use Spectre CSS. It's just a single CSS file "spectre.min.css". Can I use that with Elm in a simple way?
If you want to control the HTML document (i.e. the head section) where your app is running in then you have to switch from using elm-reactor to embedding the compiled Elm app like described in the Elm guide.
I have created a little boilerplate setup that allows me to control the "index.html" and have hot code reloading via a little script (no other dependencies).
I have been adding the following files in my cshtml page.
<script src="http://code.highcharts.com/maps/highmaps.js" )"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/maps/modules/drilldown.js"></script>
<script src="~/Content/js/balochistan.geojson"></script>
And the code for higmaps is present on the same page with script tag. Everything is working fine but hte map is not displaying and giving error for geojson file not being loaded.
http://localhost:9090/Content/js/balochistan.geojson net::ERR_ABORTED 404 (Not Found)
Can anyone please helpthat how a geojson file can be loaded properly and how to give static path to it correctly?
the file ends with .geojson can not be loaded like that - as script - because is a json file
Add this file is a set of json data - you need to loaded them on highcharts either with ajax load, either add them as variable at the beginning and connected to the chart.
Resolved:
The problem resolved by doing few steps like:
adding script tags in proper order.
secondly highmaps.js and highcharts.js file conflict with each other when used on the same page.
In order to resolve this issue you have to add
<script src="http://code.highcharts.com/highcharts-more.js"></script>
script tag in addition to highcharts.js and also replace the highmaps.js with:
<script src="//code.highcharts.com/maps/modules/map.js"></script>
like this:
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//code.highcharts.com/maps/modules/map.js"></script>
This resolved my problem and map is showing now.
I have tried the following in my blade template:
#section('styles')
<link href="{{asset('assets/css/app.css')}}" />
#stop
In the master blade template I have included the following:
<link href=asset('/assets/template/css//invoiceTemplate.css')rel="stylesheet" type="text/css"/>
I you want to include a CSS / JS file for a specific blade use stacks (see here)
from the documentation:
#push('scripts')
<script src="/example.js"></script>
#endpush
You may push to a stack as many times as needed. To render the complete stack contents, pass the name of the stack to the #stack directive:
<head>
<!-- Head Contents -->
#stack('scripts')
</head>
you can also place them at the bottom of your blade (where a lot of people call thier JS files these days)
You need to add #yield('styles') to your master blade template.
Yes it is. Write this code to your master template
#yield('page-styles')
and add this also to the specific blade file where you want to add a specific CSS file.
#section('page-styles')
//Your specific css file
#stop
Make sure that the parameter inside the #section and #yield are the same.
In this case, I've used 'page-styles'.
I am using meteor with blaze.
Currently in the rendered templates, the scripts files are included as
src="/packages/underscore.js?46eaedbdeb6e71c82af1b16f51c7da4127d6f285"
src="/packages/meteor.js?9730f4ff059088b3f7f14c0672d155218a1802d4"
Is there anyway to change that to include the fully qualified domain name, such as: http://exmaple.com//packages/underscore.js?46eaedbdeb6e71c82af1b16f51c7da4127d6f285
any help will be appreciated!
Yes, I have seen this done. You can make a package and include templating in your api.use. Then, you create an HTML file.
Package.onUse(function (api) {
// ...
api.use('templating', 'client');
api.addFiles('client.html', 'client');
});
In the html file, you can include a <head> tag with a <script> to your resource
<head>
<script src="http://someresource.com"></script>
</head>
For reference, check out the repo for mrgalaxy:stripe, which is required to include a resource linked from Stripe's site.
I have an IIS web site. This web site contains other web sites so the structure is like this.
\
MainWebSite\
Scripts\
CSS\
App1\
Scripts\
CSS\
App2\
Scripts\
CSS\
All sites are ASP.NET MVC web applications.
In the MasterPage of App1, I reference the script files like this:
<script type="text/javascript" src="../../Scripts/jquery-ui-1.8.custom.min.js">
</script>
The problem is that it now tries to find the file at http:\server\MainWebSite\Scripts....
How can I work around that? Should I put all my scripts and CSS files into the root directory, is that a preferred solution?
In ASP.NET there is a great function that is part of the Page Object:
ResolveUrl(String)
This is used by passing in a relative string, but the best part is you can use the ~ to symbolize the root of your website:
<script type="text/javascript" src='<%=ResolveURL("~/PATH_FROM_ROOT/Scripts/jquery-ui-1.8.custom.min.js")%>'></script>
[Note the single quotes.]
Try this
<script type="text/javascript" src="~/../Scripts/jquery-ui-1.8.custom.min.js" runat="server"></script>
In the above markup, I'm assuming that your script files are in MainWebSite\Scripts\
"~" brings your reletive reference from your application root directory. The benefit is that if you shift your master page file from MainWebSite\App1\ to MainWebSite\App1\MasterPages\ you will not have to change all the relatively referenced urls in your master page.
The best solution is to use absolute URLs for CSS and JavaScript. Using an appending global variable you can also use it on your development system, too.