Why Javascript doesn't work in my Flask app? [duplicate] - javascript

This question already has answers here:
flask does not see change in .js file
(5 answers)
Closed 3 years ago.
I have a problem with Javascript in my app. I'm using Flask and I'm working in PyCharm. My html's are in the template folder and my Javascript is in static folder, so this is external file. It's called main.js.
These are the links to javascript in the html:
<script type="text/javascript" src="/static/main.js"></script>
<script type="text/javascript" src="{{ url_for('static', filename='main.py') }}"></script>
I tried both versions and I experienced the same issue with both of them. Both links would actually work for the first load of my page on localhost but every next change in my Javascript main.js file simply just wouldn't get recognized. For instance, I put alert() in main.js just to be sure that the links work, and they worked just fine. But then I deleted alert(), put there some other Javascript code and saved it, but still, this alert() would be active even though I deleted it from the main.js file. And this new code that I put in main.js, it appeared as if it wasn't there at all. So my question is why my main.js file doesn't work?
Am I missing something here? Has anyone experienced this kind of problem in Flask or any other Python (micro)framework?

Your second reference is for a py file, not a js file:
<script type="text/javascript" src="{{ url_for('static', filename='main.py') }}"></script>
When using Flask, the above is a better alternative to full paths, so change it to:
<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>
If your browser still doesn't refresh the javascript you should try to Hard Refresh the pages. On Chrome, this is done by pressing CTRLShiftR on a PC or CMDShiftR on a Mac. This should clean your cache and force reload js files.
Finally, if none of these work, you should check on your python code if the headers are being modified for a longer cache. You can 'force' a Flask request to have a shorter cache time by trying to include:
#app.after_request
def add_header(response):
response.cache_control.max_age = 300
return response
You can also try changing Flask app settings for no-cache:
app = Flask(__name__)
...
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0
I would also try a different browser and check the network inspect tool (Chrome) to see if the files are being loaded.

Related

Cannot get js file to execute from html with Flask in PyCharm

I'm trying to get a html page to run a js script from the static files of the host using Flask (as it's a test project it's a localhost) and for some reason every script comes back as a 404 - I'm using this file structure
¬static
¬html
¬user.html
¬js
¬script.js
https://i.stack.imgur.com/vIXzr.png
I've followed as many guides and other queries on fixing this but I don't get what else I'm missing. I've used <script src="js/script.js"></script> to call it, I've used src="{{url_for('static', filename='js/script.js') }}" in place of src="js/script.js, I've tried using just script.js instead of js/script.js, I've tried putting it in different places in the file tree and using as many ways as I can think of to call it from these places, I've downloaded plugins, I looked at official sites explaining how to create html and js and etcetera... Can't get anything to work
EDIT - solved, for some reason clearing my cache for the 2000th time fixed it. Copied the project to another device, same problem, fixed it by replacing js/script.js with static/js/script.js. That doesn't seem like that's how it should be but it works I guess
Static content in Flask loaded as follows:
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
But in this case your html-template should be located in separate folder:
static
--js
scripts.js
templates
user.html
Folder templates is the default place where all html-templates are located in Flask.

Selenium keeps a cache? Why my javascript isn't loaded in tests?

