Home > Software design >  Can't load JS static file, but style.css file still work
Can't load JS static file, but style.css file still work

Time:02-20

This is my error. The styles.css and index.js file in same folder name network. But the styles.css file is work, and index.js file doesn't work, it looking to my other project is Mail

[20/Feb/2022 14:17:59] "GET / HTTP/1.1" 200 1804
[20/Feb/2022 14:17:59] "GET /static/network/styles.css HTTP/1.1" 304 0
[20/Feb/2022 14:18:01] "GET /static/mail/inbox.js HTTP/1.1" 404 1667
[20/Feb/2022 14:18:01] "GET / HTTP/1.1" 200 1804

setting.py

STATIC_URL = '/static/'

index.html

{% extends "network/layout.html" %}
{% load static %}

{% block body %}
    <div id="allposts-view">

        <h2>All Posts</h2>
        <div id="new-post">
            <h5>New Post</h5>
            <form id="new-post-form">
                <textarea id="post-content" ></textarea>
                <input type="submit" />
            </form>
        </div>

        <div id="post-detail"></div>
    </div>
{% endblock %}

{% block script %}
    <script src="{% static 'network/index.js' %}" defer></script>
{% endblock %}

index.js

console.log('OK');

layout.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Social Network{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link href="{% static 'network/styles.css' %}" rel="stylesheet">
    </head>
    <body>
        <div >
            {% block body %}
            {% endblock %}
        </div>
    </body>
</html>

CodePudding user response:

You should add block script in layout.html

{% load static %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{% block title %}Social Network{% endblock %}</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link href="{% static 'network/styles.css' %}" rel="stylesheet">
    </head>
    <body>
        <div >
            {% block body %}
            {% endblock %}
        </div>

      {% block script %}
      {% endblock %}

    </body>
</html>

CodePudding user response:

add type to script and try it:

<script type="text/javascript" src="{% static "network/index.js" %}"></script>
  • Related