Menu
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?
648
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
[]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
