Using local MathJax files with Django / Mezzanine - django

I would like to load MathJax in my base template with:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
<script type="text/javascript"
src="{% static "js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" %}">
</script>
However in the rendered template the URL is returned as:
/static/js/MathJax/MathJax.js%3Fconfig%3DTeX-AMS-MML_HTMLorMML
and MathJax doesn't work.
If I hard-code the URL as src="/static/js/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML" it works. How can I prevent Django/Mezzanine from escaping the ? and = characters? Is there an alternative approach?
[The reason I want to use a local MathJax is for development when I'm away from an internet connection; I use a CDN in production.]

I would try moving the config parameter outside the static reference and see if that helps:
<script type="text/javascript"
src="{% static "js/MathJax/MathJax.js" %}?config=TeX-AMS-MML_HTMLorMML">
</script>
I don't know Django or Mezzanine, but if the static is what is encoding the URL characters, moving them outside might prevent that.

Related

Why does d3 always append to the body instead of my selection?

I am using d3js in a django web app. I have a static js script that contains a function to render a visualization given some data (passed in the context) and a selection (e.g. histogram(data,selection)). Why would d3 ignore the passed selection and directly append to the body?
This is a simplified version of my code.
Template:
{% load staticfiles %}
<script type="text/javascript" src="{% static 'd3.js' %}"></script>
<script src="{% static 'myd3vis.js' %}"></script>
<body>
<div class="vis"></div>
...
</body>
<script type="text/javascript">
mselection = d3.select(".visualization")
data = {{data|safe}}
histogram(data,selection)
</script>
In myd3vis.js file I define the histogram(data,selection) function, which contains something like this:
svg = console.append("svg").attr({"class":"visualization",
"width": 100,
"height":200})
...
When the template loads, the visualization svg is always appended to the body, instead of being appended to the <div class="vis"> element. Any idea why this would happen?
In most browsers’ JavaScript environments, console is a global object unrelated to the DOM – it provides debugging functions (e.g. console.log())… unless you’re clobbering it with a d3 DOM selection elsewhere, console.append() is unlikely to behave the way you seem to think it will.
Replace console with a bona-fide d3 selection, like:
var svg = d3.select('div.vis').attr(…); // et cetera
and inspect this object, to ensure your DOM logic is sound.

tinymce django not showing up

I know this question have been asked here so many times, but i just cant show up Tinymce in my admin's flatpages. I don't know where I'm missing or doing something wrong. Please help me out where I'm going wrong.
The javascript file is in:
C:\Users\Kakar\web\cms\static\js\tinymce\tinymce.min.js
urls.py:
(r'^tiny_mce/(?P<path>.*)$', 'django.views.static.serve', { 'document_root': 'C:/Users/Kakar/web/cms/static/js/tinymce' }),
In my templates dir i have another admin folder, which have the change_form.html:
and right after {{ media }}:
<script type="text/javascript" src="/tinymce.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
In the firebug it says:
ReferenceError: tinyMCE is not defined
tinyMCE.init({
Please help me out. Thank you.
Your url for you tinymce script is currently pointing to http://yoursite/tiny_mce/ because of this: (r'^tiny_mce/... but the script you have included would attempt to GET tinymce.min.js from http:/yoursite/tinymce.min.js because you have not included the /tiny_mce/tinymce.min.js in front of it. If your tinymce.min.js is in a subdirectory you would need to include the path to it as follows <script type="text/javascript" src="/tiny_mce/(pathtodirectory)/tinymce.min.js"></script>

Django-Chosen seems to be ignoring the widgets despite correct static_url

I can get my ManyToManyField into a chosen widget directly by using the chosen jquery:
<script type="text/javascript" src="{{ STATIC_URL }}projectx/projectx_chosen.js"></script>
projectx_chosen.js:
$(document).ready(function () {
$('#id_sales_item').chosen();
});
This clearly indicates that my static_url is setup correctly.
But trying to achieve the same thing with django-chosen has no effect whatsoever.
class DealType(models.Model):
sales_item = models.ManyToManyField(SalesItem)
class DealTypeForm(ModelForm):
class Meta:
model = DealType
widgets = {
'sales_item': ChosenSelectMultiple(),
}
I have chosen.jquery.min.js under {{STATIC_URL}}js/chosen.jquery.min.js
and chosen.css under {{STATIC_URL}}css/chosen.css
Any idea why this is not working please?
Update
[21/Aug/2012 11:16:13] "GET /static/css/chosen.css HTTP/1.1" 304 0
[21/Aug/2012 11:16:16] "GET /static/js/chosen.jquery.min.js HTTP/1.1" 304 0
So now both are in the the path that the extension expects according to my investigation into the source code. And they are loaded.
Yet it simply doesn't work.
Using the chosen.js directly works like a charm, so I know how I would normally use it, but django-chosen, doesn't seem matured yet.
I had the same problem and solved it by linking to the chosen.jquery.ready.js file. So I have:
<link href="{% static 'css/chosen.css' %}" rel="stylesheet">
<script type="text/javascript" src="{% static 'js/chosen.jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'js/chosen.jquery_ready.js' %}"></script>

How to configure Mathjax in Python Django

I would like to know how to configure Mathjax in Django in a Q&A system where Questions and Answers will be based on LaTeX format.
I have tried to add:
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
into the html template where the questions and answers will be displayed to no avail.
Thanks.
If the page's content is dynamically created, you will need to call MathJax after the content has been loaded. See the documentation for details. The main idea is that you have to include
MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
in the javascript that is executed after the content is in place.
fOR Dynamic content here's is the working solution. I used AsciiMath Input as the input format in mathjax that incorporates ASCIIMathML.
In the base.html add the following scripts:
<script>
MathJax = {
loader: {load: ['input/asciimath', 'output/chtml']}
}
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/startup.js"></script>
<script type="text/javascript" id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">
and remember to enclose the dynamic text by back-ticks”, i.e., `...` So in the django-admin you can simply enter sqrt(50) as ` sqrt(50) ` or ` x^2 ` and the dynamic content which is passed from view to the template, in the template you surround {{e1}} by back-ticks
` {{ e1 }} `
instead of
{{ e1 }} where e1 is the dynamic content. So if e1 which was earlier displayed in plain text as 2*sqrt(2) will now be displyed as 2√2.
For more details: http://docs.mathjax.org/en/latest/input/asciimath.html#asciimath-support
see https://docs.mathjax.org/en/latest/web/configuration.html. For the demo indicated here to work you should also add ['\(', '\)'] to inlineMath:
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-svg.js">
</script>

How to include Google charts API without calling google.load()?

The jQuery, jQuery UI and Google Maps can be loaded from Google's CDN in two ways - either by using google.load():
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1");
google.load("jqueryui", "1");
google.load("maps", "3", {other_params: "language=de&sensor=false"});
</script>
or by using the static <script src="..."> tags:
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&language=de"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
Is there please the 2nd way available for the Google charts API as well?
For me only this method works:
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
</script>
but I can not find the URL for the 2nd way.
And I would prefer to include the Google charts API statically because it looks more straightforward to me and because of my current problem with DataTables.net.
When I look at the resources using the Google Chrome console, I can see the address like
https://www.google.com/uds/api/visualization/1.0/342b7b8453344477d252440b6c1305c9/format+en,default,corechart.I.js
but I think it is a temporary one, which can expire...
I've found an autoloading workaround:
<script type="text/javascript"
src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart'],'language':'ru'}]}">
</script>
UPDATE 2017:
Chrome displays this warning though:
jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table'],'…:22
A Parser-blocking, cross-origin script,
https://www.google.com/uds/api/visualization/1.0/84dc8f392c72d48b78b72f8a2e79c1a1/format+ru,default+ru,ui+ru,table+ru,corechart+ru.I.js,
is invoked via document.write. This may be blocked by the browser if
the device has poor network connectivity. See
https://www.chromestatus.com/feature/5718547946799104 for more
details. google.loader.f #
jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table'],'…:22
(anonymous) #
jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart','table'],'…:54
I was trying to find this out as well - all of my searching indicates that there is no way of direct linking the charts API (which is a shame). I eventually ended up using the image charts API instead:
https://developers.google.com/chart/image/