I have a more complicate question but I'm trying to isolate the problem to avoid confusion.
I'm testing a page using selenium. In this page there are two javascript external scripts. If you go there manually the page is working correctly but using selenium one of the javascript isn't loaded:
The script from “http://localhost:55234/static/js/common.js” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.
2 add-name
Loading failed for the <script> with source “http://localhost:55234/static/js/common.js”.
Checking the source (right click => view page source) gives me correctly the template with this two lines (and the others, off course):
[...]
<!-- load global javascript -->
<script type='text/javascript' src="/static/js/common.js"></script>
<!-- load app javascript -->
<script type='text/javascript' src="/static/lists/js/lists.js"></script>
[...]
the src are clickable. Cliking the first one reload the source page without the line three and four, so without this lines:
<!-- load app javascript -->
<script type='text/javascript' src="/static/lists/js/lists.js"></script>
Clicking the second one (lists.js) gives the javascript code. But! But this code looks an (very) old version of my code. Many days old (isn't too long to be cached?). At that time all the code was in one javascript file (lists.js) and the other one (common.js) didn't existed so this can explain why isn't loaded.
Why is that? How can I update this code? If I go manually in the page I can find the real updated code.
Also can be useful to know that in my browser I recently selected 'Disable cache' in the Network tab (press F12 with firefox) and 'Disable HTTP cache (...)' in the setting just to avoid these problems. In the page opened by selenium these options are both unchecked. I tried to check both (using a breakpoint()) and reload the page but nothing changed.
I repeat, maybe the cause of this is somewhere else and there many other thing to say but I think is better to keeps things as simple as possible and open other questions when I need. Now, any of this make any sense? why my script isn't updated in days (I prefer to do not empty the cache, if possible)?
I found this code to delete the cache, should I try? It look right?
def setUp(self):
profile = webdriver.FirefoxProfile()
profile.set_preference("browser.cache.disk.enable", False)
profile.set_preference("browser.cache.memory.enable", False)
profile.set_preference("browser.cache.offline.enable", False)
profile.set_preference("network.http.use-cache", False)
self.browser = webdriver.Firefox(profile)
Here some code:
My template base.html:
[...]
<head>
[...]
<!-- load global javascript -->
<script type='text/javascript' src="{% static '/js/common.js' %}"></script>
<!-- load app javascript -->
{% block script %}{% endblock %}
[...]
my template list.html
{% block script %}
<script type='text/javascript' src="{% static 'lists/js/lists.js' %}"></script>
{% endblock %}
where common.js is in myproject/static/js/common.js, while lists.js is in myproject/lists/static/lists/js/lists.js. I call both with {% static but it should be correct.
My test.py:
class NameFormSeleniumTest(LiveServerTestCase):
def setUp(self):
self.browser = webdriver.Firefox()
self.browser.implicitly_wait(2)
def tearDown(self):
self.browser.quit()
def test_form_can_save_a_name(self):
# some code
# english = ...
self.browser.get(self.live_server_url + '/lists/add-name/')
Select(self.browser.find_element_by_id('id_namelanguage')).\
select_by_value(str(english.id))
# ...
breakpoint()
form = NameForm({'nametype': nome.id, 'gender': maschio.id,
'name': 'Remo', 'namelanguage': english.id,
'usato': 0})
print(form.errors)
form.save()
The error the test gives is (in the line form = ...):
ValueError: The Name could not be created because the data didn't validate.
and form.error is:
<ul class="errorlist"><li>nametype<ul class="errorlist"><li>This field is required.</li></ul></li></ul>
but with breakpoint() I see the javascript function to add options to the field isn't found, the field stay empty so Select() don't select nothing, and the form gives the error.
Thank you for your help
I found the problem.
From the documentation:
When running tests that use actual HTTP requests instead of the built-in testing client (i.e. when using the built-in LiveServerTestCase) the static assets need to be served along the rest of the content so the test environment reproduces the real one as faithfully as possible, but LiveServerTestCase has only very basic static file-serving functionality: It doesn’t know about the finders feature of the staticfiles application and assumes the static content has already been collected under STATIC_ROOT.
Because of this, staticfiles ships its own
django.contrib.staticfiles.testing.StaticLiveServerTestCase, a
subclass of the built-in one that has the ability to transparently
serve all the assets during execution of these tests in a way very
similar to what we get at development time with DEBUG = True, i.e.
without having to collect them using collectstatic first.
So it was loading an old version of my javascript script. Like you can read the solution is to use StaticLiveServerTestCase instead of LiveServerTestCase.

JS static files issues in AWS Production Django Application [duplicate]

This question already has answers here:
Unknown Provider e-provider error while using angularjs and ruby on rails
(3 answers)
Closed 5 years ago.
I am having a weird issue where angular is undefined when application is deployed in AWS but locally there are no issues in my angular or javascript code.
Update:
My static files (JS, CSS, Images, etc) all live in an S3 static files bucket. There is no problem in retrieving the files, but it seems like suddenly a working commit that has been deployed for months just started raising JS issues when static files are being loaded.
Here are my JS files in my base template:
{% compress js %}
<script src="{{STATIC_URL}}shared/stacktrace-js/dist/stacktrace.js"></script>
<script src="{{STATIC_URL}}shared/jquery/2.1.1/jquery.min.js"></script>
<script src="{{STATIC_URL}}shared/jquery-growl/1.2.3/jquery.growl.js"></script>
<script src="{{STATIC_URL}}shared/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="{{STATIC_URL}}ckeditor/ckeditor-init.js"></script>
<script src="{{STATIC_URL}}shared/ckeditor-custom/ckeditor-custom.js"></script>
<script src="{{STATIC_URL}}shared/bootstrap/3.3.5/dist/js/bootstrap.min.js"></script>
<script src="{{STATIC_URL}}shared/utils.js"></script>
<script src="{{STATIC_URL}}shared/angular/1.3.11/angular.min.js"></script>
<script src="{{STATIC_URL}}shared/angular/1.3.11/angular-route.min.js"></script>
<script src="{{STATIC_URL}}shared/angular/1.3.11/angular-cookies.min.js"></script>
<script src="{{STATIC_URL}}shared/angular-bootstrap/0.11.0/ui-bootstrap-tpls-0.11.0.min.js"></script>
<script src="{{STATIC_URL}}shared/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<script src="{{STATIC_URL}}shared/introjs/intro.js"></script>
<script type="text/django" src="{{STATIC_URL}}shared/ch-error-logging.js"></script>
<script type="text/django" src="{{STATIC_URL}}shared/ch-config.js"></script>
<script src="{{STATIC_URL}}shared/angulartics/dist/angulartics.min.js"></script>
<script src="{{STATIC_URL}}shared/angulartics-segment/dist/angulartics-segment.min.js"></script>
<script src="{{STATIC_URL}}shared/chart.js/dist/Chart.min.js"></script>
<script src="{{STATIC_URL}}shared/select2/dist/js/select2.min.js"></script>
<script src="{{STATIC_URL}}shared/angular-chart.js/dist/angular-chart.js"></script>
<script src="{{STATIC_URL}}shared/jquery-validation/dist/jquery.validate.min.js"></script>
<script type="text/django" src="{{STATIC_URL}}shared/ch-track.js"></script>
<script type="text/django" src="{{STATIC_URL}}shared/ch-file.js"></script>
<script src="{{STATIC_URL}}shared/offline.js"></script>
{% endcompress %}
If I change the jquery.min.js to jquery.js inside or outside the compress block, then other JS files begin raising syntax issues. Usually the error in Chrome's console says
Unexpected token (
And in Firefox, the error says
SyntaxError: function statement requires a name
This post helped me figure out which JS files are causing compressed JS errors. Basically, I had issues with directives/controllers construction and by using the ng-strict-di, I found all these issues.
From the AngularJS ngApp documentation. https://docs.angularjs.org/api/ng/directive/ngApp
ngStrictDi (optional) boolean if this attribute is present on the app
element, the injector will be created in "strict-di" mode. This means
that the application will fail to invoke functions which do not use
explicit function annotation (and are thus unsuitable for
minification), as described in the Dependency Injection guide, and
useful debugging info will assist in tracking down the root of these
bugs.

How to properly reference javascript files in to asp.net master page?

I am getting problem in referencing Javascript file.
My all js files reside in my js folder:MyProject/Js/*.js
Now on my master page i am refering my file like this:
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
Error showing in console:
SyntaxError: expected expression, got '<'.
On searching i have found that this issue comes due to inappropriate referencing of js files so i have resolve this error by doing this:
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-1.9.0.min.js" type="text/javascript"></script>
This above solution works when my .aspx page would be like this:
MyProject/Admin/Abc.aspx //This will work
But problem will occur when any of my .aspx page would be like such:
MyProject/Admin/Subfolder/Abc.aspx // This will not work
My Abc.aspx page contains master page but now in this case this will not load my js files due to ../
So can anybody tell me whats the correct way to reference js files which will work in both the cases??
Note:I am referencing all js files in to my master page and my master page is in:
MyProject/MasterPage.Master
I think you can give a try:
1) Use Bundling to reduce the loading time (Your script will be shorter as well)
2) Use ~/ instead of ../ to make your script/code work even if you relocate the pages.
You can easily find the scripts and codes of jquery bundle if you create a new ASP.NET application in Visual Studio.

Why can't my site access a linked JavaScript file?

I run a sub-site at my work, and while my live site is on the same "main server" as the company's main site, my dev environment is hosted on a separate server.
For some reason my dev site is unable to access a specific JavaScript file that is hosted on the "main server". All of the other JavaScript files, like jQuery, and jQueryTools can be accessed, but main.js cannot. My only guess would be because it is a custom JavaScript file created by our head web developer, but I don't know why that would make a difference. (Cross-site scripting limitations?)
I link to it just like I do with all the other JavaScript files, right after our main wrapper (it's the 3rd from the bottom):
<script type="text/javascript" src="ui/2009/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="ui/2009/js/jquerytools/1.2.2/jquery.tools.min.js"></script>
<script type="text/javascript" src="ui/2009/js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="ui/2009/js/main.js"></script>
<script type="text/javascript" src="ui/2009/js/jquery.jgfeed-min.js"></script>
<script type="text/javascript" src="ui/2009/js/hr.js"></script>
To troubleshoot follow these steps:
Check whether the file ui/2009/js/main.js is actually in that
location, if so be sure it doesn't have uppercase characters (the
server OS may be case sensitive)
Check whether the file main.js has the same permissions (i.e. chmod) as the other .js files (e.g. 755)
Check whether the file main.js is actually accessed (how do you know the file is
not accessed from your page in the dev server? It may be accessed but not working because of variable
conflicts with the .js you previously load, for instance). To do so,
you can a) check the server logs and see if you have a "not found"
error referred to the main.js file b) in main.js delete temporarily all
the content and print some simple output (either to screen with
document.write or to the javascript console with console.log)

Categories

Resources