Django + Extjs 5.1.1 - django

I have a strange django error, that i would you to help me please.
The error occurs when I try to load django templates.
I work with Sencha ver 5.1.1 and Django ver 1.8.2.
When I try to load index.html, a file created by Sencha Cmd file without django (directly), with hard path like this:
<script id="microloader"
type="application/javascript"
src="/frontend/extjs/bootstrap.js">
</script>
It works as excepted.
But, if I load index.html with django with as a templates who look like this:
{% load staticfiles %}
<script id="microloader"
type="application/javascript"
src="{% static "bootstrap.js" %}">
</script>
On firefox it show the following error :
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
manifest = Ext.manifest = JSON.parse(result.content);
bootstrap.js col:50 line 1513
Does anyone have any solution?

it is appear that firefox CAN NOT run with out web security as chrome does.
Because of that all my testing was unable to run and fail.
If you running test inside your lab you may want to use chrome as the
following :
"chrome --disable-web-security"
Please note , this ONLY FOR TESTING !!!! not for production.
After I realize that my django finally run as expected and load the index.html as a templates as i need.
Thank all for all your effort to help

Related

Chrome says 'No manifest detected' when manifest.json is served by Django

I have an SPA with Django on backend. I try to make it a progressive web app. I made a manifest.json and linked it in my index.html:
<link rel="manifest" href="/static/manifest.json">
Chrome can't detect it. My index.html is a Django template and is stored in templates directory and can't be accessed but by Django route /. Manifest.json is in static directory and served to front-end as a regular static file. I think this is the reason manifest can't be detected - index.html not being accessible. Am I right? If so, could you give me an advice as to how to make it work please?
Try
load static
{% static "manifest.json" %}
The syntax here is {% static "path/relative/to/static/folder" %}

Using Foundation Modals with Django

I had an html file using Foundation to display a simple signup login template that was working as desired before using Django. I made a Django project and app and was able to get everything displaying as it was before except for modals. The section looks like this:
<a data-open="signup" class="button">Sign up</a>
<div class="reveal" id="signup" data-reveal>
I've used this http://foundation.zurb.com/sites/docs/reveal.html but it's not actually displaying the modal when I run the Django server.
I also have the following lines in my html page:
<link rel="stylesheet" href="{% static "MyApp/foundation.css"%}">
<link rel="script" href="{%static"MyApp/js/jquery/vendor/foundation.js"%}">
Along with this <script> $(document).foundation(); </script>
These are all in my static directory. I also have tried adding 'foundation' to INSTALLED_APPS in my settings but I get an error saying no module was found. However, I'm using other CSS from foundation and it's working fine so I'm wondering if this issue has something to do with using foundation in my static directory vs. using this package: https://pypi.python.org/pypi/django-zurb-foundation
Any help is appreciated!

Can I use the django debug_toolbar on the admin pages?

