I see this question with hundreds of answers, none of which have worked for me yet. I am building a simple asset tracker. My controller has two functions
#Controller
public class GpsController {
private double bestLat = 0.0;
private double bestLon = 0.0;
private double divisor = 10000000.0;
#GetMapping("/map")
public String map(Model model) {
model.addAttribute("latitude", bestLat);
model.addAttribute("longitude", bestLon);
return "map";
}
#PostMapping("/addlocation")
public void addLocation(#RequestBody GpsMessage message) {
if(message.getGpsTimestamp() == 0L) {
bestLat = message.getTriLat();
bestLon = message.getTriLon();
} else {
bestLat = message.getGpsLat() / divisor;
bestLon = message.getGpsLon() / divisor;
}
DbConnection.writeLocation(message);
}
}
I'm using Thymeleaf in /map to pass the latitude and longitude into the JS for the Google Maps API. The program works just fine, but I get these errors from Thymeleaf. I could ignore it but I prefer to find what is causing it.
2022-06-13 05:18:14.177 ERROR 28188 --- [nio-8080-exec-1] org.thymeleaf.TemplateEngine : [THYMELEAF][http-nio-8080-exec-1] Exception processing template "addlocation": Error resolving template [addlocation], template might not exist or might not be accessible by any of the configured Template Resolvers
org.thymeleaf.exceptions.TemplateInputException: Error resolving template [addlocation], template might not exist or might not be accessible by any of the configured Template Resolvers
at org.thymeleaf.engine.TemplateManager.resolveTemplate(TemplateManager.java:869) ~[thymeleaf-3.0.15.RELEASE.jar:3.0.15.RELEASE]
at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:607) ~[thymeleaf-3.0.15.RELEASE.jar:3.0.15.RELEASE]*
What confuses me is that it is complaining about the addLocation method when it is not using thymeleaf.
In resources, I have index.html, index.js, and style.css inside the static folder and the map.html file under templates.
map.html looks like this if it matters...
<!DOCTYPE html>
<!--
#license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Add Map</title>
<meta http-equiv="refresh" content="10">
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script th:inline="javascript">
var myLat = /*[[${latitude}]]*/;
var myLon = /*[[${longitude}]]*/;
</script>
</head>
<body>
<!--The div element for the map -->
<div id="map"></div>
<script
src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
Related
I'm a student working on an art project in which I select one of 500 created images to show up on a webpage. I'm very new to coding and only really understand html and css, with very small amount of knowledge in JavaScript. I'm stuck in getting the images to show up, when I inspect it gives me an error saying: Failed to load resource: net::ERR_FILE_NOT_FOUND $selected_image}< I'm not really sure what to do with this, I hope someone would like to help me with this.
Thankyou :)
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" media="screen" href="css/main.css">
<!-- <link rel="JavaScript" href="script.js"> -->
<meta charset='utf-8'>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
<title>Mother</title>
<body>
<div id="container">
<div id="inner_container">
<img id="image_shower"/>
</div>
<div id="button_container">
<button onclick="get_random_image()"></button>
</div>
</div>
<script>
image_array = [
'Lilith10.png',
'Lilith11.png',
'Lilith12.png',
'Lilith13.png',
'Lilith14.png']
function get_random_image(){
random_index = Math.floor(Math.random() * image_array.lenght);
selected_image = image_array[random_index]
document.getElementById('image_shower').src = './images/$selected_image}'}
</script>
</body>
</html>
Javascript template strings are written with oblique quotes, and variables inside it must have brackets around them (you only had the closing one):
document.getElementById('image_shower').src = `./images/${selected_image}`;
EDIT
Even if in the present case this won't stop your code from working (unless you activate "strict mode"), I also recommend that you use the appropriate keywords to declare your variables.
const image_array = [
'Lilith10.png',
'Lilith11.png',
'Lilith12.png',
'Lilith13.png',
'Lilith14.png'
];
function get_random_image() {
const random_index = Math.floor(Math.random() * image_array.length);
const selected_image = image_array[random_index];
document.getElementById('image_shower').src = `./images/${selected_image}`;
}
I have several xsl files that need to include common xsl file. So instead of including the javascript files in each one of them I would like to create a Common.xsl that will include the java script files and all xsl files will include it.
The question is how to do that?
I tried some suggested methods using including javascript file but with no success, in the browser console I get errors:
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: $ is not defined
It looks like the jquery was not included.
I tried to do something like this:
<"script type="text/javascript" src="common.js" />
or
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "../jquery/jquery-1.9.1.min.js";
document.getElementsByTagName('head')[0].appendChild(script)
})();
Edit:
I answered my question see answer below.
<xsl:element name="script">
<xsl:attribute name="src">common.js</xsl:attribute>
/* common code */
</xsl:element>
That should do the trick
I solved my issue by the following code using xsl instead of javascript files:
I have created a Common.xsl file that includes all my common javascript files.
Common.xsl
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="Common">
<link rel="stylesheet" href="SiteRef_getCSS?CSSName=Site/site.css" type="text/css"/>
<script type="text/javascript" src="SiteRef_getJS?JSName=jquery/jquery-1.11.1.min.js"/>
<script type="text/javascript" src="SiteRef_getJS?JSName=Site/common.js"/>
<script type="text/javascript" src="SiteRef_getJS?JSName=Site/MessagesConstants.js"/>
<script type="text/javascript" src="SiteRef_getJS?JSName=Site/win_functions.js"/>
<script type="text/javascript" src="SiteRef_getJS?JSName=Site/resizeFunctions.js"/>
</xsl:template>
On every xsl file that need those includes I added the following lines:
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:include href="common/Common.xsl"/> <!-- Here I include the Common.xsl -->
<xsl:template match="/Reflection">
<xsl:text disable-output-escaping='yes'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "SiteRef_getCSS?CSSName=Site/xhtml1-transitional.dtd"></xsl:text>
<html>
<head>
<title><xsl:value-of select="Localization/ViewAbout"/></title>
<xsl:call-template name="Common"/> <!-- Here I apply the tamplate of the common includes -->
<body>
.
.
.
</body>
</xsl:template>
</xsl:transform>
In order resolve the include URI (see xsl:include) in my java application server I had to implement the URIResolver resolve() function:
public class XslURIResolver implements URIResolver
{
private static final String XSL_PATH = System.getProperty("user.dir") + File.separatorChar + INetlayerConstants.c_UI_PATH + INetlayerConstants.c_XSL_PATH;
#Override
public Source resolve(String href, String base) throws TransformerException
{
DOMSource xslDomSource;
try
{
DocumentBuilderFactory dFactory = DocumentBuilderFactory.newInstance();
dFactory.setNamespaceAware(true);
DocumentBuilder dBuilder = dFactory.newDocumentBuilder();
InputStream in = new FileInputStream(XSL_PATH + href);
InputSource xslInputSource = new InputSource(in);
Document xslDoc = dBuilder.parse(xslInputSource);
xslDomSource = new DOMSource(xslDoc);
xslDomSource.setSystemId(XSL_PATH + href);
return xslDomSource;
}
catch (ParserConfigurationException e)
{
e.printStackTrace();
}
catch (SAXException e)
{
e.printStackTrace();
}
catch (IOException e)
{
e.printStackTrace();
}
return null;
}
}
And then before transformation I set the URIResolver:
TransformerFactory tFactory = TransformerFactory.newInstance();
tFactory.setURIResolver(new XslURIResolver());
That's about it, hope it helps someone...
I am using Arcgis Javascript API. API is built on dojo toolkit. So I need to use dojo features in API. I am preparing dojo config file as following.
var pathRegex = new RegExp("/\/[^\/]+$/");
var locationPath = location.pathname.replace(pathRegex, '');
var dojoConfig = {
async: true,
parseOnLoad: false,
baseUrl:"js/",
packages: [
{
name: "application",
location: locationPath + '/js/application'
}]
};
I created a bootstrapper.js like following.
require(["application/main", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
And index.html file is like this.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Arcgis Javacsript API Samples</title>
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css">
</head>
<body class="claro">
<div id="map"></div>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/djConfig.js"></script>
<script src="js/application/bootstrapper.js"></script>
</body>
</html>
My application is hosted on IIS and has addres like this htp://domain/Demo/Sample1/index.html
when I run application, this code giving error like following.
"NetworkError: 404 Not Found - http://js.arcgis.com/3.6/js/dojo/application/main.js"
If I set bootstrapper.js file as following, problem is solwing.
require(["js/application/main.js", "dojo/domReady!"], function (application) {
console.log("bootstrapper is running");
application.Run();
})
Try to change your script order in index.html file. Your config settings should load before CDN.
<div id="map"></div>
<script src="js/application/djConfig.js"></script>
<script src="//js.arcgis.com/3.6/"></script>
<script src="js/application/bootstrapper.js"></script>
</body>
I'm trying to run this grid extention in DW CS5. I'm a front end person so debugging other people's code isn't my thing. So when I try set the grid precepts I get this error:
while executing inspectSection in dmx960 grid, js error occurred.
Here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Barefoot Development Group</title>
<link href="CSS/Style.css" rel="stylesheet" type="text/css">
<link href="CSS/text.css" rel="stylesheet" type="text/css">
<link href="CSS/reset.css" rel="stylesheet" type="text/css">
</head>
<body>
<!------start container------->
<div id = "container" class ="container_16"></div>
<div id = "social_search" class = "grid_16"></div>
<div id = "social_links" class = "grid_1 alpha"></div>
<!------Main container-------->
<!------Header start---------->
<!------Social Links---------->
<!-------End social links------>
<!----start Social icons -------->
<!----end social icons----->
</body>
</html>
I tried deleting the cache in Config folder and reinstalling the extension. Didn't work. I checked the log files and found this:
JS Error: theElem.getAttribute is not a function filename:
C:\Users\cvr\AppData\Roaming\Adobe\Dreamweaver
CS5\en_US\Configuration\Shared\DMXzone\960 Grid\dmx960grid_lib.js
lineno: 598
So I went to the JS file and here is what I found in this expression block:
function getGridClassNum(theElem) {
if (!theElem) return 0;
var cls = theElem.getAttribute("class");
if (!cls) return 0;
if (cls == 'clearfix') {
//Try to read the parent
var parent = getGridElement(theElem.parentNode);
if (parent && parent.nodeType === Node.ELEMENT_NODE) {
return getGridClassNum(parent);
}
} else {
var numMatch = cls.match(new RegExp("\\b(grid|container)_(\\d+)\\b"));
if (numMatch && numMatch.length > 1) {
return parseFloat(numMatch[2]);
// //decrease with prefix and suffix
// - getGridClassNameNum(theElem, 'prefix')
// - getGridClassNameNum(theElem, 'suffix');
}
}
return 0;
}
I don't see anything particularly amiss here. But perhaps a more expert debugger can tell me if there is something going on here. Here is what confuses me - I was looking for the function inspectSection but I couldn't find it. I'm left scratching my head here.
Could this be a problem of including the script directly into the html doc?
Thanks!
We're currently kicking off our first Backbone.js project here at work. In fact it's our first major JavaScript project apart from the odd jQuery stuff.
Anyway, we struggle with the architecture for our stuff. What is the best way to sort stuff out?
We've started with having everything in separate files broken up in folders for; views, models, collections and routers and then we include everything in our index.html. The issue, though, is that this leaves us with having to check for the document ready event in every file. Is this the best way to do it?
Here's an example:
This is the file called PageModel, the first line seems wrong...
$(function(){
app.models.Page = Backbone.Model.extend({
//stuff
});
});
Then in our index.html we have:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var app = app || {};
app.models = app.models || {};
app.collections = app.collections || {};
app.views = app.views || {};
app.routers = app.collections || {};
app.templates = app.templates || {};
app.models.griditems = app.models.griditems || {};
app.views.griditems = app.views.griditems || {};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/libs/json2.js" type="text/javascript"></script>
<script src="assets/js/libs/underscore-1.1.7.min.js" type="text/javascript"></script>
<script src="assets/js/libs/backbone-0.5.3.min.js" type="text/javascript"></script>
<script src="assets/js/models/GridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/GalleryGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/NewsGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/models/VideoGridItemModel.js" type="text/javascript"></script>
<script src="assets/js/collections/GridCollection.js" type="text/javascript"></script>
<script src="assets/js/templates/Submenu.js" type="text/javascript"></script>
<script src="assets/js/templates/GalleryGridItemTemplate.js" type="text/javascript"></script>
<script src="assets/js/views/GridView.js" type="text/javascript"></script>
<script src="assets/js/views/GridItemView.js" type="text/javascript"></script>
<script src="assets/js/views/GalleryGridItemView.js" type="text/javascript"></script>
<script src="assets/js/views/VideoGridItemView.js" type="text/javascript"></script>
<script src="assets/js/routers/Router.js" type="text/javascript"></script>
<script src="assets/js/Application.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
This is structure we use in our Backbone projects
<!-- Libs Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery-1.5.2.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.validate.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.maskedinput-1.3.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.mousewheel.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/jquery.scrollpane.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/fileuploader.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/modernizr.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/json2.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/underscore-min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Content/static/js/libs/backbone-min.js")"></script>
<!-- Libs Section -->
<!-- Core Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/config.js")"></script> <!-- Global configs -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/core.js")"></script> <!-- Core methods for easier working with views, models and collections + additional useful utils -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/app.js")"></script> <!-- Application object inherites core.js as prototype -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/renisans.js")"></script> <!-- Project Object. Creates Namespace and Extends it with project specific methods -->
<!-- Core Section -->
<!-- Routers Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/routers/workspace.js")"></script>
<!-- Routers Section -->
<!-- Models Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/models/profile.js")"></script>
...
<!-- Models Section -->
<!-- Collections Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/collections/messages.js")"></script>
...
<!-- Collections Section -->
<!-- Views Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/views/workspace.js")"></script>
...
<!-- Views Section -->
<!-- Localization Section -->
<script type="text/javascript" src="#Url.Content("~/Content/static/js/localizations/ru_RU.js")"></script>
<!-- Localization Section -->
<!-- Init Section -->
<script type="text/javascript">
$(function() {
Rens.container = $('.l-wrapper'); // Some parameters
Rens.init({
Localization: LocalizationStrings || {}, // Object with localization strings
Profile: {
// Bootstraping initial data to Profile model
}
});
});
</script>
<!-- Init Section -->
content of app.js
var App = function() {
this.Views = {};
this.Routers = {};
this.Models = {};
this.Collections = {};
this.User = {};
this.router = null;
this.view = null;
this.baseLocation = null;
this.beforeInit = function() {};
this.afterInit = function() {};
this.init = function(initData) {
if (typeof(this.beforeInit) === 'function') {
this.beforeInit.apply(this, arguments);
}
if (this.Views.Workspace) {
this.view = new this.Views.Workspace();
}
this.baseLocation = window.location.href.replace(/[?#].*/, '') == Config.web.host;
if (this.Routers.Workspace) {
this.router = new this.Routers.Workspace(initData);
}
this.view && this.view.setListeners && this.view.setListeners();
Backbone.history.start();
if (typeof(this.afterInit) === 'function') {
this.afterInit.apply(this, arguments);
}
}.bind(this);
};
App.prototype = Core;
and content of renisans.js
var Rens = new App();
$.extend(Rens, {
container: null,
Error: function(data) {
// Handling error
},
Localization: function(dictionary) {
return {
get: function(name) {
var argumentsList = Array.prototype.slice.call(arguments),
strings = argumentsList.slice(1),
text = this[name];
if (text && strings.length) {
$(strings).each(function(i, string) {
var reg = new RegExp('\\$' + i, 'go');
text = text.replace(reg, string);
});
}
return text || 'SLB.Localization.' + name + ' not found!';
}.bind(dictionary)
}
},
formatDate: function(rawDate) {
var timestamp = /\d+/.exec(rawDate)[0],
date = Rens.DateUTC(timestamp),
months = Rens.Localization.get('months');
return {
date: date,
fullDate: [date.dd, months[date.mm], date.hh].join(' '),
shortDate: [date.dd, date.MM, date.hh].join('.')
};
},
beforeInit: function(initData) {
this.Localization = new this.Localization(initData.Localization);
}
});
also simplified content of models/profile.js
Rens.Models.Profile = Backbone.Model.extend({
...
});
If you are creating an application of this shape, i strongly suggest to use dynamic loading of your assets, like javascript and more.
you have several options for this:
Require.js
LABjs
...
i myself have no experience with LABjs, but i've been using Require.js in smaller projects for myself. But have yet to use it in a major project.
the advantages of such a system:
you can work with dependancies, and your models or views will only be loaded when they are requested by another part of your code. not all at the beginning.
require.js also provides features for minifying and agregating your code based on the dependancies you specified.
require.js has a few small plugins for loading in text files (if you use a templating system this could be useful, or a plugin to define the order in which files need to be loaded.
and require.js also has a special version for working together with jquery and its modules. (but you are not required to use this one, you can load in jquery trough manually as well)
you will need to wrap your models / views / ... in modules so require.js can load them dynamically. I asked about this here on stack overflow last week... you can find the info on how to do that here
I suggest you read the 'getting started with require.js' and see if you feel like using it.
because working with all models / views / ... in separate files is quite handy in development fase, but is defenately not recommended when going into production. the fewer requests have to be sent by the browser to the server the better.