I created a visualization using x3dom and d3. When I execute it as a single html file (html and js code in one file) it works fine. When I include in my website x3dom does not load properly anymore.
I broke it done to an issue loading the x3dom script. I have a main side with the following head:
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://x3dom.org/download/1.7.2/x3dom.css" />
<link rel="stylesheet" href="stylesheet.css">
<script defer
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script defer src="https://d3js.org/d3.v5.min.js"></script>
<script defer src="https://x3dom.org/download/1.7.2/x3dom-full.js"></script>
<script defer src="JS/form.js"></script>
The side includes a form which is handled by another javascript that calls the visualization script on submitting by using the jquery getScript() method. The visualization script gets loaded (I tested it by doing some console output), but the x3dom is not loaded. Tested it by using the following method:
if ( x3d.node() && x3d.node().runtime ) {
// do stuff
else {
console.log("x3dom not ready")
}
My first guess was, that the include sequence is wrong, but using the same header in the single file worked (I just removed the defer tags and website specific includes(like loading local css and js)).
So how can the x3dom script not be loaded in website implemenation?
EDIT
I tried calling the visualization script from the main html page and it works. For that I added to my head:
....
<script defer src="JS/form.js"></script>
<script defer src="JS/scatterPlot3d.js"></script>
So the problem must be calling it from another js file. Any ideas?
Okay, there is a function
which solves the problem.