(Note: the answer is a qualified 'yes' - it should work if not for my requirejs configuration issue - see my update at the end)
I'm looking into customizing the admin for a number of Models where savvy end-users are expected to do the maintenance.
I've seen a number of SO questions, such as How to override and extend basic Django admin templates?, on how to achieve this.
I expect that knowing which template files are being used by the admin at any particular point is key to customizing efficiently. So, I re-enabled the Django Debug Toolbar (hopefully wo requirejs side-effects this time).
The Django Debug Toolbar works and shows up in my apps' pages. But it doesn't show up on the admin pages. Is that to be expected?
Django (1.8.11)
django-debug-toolbar (1.4)
Why it's not working/Update:
I think I know what is happening. When looking at Firebug to see what CSS is involved with an admin page, I noticed that it was requesting debug toolbar CSS:
http://localhost:8000/static/debug_toolbar/css/toolbar.css
Which got me to think of requireJS incompatibility again. Sure enough, in the console, I see this error.
TypeError: $ is undefined
http://localhost:8000/static/debug_toolbar/js/toolbar.js
Line 297
So, again a requireJS-DJT glitch.
FYI, my Debug toolbar workaround for requireJS was (from https://github.com/django-debug-toolbar/django-debug-toolbar/issues/605):
settings.py
DEBUG_TOOLBAR_CONFIG = {
"JQUERY_URL": None,
}
and in my app's base template:
(this is the part that is missing from the admin pages)
{% block requirejs %}
//as per DJDT recommendations, make sure jquery loads before requireJS
<script type="text/javascript" src="/static/websec/external/jquery-2.1.1.min"></script>
<script type="text/javascript" src="{{STATIC_URL}}websec/external/require.js"></script>
<script>
//defines the requirejs configuration in general.
{% include "websec/requirejs_config.html" %}
</script>
It's generally considered bad practice to use the built-in admin backend for end-users.
Try checking foy <body></body> tags in the pages. Without these it will not load.
Then try adding INTERNAL_IPS = ('127.0.0.1') in settings.py
To make it ONLY load for users inside the admin panel, you could add a tag to your custom admin pages and change settings.DEBUG_TOOLBAR_CONFIG['INSERT_BEFORE']
Docs: here
Last to force it to show everywhere, you can try adding this to the settings file:
def show_toolbar(request):
return True
DEBUG_TOOLBAR_CONFIG = {
"SHOW_TOOLBAR_CALLBACK" : show_toolbar,
}
to stop debug toolbar from checking if it should appear or not, it always will Only use for testing/development purposes. All other users can see it as well.
Documentation: here.
A quick overview over what I had to do to get debug_toolbar and admin working together.
You want to load jquery on its own, even though requireJS is configured to handle it as well.
From https://github.com/django-debug-toolbar/django-debug-toolbar/issues/605 :
settings.py
DEBUG_TOOLBAR_CONFIG = {
"JQUERY_URL": None,
}
Now, set up the admin to load jquery outside of requireJS, so debug toolbar can find it:
I was planning to customize that admin anyway, so no big deal creating a base_site.html override.
/myproj/templates/admin/base_site.html
{% block extrahead %}
*************** add this (with proper path) ************************
<script type="text/javascript" src="{{STATIC_URL}}websec/external/jquery-2.1.1.min.js"></script>
*******************************************************************
<script type="text/javascript" src="{{STATIC_URL}}websec/external/require.js"></script>
<script>
{% include "websec/requirejs_config.html" %}
require(['bootstrap'], function(bootstrap){
});
</script>
{% endblock %}
This is similar to what I had to do to my site's ancestor template to get debug_toolbar and requireJS to cohabit:
/myproj/templates/websec/__base.html
{% block requirejs %}
<script type="text/javascript" src="/static/websec/external/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="{{STATIC_URL}}websec/external/require.js"></script>
<script>
//defines the requirejs configuration in general.
{% include "websec/requirejs_config.html" %}
</script>
{% endblock requirejs %}
Unrelated, but a nice hack to get rid of debug_toolbar during unit testing:
settings.py
INSTALLED_APPS = (
'django.contrib.auth',
#... more stuff
'debug_toolbar',
'myapp',
'djcelery',
'crispy_forms',
)
#hack, but debug toolbar totally collapses performance on some tests
pgm = os.path.basename(sys.argv[0])
if pgm.startswith("test") or pgm.startswith("nosetests"):
li = [app for app in INSTALLED_APPS if not app == "debug_toolbar"]
INSTALLED_APPS = tuple(li)

Django-compressor not working after first compress statement

I have a website with various js files, and i'm using django-compressor like so:
{% compress js %}
{% endcompress %}
{% compress js %}
{% endcompress %}
For some reason its only creating the FIRST js file. I have my app hosted on an EC2. I can see the first file there. The second file appears when I do a view source on the page, however, the file itself doens't exist (I get a 404 when I click on the link to the second js file). Is there anything I'm doing wrong? I have my settings as per below:
COMPRESS_ENABLED = not DEBUG
COMPRESS_PARSER = 'compressor.parser.BeautifulSoupParser'
COMPRESS_CSS_FILTERS = ['compressor.filters.cssmin.CSSMinFilter']
COMPRESS_JS_FILTERS = ['compressor.filters.jsmin.JSMinFilter']
It's working perfectly for css files...but failing on any other js file after the first compress flag...
I honestly have no idea what happened. this used to work perfectly, but randomly stopped out of no where! I did the following and it worked:
python manage.py compress --force
This basically forces it to compress all files; normally django-compressor ignores files that have not changed and have been compressed already.

Django debug console shows double GET for a single page request

I'm running the developer's Django server while writing a simple view and it seems whenever I request a page, the console shows that there are 2 GETs for the same URL. What would cause this happen? I'm not using any redirects, so I don't see how a 2nd request would be made?
EDIT: It appears to be caused by the template. Changing to a blank html file for a template resolved the issue. The question is why? I have multiple {% if %} {% endif %} sections, with no elses. Could that be an issue?
It also could be Firefox following a WC3 directive under which it's supposed to dual load if certain tags come empty or broken, for example, a without a src="" etc. That being said, I saved off the rendered HTML on receipt and moved it into a static file, where I added the same headers as the real checkout and a small DB log of all accesses.
I just stumble upon this problem and fixed it removing my img wit src=""
Please confirm, if Django is redirecting after appending slash to your url. Its the property APPEND_SLASH in your settings.py controls that.
The second request is probably caused by a mis-configured asset link - a script, style or img tag which is empty or omits the initial / and is therefore re-requesting the page.
It could be your shortcut/favicon
Do you have link rel="shortcut icon" in your page template? Comment it out to see if it removes the second request
In my case : I have the same javascript code in 2 files : one in the base template and the same one in another template. As I use ajax to not reload all the page I got the call 2x, then 4x, and 8x, ...
The solution is the use the javascript code only in mybase.html
Hereafter my js code :
<script type="text/javascript">
// Code jQuery Ici
$(document).ready(function(){
// GET
$(".ajax_onglet_get").click(function(e){
var lien = $(this).attr('href');
$('#zone_travail').fadeOut('fast', function(){
$('#zone_travail').load(lien, function() {
$('#zone_travail').fadeIn('fast');
});
});
e.preventDefault()
});
});