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=".11.0/jquery.min.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='scripts/main.js') }}"></script>
<link rel="stylesheet" href=".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?
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./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./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?
Share Improve this question asked May 21, 2014 at 16:52 meterskmetersk 12.5k23 gold badges72 silver badges108 bronze badges 6- Are you sure it's loading the external file? – kylieCatt Commented May 21, 2014 at 16:55
- @IanAuld yes because the .hide() function works on document load – 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 Commented May 21, 2014 at 17:04 - Are there any JavaScript errors on the page? – dirn Commented May 21, 2014 at 17:28
-
@IanAuld this jQuery portion does not work
$('#user_button').click(function(event) { $("#user_id").html($('option:selected').html()); $('.button_div').show(); });– metersk Commented May 21, 2014 at 18:12
2 Answers
Reset to default 7You 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
[]
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.