Flask app not executing javascript when it's in an external file

Question

I have HTML file that contained my CSS and JS. When creating my flask app I decided to separate out the CSS and JS to separate files in a static directory.

When I have everything in one HTML file, everything works as expected, but when the CSS and JS are in separate files, parts of the JS don't execute.

This is my import for in the HTML file:

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='scripts/main.js') }}"></script>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>

This is the contents of the standalone JS file:

$('#user_button').click(function(event) {
    $("#user_id").html($('option:selected').html());
    $('.button_div').show();
});

var prodData = [];
var boughtProds = [];

$('.prod_button').click(function(event) {

    if (boughtProds.indexOf($(this).data('name')) == -1) {
        prodData.push({
            name: $(this).data('name'),
            price: $(this).data('price'),
            quantity: 1,
        });
        boughtProds.push($(this).data('name'));
    } else {
        prodData[boughtProds.indexOf($(this).data('name'))].quantity = prodData[boughtProds.indexOf($(this).data('name'))].quantity + 1;
    }

    var total = 0;
    for (var x in prodData) total += prodData[x].price * prodData[x].quantity
    total = Math.round(total * 100) / 100
    var subtotal = '<tr><td></td><td>Subtotal</td><td>$' + total + '</td></tr>';

    var allProds = '';
    $.each(prodData, function(k, v) {
        allProds = allProds + '<tr><td>' + v.name + '</td><td>' + v.quantity + 'x</td><td>@ $' + v.price + ' each</td></tr>\n';

    });

    $('.table_contents > tbody').html(allProds);
    $('.table_contents > tfoot').html(subtotal);

});

$(document).ready(
    function() {
        $('.button_div').hide();
    })

The weird thing is that this function works properly on the document load:

 $(document).ready(
        function() {
            $('.button_div').hide();
        })

and this function DOES NOT work:

$('#user_button').click(function(event) {
    $("#user_id").html($('option:selected').html());
    $('.button_div').show();
});

But even weirder is that everything works when it is all in one HTML file.

Any thoughts?

@IanAuld yes because the .hide() function works on document load — metersk
– metersk, Commented May 21, 2014 at 16:58
.hide() is part of jQuery which appears to be loading. But is your standalone script being loaded? Check by viewing the source and clicking on the link for it. — kylieCatt
– kylieCatt, Commented May 21, 2014 at 17:04
@IanAuld this jQuery portion does not work $('#user_button').click(function(event) { $("#user_id").html($('option:selected').html()); $('.button_div').show(); }); — metersk
– metersk, Commented May 21, 2014 at 18:12

dirn · Accepted Answer · 2014-05-21 18:31:38Z

7

You either need to move <script type="text/javascript" src="{{ url_for('static', filename='scripts/main.js') }}"></script> outside of your <head> tag (e.g., to the end of <body>) or you need to put $('#user_button').click(...); inside $(document).ready(...);.

What's happening is that your browser begins loading your external script files as it processes your <head> tag. As soon as the file is loaded, the browser executes it, binding the click event to #user_button. This happens before it processes your <body> tag, so #user_button isn't yet part of the DOM.

If you tried to inspect $('#user_button') you'd see that it's empty.

console.log($('#user_button'));

This outputs

[]

answered May 21, 2014 at 18:31

dirn

21.1k7 gold badges75 silver badges76 bronze badges

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

1 Comment

metersk Over a year ago

great, thanks! also, i believe i have met you at a NYC python event.

Vikas Avnish · Accepted Answer · 2019-06-04 05:05:55Z

5

I have faced similar problem. When inspected network, static js was loading from cache. When I turned-off cache, it started working. Therefore you need to restart debug server or turn off cache during development.

answered Jun 4, 2019 at 5:05

Vikas Avnish

511 silver badge4 bronze badges

Collectives™ on Stack Overflow

Flask app not executing javascript when it's in an external file

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest