I want to include google map places service into my app, and in my index.html file I have an error:
Uncaught SyntaxError: Unexpected token '<' (at js?key=${process.env.GOOGLE_MAP_API_KEY}&libraries=places&callback=initAutocomplete`}:1:1).
You can see that I'm using backtick to add the google map API key into the src url. But how can I have an error about < here?
The index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta."description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
crossorigin="anonymous"
/>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script async
src={`https://maps.googleapis.com/maps/api/js?key=${process.env.GOOGLE_MAP_API_KEY}&libraries=places&callback=initAutocomplete`}>
</script>
<script>
let autocomplete;
function initAutoComplete() {
autocomplete = new google.maps.places.Autocomplete(
document.getElementById('autocomplete'),
{
types: ['geocode'],
componentRestrictions: {'country': ['NL', 'CN', 'US']},
fields: ['place_id', 'geometry', 'name'],
},
)
}
</script>
<div id="root"></div>
</body>
</html>
Related
Using Vite 3 with vue/typescript/vuetify, I am running lighthouse on Chrome dev tools, and I get these errors. The vite preview html looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/favicon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#6E2D91">
<meta name="description" content="Sample Web App">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script type="module" crossorigin src="/assets/index.79acedba.js"></script>
<link rel="stylesheet" href="/assets/index.4a576584.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
The original html file was
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" href="/favicon.png">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#6E2D91">
<meta name="description" content="Sample Web App">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
How can I fix these?
In my AspNetCore 3.1 web application, I added required js and css references to my project for Bootstrap notification. But I'm gettin this error when I call the notify function.
Here is my css references:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title></title>
<link href="~/css/styles.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/css/bootstrap-notify.min.css" />
</head>
Here is my js references
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.18/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-notify/0.2.0/js/bootstrap-notify.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
<script src="~/js/scripts.js"></script>
Bootstrap notify call:
$.notify({
title: 'Hello World',
message: 'Hello :)',
type: 'success'
});
I am trying to integrate jQuery ClockPicker into my react app, but it won't work.
I have possibly tried the all possible ways without success. jQuery itself works well, but the ClockPicker doesn't.
It gives me an error:
Uncaught TypeError: clockpicker.clockpicker is not a function
These are my HTML and CDN links:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content="The Brring Web Client">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css" integrity="sha256-lBtf6tZ+SwE/sNMR7JFtCyD44snM3H2FrkB/W400cJA=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-87DrmpqHRiY8hPLIr7ByqhPIywuSsjuQAfMXAE0sMUpY3BM7nXjf+mLIUSvhDArs" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/jquery-clockpicker.min.js"></script>
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="js/app.js"></script>
</body>
</html>
This is the function where I initialize the ClockPicker:
import * as $ from "jquery";
class example {
... other staff
initializeTimePicker() {
jQuery(function($) {
let clockpicker = $(".clockpicker");
clockpicker.clockpicker();
});
}
}
export default new CallUtil();
And finally, I call this function in another component's componentDidMount lifecycle:
import CallUtil from 'some_folder'
componentDidMount(): void {
CallUtil.initializeTimePicker();
}
What have I done wrong?
index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Desktop App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<link href="assets/style.css" rel="stylesheet">
<link href="assets/overlay.css" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap.min.css" />
<link href="assets/material-icons.css" rel="stylesheet">
<base href="./">
</head>
<body>
<app>
Loading
</app>
<script src="js/ajax-d3.min.js"></script>
<script src="js/ajax-nvd3.js"></script>
<script src="js/hammer.min.js"></script>
<script src="js/desktop.min.js"></script>
</body>
</html>
when I load this html on browser material floating label is working fine but when i load it with electron it stops working ..
It should work like
but its working like
please help !!
I have the follow code:
app.middleware('files', '/lib', loopback.static(path.normalize(__dirname + '/lib')));
But I am getting this error on cosole:
Failed to load resource: the server responded with a status of 404 (Not Found)
Any idea why? The location of my css files is correct and the file is there.
Thanks
I am trying to integrate Raneto with Loopback, if someone can give me a hand I would apretiate it.
Here my html code:
<!DOCTYPE html>
<html lang="{{config.locale}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{#meta.title}}{{meta.title}} - {{/meta.title}}{{config.site_title}}</title>
{{#meta.description}}<meta name="description" content="{{meta.description}}">{{/meta.description}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon", href="http://buildmetric.com/favicon.ico?v=2">
<link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{config.base_url}}/lib/highlightjs/styles/solarized_light.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/ghostdown.css">
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/animate.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/hover.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/style.css" />
{{{config.analytics}}}
</head>
<body class="{{body_class}}">
Full path:
http://localhost:5000/lib/bootstrap/dist/css/bootstrap.min.css