I am trying to import a module to my JavaScript code, which should later run on a WordPress server.
Currently i wanted to test it on localhost, but it gives me an error like:
The Skript from "http://127.0.0.1:46513/js/main.js" was loaded, despite it's MIME-Typ ("text/html") is not valid in JavaScript
Which is strange because it is js code and not html.
My main.js looks like this:
const { Origin, Horoscope } = require('./circular-natal-horoscope-js/dist/index.js');
And index.html like this:
<html>
<head> Horoscope </head>
<body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
I also tried different import syntax:
import { Origin, Horoscope } from '/circular-natal-horoscope-js/dist/index.js';
Which gives me the same error.
The only thing which is working is, when i type in node main.js into console, then the Origin and Horoscope functions are beeing loaded.
How can i use this to be working in my js-files without using the console?
Related
I am using eel to communicate with python. I'm working in dir C:\Users\Desktop\Eel where I have app.py and inside the UI folder I have index.html, myjava.js, style.css, images but nothing called eel.js. I said this because in docs it says to include script called /eel.js.
index.html
<head>
<script type="text/javascript" language="JavaScript" src="./myjava.js"></script>
<script type="text/javascript" src="/eel.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container" onclick="runeel()">
</body>
my Javascript is:
function runeel(){
eel.runpy()
}
app.py
import eel
eel.init('UI')
eel.start('index.html', size=(900, 550))
#eel.expose
def runpy():
....code which creates an excel file in desktop...
When I run the py file, the index.html loads up and then when I click the div I get into the function and but it throws the error:
myjava.js:2 Uncaught TypeError: eel.runpy is not a function
What am I missing?
It seems that the init statement is written first.
What about writing the #eel.expose statement right after the import statement?
I'm not good at English, so I'm worried that it will make sense.
But I would be happy if I could help.
In my case, I had to start eel after exposing the function via the decorator:
import eel
eel.init('UI')
#eel.expose
def runpy():
....code which creates an excel file in desktop...
eel.start('index.html', size=(900, 550))
i had the same problem until I removed the /eel.js from
<script type="text/javascript" src="/eel.js"></script>
now it's look like
<script type="text/javascript" src="eel.js"></script>
I want to integration external code (html, js and css files) into my angular web application.
in this external code, the HTML files is just like this:
index.html
<html>
<header>
</header>
<body>
</body>
<script src="app/components/landing-page/js/bootstrap.min.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="app/components/landing-page/js/ie10-viewport-bug-workaround.js"></script>
<script type="text/javascript" src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script>
/*Execute a function that will execute an image compare function for each element with the img-comp-overlay class:*/
initComparisons();
</script>
<html>
as you see, there are several javascript files, and a funciton initComparisons() will be called.
If I only double click index.html, everything works fine. But I copy this html code in one component.html, that was not working. I can not see any animation.
I have googled some solutions,
and I have change my angular.json file just like this:
"scripts": [
"src/app/components/landing-page/js/imageComparisonSlider.js",
"src/app/components/landing-page/js/owl.carousel.min.js",
"src/app/components/landing-page/js/cbpAnimatedHeader.js",
"src/app/components/landing-page/js/theme-scripts.js"
]
and also import all js files in index.html in my angular web application
<script src="app/components/landing-page/js/imageComparisonSlider.js"></script>
<script src="app/components/landing-page/js/owl.carousel.min.js"></script>
<script src="app/components/landing-page/js/theme-scripts.js"></script>
<script src="app/components/landing-page/js/cbpAnimatedHeader.js"></script>
and in the component.ts, I also do this:
import initComparisons from './js/imageComparisonSlider.js';
ngOnInit() {
this.isLoggedIn = this.authService.isLoggedIn;
initComparisons();
}
I added some code in stackblitz;
https://stackblitz.com/edit/angular-qowfwy?file=angular.json
but it was not working.
can somebody help me and give me some suggestion.
Best Regards,
Leo
If you want to use external js in your angular project you have to import in your angular.json in the "scripts": [] area that will be allow you to bring the js and make the build after without problem.
After putting the external scripts in angular.json (paths correct and everything), in component you should
declare const initComparisons;
// ...
ngOnInit() {
initComparisons();
}
This is the script in my index.html
<script type="text/javascript" src="http://api.map.baidu.com/api v=2.0&ak=eBGR7XzaPhB5UbYARl3E7ksdkMdgrCw7"></script>
and I try to access a object --"BMap" from the script in my JS page which look like this:
var map = new BMap.Map("allmap"); // 创建Map实例
then I get error:"error! BMap is not defined"
what should I do?
I am guessing that you wanted to use BMap that is provided by baidu api. I changed the src that is actually pointing to the script and it seems to work. Note that you probably want to change the https to http when you are developing locally, as it may not work otherwise. See working example below (I had to use https because stackoverflow uses it by default).
If you have any other js module that uses BMap, make sure that it is called after the baidu api script is declared. S
<html>
<head>
<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.1&ak=&services=true&t=20130716024058"></script>
<script type="text/javascript" src="../path/test.js"></script>
<script type="text/javascript" src="../otherpath/someOtherjs.js"></script>
</head>
<body>
<script>
// You can use BMap here...
console.log(BMap);
</script>
</body>
</html>
I am trying to use Jquery for the first time and I am getting an issue. I am using VS 2013, asp.net and VB.
My head tag is as follows.
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#LowerText').hide();
$('#UpperText').hide();
$('#AssetStatusChoice').change(function () {
if($('#AssetStatusChoice').val("Fully Available"))
{
$('#CommentsText').hide();
}
if ($('#AssetStatusChoice').val("Restricted"))
{
$('#UpperLimit').show();
$('#LowerLimit').show();
}
if ($('#AssetStatusChoice').val("Unavailable"))
{
$('#Commentstext').show();
}
});
});
</script>
</head>
When I debug the page I get the following error.
0x800a1391 - JavaScript runtime error: '$' is undefined
It seems from Googling the error that I am not referencing the js file correctly. Can anyone help?
Add <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script> and Remove the
<script src="Bin/jquery-1.10.2.js" type="text/javascript"></script>
<script> Just use a host Jquery instead of adding it to you source. Read more :
3 reasons why you should use hosted jQuery
IIS doesn't serve content in the /bin directory.
Move it to another directory like /scripts or /js or /scripts/lib, something like that. The bin directory is a bad place to put script files.
You have a number of options here. You could use the Google CDN by adding the following to your header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Or, as it appears you're using .NET, you could do this:
<script type="text/javascript" src="<%=ResolveClientUrl("~/Bin/jquery-1.10.2.js") %>"></script>
The second option gives you the additional advantage that when used in a master page can be used in any content pages at any file system level and it will still resolve correctly.
As Stefan has also said, I'd recommend moving your jQuery file from your bin directory.
Copy the jQuery file in some other folder, like Scripts, or js, and in Solution Explorer check to see all files. Find the jQuery file you just copied, include it in the project, then drag it on the page where you want to place it. A correct script tag will be created.
I'm having problems including local javascript files into my html that is on the play framework. The paths are correct and I even tried including the javascript file in the same directory. However, imports from the web (the main libraries i'm using) work just fine.
#(execId: String)
<html>
<head>
<title>Timeline</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type = "text/javascript" src = "../../public/javascripts/profilesJS/stack.js"> </script>
</head>
<body>
<input id="profiles" type="button" value="Profiles" />
<script type="text/javascript">
alert(tester());
</script>
</body>
</html>
the javascript file simply looks likes this
function tester(){
return "test";
}
And the error i get is:
tester is not defined
at the line with the alert
According to the assets documentation (and routing in general) you need to use the reverse routing in your template:
<script type="text/javascript" src='#routes.Assets.at("javascripts/profilesJS/stack.js")'></script>
it builds the correct src path to your /public/javascripts/profilesJS/stack.js file (by default routing config it will be /assets/javascripts/profilesJS/stack.js)