I wanna add mathjax script into my template
</script>
<script type="text/javascript" src="{% static "MathJax-2.4-latest/MathJax.js?config=TeX-AMS_HTML-full.js" %}"></script>
But django encode '?' to '%3F' and '=' to '%3D'(In firefox console), So I get a incorrect url. If I use "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
as my "src" attribution value, it's correct. And firefix console can show '?' and '=' correctly.
Okay, I solved the problem myself. It should place "?config=xxx" out of "%}". It looks like
<script type="text/javascript" src="{% static "MathJax-2.4-latest/MathJax.js" %}?config=TeX-AMS_HTML-full">
</script>
Related
I am having some weird problem with using popover in my django app. When using the css and js of a latest version of bootstrap it simply does not work. When I use link to 3.4.1 version I found in some tutorial everything works just fine. I'm attaching code that doesn't work and the one that does.
Did popover function got removed in latest bootstrap?
Works (3.5.1):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Toggle popover
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Does not work (4.5.x):
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
Toggle popover
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
You are missing popper.js.
Note that the bootstrap bundle js include the popper.js library. Try to load this one from CDN instead of bootstrap.js.
Require order :
Jquery
Popper
Bootstrap
I am trying to run Angular inside Django project. I successfully installed it and have no errors when I run the Django server. However I do not see my Angular. app.component.html. I see my index.html of folder "templates" instead.
templates/index.html
{% extends "base.html" %}
{% load staticfiles %}
{% block content %}
<p>This is a mini-blog application using a back-end built on Django 2.0 and Django Rest Framework. It illustrates how to create and send JSON Web Token authentication headers with the HTTP requests.</p>
<app-root>Loading the app...</app-root>
<script type="text/javascript" src="{% static 'clientapp/runtime.js' %}"></script>
<script type="text/javascript" src="{% static 'clientapp/polyfills.js' %}"></script>
<script type="text/javascript" src="{% static 'clientapp/styles.js' %}"></script>
<script type="text/javascript" src="{% static 'clientapp/vendor.js' %}"></script>
<script type="text/javascript" src="{% static 'clientapp/main.js' %}"></script>
{% endblock %}
Obviously, something is missing.
I am using this tutorial and looks like copied all the setttings:
https://www.metaltoad.com/blog/angular-api-calls-django-authentication-jwt
Thanks in advance.
In Django, Angular is nothing more than a set of static files.
So in order to make sure everything falls in its place, we need to load static files in order of their preference.
I suggest you visit index.html generated by webpack, just copy that order of javascript files in Django index.html in Django format.
For More info visit your browser console for errors.
For Ref: https://github.com/deepak1725/djangular
Sometimes the problem is absolutely silly as in my case.
I used old ng build.
Each time after change links to static files we need to run ng build
I was having trouble while using dal and tried to build a simple example.
I did almost the exactly the same as Django autocomplete light: field not populated and also applied the answer of the link.
Here are the steps I went through:
Step 1) When I add like this on header of html (just the same as the above answer):
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script>
The error of browser inspector console is like this:
Uncaught ReferenceError: yl is not defined(anonymous function) # autocomplete.init.js:75select2.js:117
Uncaught ReferenceError: yl is not defined(anonymous function) # select2.js:117
Step 2) So I added jquery.js and other js files on the dal library:
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/vendor/select2/dist/css/select2.css" type="text/css" media="all" rel="stylesheet" />
<link href="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/jquery.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/autocomplete.init.js"></script>
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/autocomplete_light/select2.js"></script>
And the error changed like this:
select2.js:66 Uncaught TypeError: $(...).select2 is not a function(anonymous function) # select2.js:66dispatch # jquery.js:4435elemData.handle # jquery.js:4121trigger # jquery.js:4350(anonymous function) # jquery.js:4901each # jquery.js:374each # jquery.js:139trigger # jquery.js:4900initialize # autocomplete.init.js:45each # jquery.js:374each # jquery.js:139(anonymous function) # autocomplete.init.js:50fire # jquery.js:3099fireWith # jquery.js:3211ready # jquery.js:3417completed # jquery.js:3433
Step 3) And for the last, I found these two plugins and added and it worked!
Plugins of [Step 2)] +
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
So here are my questions:
A) Should I add all the plugins above? For example, there are two select2.js on the plugins of [step 3)] and I'm confused and wonder if they work on different ways.(If I remove one of them, it doesn't work.)
B) According to the question Django autocomplete light: field not populated, shouldn't step 2 work? Why does it occur the error?
C) On this sample code, the part of following code seems not working at all. If not with admin account, the foreign key doesn't appears on the text field, in other words, nothing can be found on the list. (from the dal tutorial, it allows 'Using autocompletes outside the admin')
{% block footer %}
<script type="text/javascript" src="http://dal-yourlabs.rhcloud.com/static/collected/admin/js/vendor/jquery/jquery.js"></script>
{{ form.media }}
{% endblock %}
# I also checked django-autocomplete-light not working - select2 is not a function and rearrange the installed app didn't work.
First you need to include Jquery and after that your third-party library for selection field.
Select2.min.js(Minified version of the JS file)
Select2.min.css(Minified version of the CSS file)
Then import autocomplete.js
the first select2 library file does not exists. selected link raise Host Not Found Error
select2 library is same if you comment first one it not raised error. you can download library into your static folder.
also jquery link in the last example does not exists. you can download jquery and put it into static folder.
The top of my HTML template contains:
{% load inplace_edit %}
Header part contains:
{% inplace_static %}
Then in my body contents I am doing:
{% inplace_edit "action.action_state" %}
But it's not working. I have installed:
'bootstrap3',
'inplaceeditform_bootstrap', # it is very important that this app is placed before inplaceeditform and inplaceeditform_extra_fields
'inplaceeditform',
'inplaceeditform_extra_fields',
'bootstrap3_datetime',
I have tried 'django.template.loaders.eggs.Loader', both enabled and disabled.
It shows up as a clickable text, but when I click/double-click nothing happens. How do I get it to work?
Thanks,
Hec
After trying #Goin's suggestion I found that my JQuery files were not being correctly imported. had to move:
<script type="text/javascript" charset="utf-8" src="{% static 'srt/js/jquery-1.10.2.min.js' %}"></script>
<script type="text/javascript" charset="utf-8" src="{% static 'srt/js/jquery-ui.min.js' %}"></script>
to the top of my header block. Anyone working with Bootstrap, please make sure you import JQuery as the first thing in your templates.
Thanks
I am trying to integrate tinymce with django using these steps, however I can't. All I see in my admin panel is a simple TextField.
It seems there is something wrong with my settings.py file because in the code of the admin page I get this:
<script type="text/javascript">window.__admin_media_prefix__ = "/static/admin/";</script>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script>
Shouldn't tiny_mce.js source file exist in static/admin directory? What am I doing wrong?
First - look at this code throught Firebug (or something else, as you wish), maybe .js code doesn't linked with that page, then you will see 404 page there. Also, if everything correct you must check javascript errors, maybe there some dependencies fails.
And I'm sure, that you connect all needed code inn your .py files.