jQuery not recognized in extended html python flask

Question

Not sure what is going on here. It seems that jQuery is not "extended" from a base.html file to an external one.

I have:

#base.html

<!doctype html>
<html class="no-js" lang="en">

<head>
...
... # css imports
</head>

<body>

   # some fixed stuff

   {% block body %}

      # some stuff specific to base.html

   {% endblock %}

   # js imports at the end of the body

   <script src="static/js/jquery-3.1.0.min.js"></script>

    ... # various other js
</body>
</html>

Then I have another html file:

#test.html

{% extends "base.html" %}

{% block body %}

    # some stuff

   <script type="text/javascript">

        $(document).ready( function () {
             alert("foo")
         } );

    </script>

{% endblock %}

Now, I don't get any alert. However, if I use plain javascript it works as expected.

I noticed that if I import again jQuery in test.html, jQuery works fine. But what's the point of extending then?

There must be something that I'm missing. By the way, this seems to happen only with jQuery, all other javascript libraries seem to be extended fine.

@MiniGunnR good call! It seems indeed to work if I place it for example in the head. If you care enough to explain why and post it as an answer I'll gladly accept it. — Tommy
– Tommy, Commented Nov 28, 2018 at 9:09

MiniGunnR · Accepted Answer · 2018-11-28 09:18:02Z

1

It's really very simple. When the following code runs, it needs to run using jQuery.

<script type="text/javascript">

    $(document).ready( function () {
         alert("foo")
     } );

</script>

However, your jQuery is being loaded AFTER these commands, whereas, it needs to be placed BEFORE that.

It's like you're drinking water from a glass before you're putting water in it. You need to put the water in the glass first and then drink it. I don't know if this example makes it easy or not.

answered Nov 28, 2018 at 9:18

MiniGunnR

5,8208 gold badges45 silver badges70 bronze badges

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

2 Comments

Tommy Over a year ago

Man I feel so stupid. Looking back at it today it's obvious. I guess it's one of those things when you have been working too long and don't see straight anymore. :) Thanks tho!

MiniGunnR Over a year ago

We've all been through this. Not a big deal.

MD.Moniruzzaman · Accepted Answer · 2018-11-28 04:05:48Z

0

Add this line.I hope this will work.

<script type="text/javascript" src="{{ url_for('static', filename='js/jquery-3.1.0.min.js') 
}}"></script>

answered Nov 28, 2018 at 4:05

MD.Moniruzzaman

165 bronze badges

Comments

Dave W. Smith · Accepted Answer · 2018-11-28 04:21:33Z

0

At the moment $(document).ready( function () { executes, $ hasn't been aliased to jQuery, which has yet to load.

answered Nov 28, 2018 at 4:21

Dave W. Smith

25k4 gold badges42 silver badges50 bronze badges

2 Comments

Tommy Over a year ago

Thanks for the answer, but I'm not sure I understand, can you expand a little bit? Isn't jQuery supposed to be loaded from the extended base.html? If not, is the only way to solve this simply re-calling the jQuery script tag in test.html? What about inheritance tho.

Dave W. Smith Over a year ago

It might help to 'view source' or inspect in a browser to see how the page has flattened out. The body block is expanded before the bit that pulls in jQuery.

Collectives™ on Stack Overflow

jQuery not recognized in extended html python flask

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related