Django javascript file not loading

Question

I am trying to add a javascript file (script.js) to my existing static directory. I have stored script.js under the same directory as main.css (which work's fine)

I am trying to highlight the selected radio image like here: https://jsfiddle.net/dom_sniezka/78dy3to2/46/

I don't understand why it's not working in my Django Project.

base.html

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="{% static 'app_pickfeel/main.css'%}">
    <script src="{% static 'app_pickfeel/script.js' %}"></script>

  </head>

script.js

jQuery(function ($) {
        // init the state from the input

        // sync the state to the input
        $(".image-radio").on("click", function (e) {
                $(".image-radio-checked").each(function(i){
                    $(this).removeClass("image-radio-checked");
            });
                        $(this).toggleClass("image-radio-checked");
            e.preventDefault();

        });
    });

main.css

/*Changes Opacity when user hovers over image*/
.brightness {
    background-color: white;
    display: inline-block;

}
.brightness img:hover {
    opacity: .5;
}

.image-radio {
  cursor:pointer;
  box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  border:4px solid transparent;
  outline:0;
}

.image-radio input[type="radio"] {
  display:none;
}

.image-radio-checked {
  border: 4px solid #f58723;
}

I think it's because you forgot to include jQuery, which is used by your script.js. — Flux
– Flux, Commented May 1, 2020 at 12:21
Yes, that worked. I used <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> — user13440159
– user13440159, Commented May 1, 2020 at 13:07

Flux · Accepted Answer · 2020-05-01 13:10:00Z

1

You forgot to load jQuery, which is used by script.js. That's why script.js is not working.

If you've downloaded a copy of jQuery, simply include it before script.js. For example:

<head>
    <!-- ... -->

    <script src="{% static 'app_pickfeel/jquery.js' %}"></script>
    <script src="{% static 'app_pickfeel/script.js' %}"></script>
</head>

Alternatively, if you prefer to use a copy of jQuery hosted by someone else (e.g. Google):

<head>
    <!-- ... -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="{% static 'app_pickfeel/script.js' %}"></script>
</head>

answered May 1, 2020 at 13:10

Flux

11.1k6 gold badges64 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Django javascript file not loading

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related