0

I am trying to load world.js in my html page, but it is not working.

Here is my html page -

<!DOCTYPE html>
    <html lang="en">

    <head>
        ...
        <script src = "../world.js"></script> 
        ...
    </head>
    
    <body>...</body>

</html>

<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

<script>
    ...
    L.geoJSON(countries).addTo(map); // (index):64:15
</script>

Whenever I hover the over the source of the script file and press the link of the .js, I go to the correct file.

Whenever I run the app, I get these error messages -

Failed to load resource: the server responded with a status of 404 (NOT FOUND)
(index):64 Uncaught ReferenceError: countries is not defined
    at (index):64:15

PS - The .js is a GeoJSON file which has the coordinate of all countries. Also, I have been following this tutorial, He was putting the <script> tags outside of <html> tag ad it was working fine for him.

Edit -

  1. Here is the directory imgur.com/a/YjtGLXj

  2. Here is app.py-

    from flask import Flask, render_template

    app = Flask(name)

    @app.route("/") def home(): return render_template('index_2.html')

Parth Gupta
  • 59
  • 6
  • please show your directory structure, its unlikely it will be `../` because if index.html is in your webroot i.e `/` then `../` would be inaccessible – Lawrence Cherone Sep 01 '22 at 11:45
  • btw, noone is going to watch a youtube video, you need to provide enough info to help you solve the issue – Lawrence Cherone Sep 01 '22 at 11:46
  • Where is the "world.js" file saved? Is it in the same folder as the HTML? In that case, you should use "./world.js" and not "../world.js". This depends on where the file is located. You can read more about relative paths in [this answer](https://stackoverflow.com/a/24028813/10633134) – Mark Karrica Sep 01 '22 at 11:49
  • @LawrenceCherone , here is the directory imgur.com/a/YjtGLXj – Parth Gupta Sep 01 '22 at 12:10
  • 1
    Your path should follow the server file structure not your local one. – Reyno Sep 01 '22 at 12:12
  • 3
    can you show the contents of `app.py`? *edit* ok, you have no routes to setup static serving of files, ie. your .js file see: https://stackoverflow.com/questions/20646822/how-to-serve-static-files-in-flask – Lawrence Cherone Sep 01 '22 at 12:15
  • @Reyno could you tell me what does server file structure mean? – Parth Gupta Sep 01 '22 at 12:34
  • 1
    I think you should put world.js in static and do this: `src="world.js"` – kess Sep 01 '22 at 16:35
  • use the defer or async attributes on the script tag. like this. it will load the js file in the background while HTML is parsing. – Zia Khan Mar 25 '23 at 19:44

2 Answers2

-1

The 404 error may be misleading, it may not be for your specific script (I can't see all the included objects).

If you have a look at the gihub page linked to in the video, the js scripts imported just provide a variable and json data, for example

var lineJson =  {"type":"FeatureCollection","features":"...etc..."}

If you are not exporting a variable called countries then you will get the undefined reference error

dev-rowbot
  • 448
  • 4
  • 13
-1

Check your filestructure on your webserver and make sure that you point on the right file with the right path.

For Example: If your "world.js" is placed in:

~/src/js/world.js

And the index.html is placed in:

~/src/index.html

then you've to write

<script src = "js/world.js"></script>

The '..' goes on step back/up in your file structure and looks there for the world.js. In detail: 1 folder above your index.html should be the world.js file

Jonathan Fuchs
  • 129
  • 1
  • 1
  • 7
  • My case is quite opposite. My `index_2.html` has a directory something like ~/src/js/index_2.html and my `world.js` is in something like ~/src/world.js. In this case, how should I specify the directory? – Parth Gupta Sep 01 '22 at 12:30
  • When the index_2.html is in the same directory, you dont have to set the directory. You can bind your js directly, without ~/src/ But it's not wrong doing that – Jonathan Fuchs Sep 02 '22 at 09:24