Now I have three scripts in my html file. And there aren't any code about marked in mystyle.js.
So the question here is:
output of my html file in localhost
Another site render well
I want to know why would this happened? Thanks!
<script type="text/javascript" src="{% static 'jquery/jquery.min.js' %}"></script>
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/mystyle.js' %}"></script>
You need to put a space between the hash and text. Marked will not render it correctly otherwise.
// prints <p>headline</p>
marked('#headline');
// prints <h1>headline</h1>
marked('# headline');
Related
When I am working outside Django file, everything works fine with javascript reading classes and Ids like
document.querySelector('.class_name').addEventListener
But when loaded in Django projects it gives an error that eventlistner can't read NULL.
{% comment %} css file for contacts.html {% endcomment %}
<script type="text/javascript" src="{% static 'info/js/for_recrs.js' %}"></script>
<link href="{% static 'info/css/for_recrs.css' %}" rel="stylesheet" type="text/css" />
{% endblock %}
Actually if you are declaring JS file in head, it will read it at that time itself without going through the HTML file. So, it reads null value of classes and ID.
To avoid that you can declare script file just beforeend of body.
OR
Use
window.onload = function() {
// do your stuff here.
}
It solved mine problem.
I'm trying to use an input mask script on my site. When I reference function from the external script I get the error $(...).inputmask is not a function. I'm thinking this may be because the script isn't being loaded first; however, I implemented require.js and the issue persists.
The two ways I've loaded the script:
I originally loaded the script straight from my server:
<script src="{% static 'jquery.inputmask.bundle.js' %}"></script>
Then Method 1:
<script data-main="{% static 'jquery.inputmask.bundle.js' %}" src="{% static 'require.js' %}"></script>
Now Method 2:
<script data-main="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js" src="{% static 'require.js' %}"></script>
I'm referencing the source in my script with:
$(":input").inputmask();
$("#phone").inputmask({"mask": "(999) 999-9999"});
I trouble shot a bunch of things that haven't worked but think I might just be overlooking a small thing. Any ideas?
I've also tried implementing:
<script> $("#txt").inputmask({"mask":"(999) 999-9999"}); </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/jquery.inputmask.js"></script>
Which results in TypeError: $("#txt").inputmask is not a function. (In '$("#txt").inputmask({"mask":"(999) 999-9999"})', '$("#txt").inputmask' is undefined)
First give the inputmask.js reference and then give jquery.inputmask.js, this should work for input-mask plugin.
Check this Fiddle.
For more refernce: https://github.com/RobinHerbots/Inputmask/issues/1029
$("#txt").inputmask({"mask":"(999) 999-9999"});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/inputmask.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/inputmask/jquery.inputmask.js"></script>
<html>
<input type="text" id="txt" />
</html>
I have a problem with django-smart-selects usage.
In the admin panel, django-smart-selects works correctlyn but in templates there is an error.
Uncaught ReferenceError: chainedfk is not defined
$(document).ready(function() {
chainedfk.init(chainfield, url, id, value, empty_label, auto_choose);
});
Mt urls:
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
url(r'^chaining/', include('smart_selects.urls')),
url(r'^$', 'avtocry.views.index'),
url(r'^/', include('advdesk.urls')),
url(r'^createadv/', 'advdesk.views.createadv',name='createadv')
]
tamplate file
{% extends 'base.html' %}
{% block content %}
<div class="wrapper">
<form action='{% url 'createadv' %}' method="post">
{% csrf_token %}
{{ form }}
<input type="submit" value="OK">
</form>
</div>
{% endblock %}
base file contais
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
html output
template
admin
Here's how I solved this, for some reason unknown to me, a file called chainedfk.js is missing. After a little digging I found that this file exists in this path 'smart-selects/admin/js/chainedfk.js' in the library files.
So I simply added this import line my base.html file.
*I removed the tags so it can be visible.
script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"
after the js import line and it worked like a charm :)
UPDATE - MAY- 2017
Sorry, things have a bit changed as of now, my form also refused to load and yet it was loading some time back, so you have to include the tag below, right after the jquery and the tag that contains chainedfk.js
This works very well both for django 1.10.5 and Django 1.11 -(the latest version as of this writting) - Python 3.5.2
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>
<script type="text/javascript" src="{% static 'smart-selects/admin/js/bindfields.js' %}"></script>
I had the same problem but without receiving any error.
it worked for me too when I included:
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
to be 100% correct you have to import file with this specific order:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js </script>
<!-- Smart select -->
<script src="{% static 'smart-selects/admin/js/chainedfk.js' %}"></script>
<script src="{% static 'smart-selects/admin/js/chainedm2m.js' %}"></script>
Worked for me by putting {{form.media.js}} which loads the required javascripts in the head.
so:
{% block headjavascript %}{{ form.media.js }}{% endblock %}
Which is a better practice for loading javascript
I am using Python/Django with the default Django templates.
I have this in the head (other django static files in this location work fine):
<script type="text/javascript" src="{% static "js/Chart.min.js" %}"></script>
Naturally, I have Chart.min.js extracted from the master Chart.js download into the static js directory.
In my body I have:
<div class="graph">
<canvas id="dgraph" width="600" height="400"></canvas>
</div>
Also in the body I have:
<script type="text/javascript" src="{% static "js/stuff.js" %}"></script>
In stuff.js I have:
var data = [
{
value: 20,
color:"#878BB6"
},
{
value : 40,
color : "#4ACAB4"
},
{
value : 10,
color : "#FF8153"
},
{
value : 30,
color : "#FFEA88"
}
];
// Get the context of the canvas element we want to select
var ctx = document.getElementById("dgraph").getContext("2d");
new Chart(ctx).Doughnut(data, {});
However, when I try and display this in a browser (Chrome as it happens) I see this in the console:
Uncaught ReferenceError: Chart is not defined
Where on earth is the Chart object obtained from? It seems to be pretty fundamental and I feel as if I've followed every instruction available on google and stackoverflow. Please help!
The Chart object is defined in Chart.min.js. It looks like that script isn't being loaded.
I think you're missing quotes around the value of the src attribute in the <script> tag in your header - try:
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
I discovered that by moving the Chart.min.js included line BELOW the jQuery included line, it springs into life. Like so:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
Presumably Chart.js is dependent on jQuery.
I have a situation where, replacing a url string "/CreditHistory/10216" with a jinja2 variable {{creditNumbers|safe}}, messes up the loading of javascript files. More specifically, this works;
{% block Scripter %}
<script type="text/javascript" src="./static/assets/js/crossfilter/crossfilter.js"></script>
<script type="text/javascript" src="./static/assets/js/d3/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>
<script type="text/javascript" src="./static/assets/js/queue/queue.js"></script>
<script src='./static/assets/js/graphsFordringer.js' type='text/javascript' charset="utf-8"></script>
<script type="text/javascript">
queue().defer(d3.json, "/CreditHistory/10216").await(makeGraphs);
</script>
{% endblock %}
But, this does not;
{% block Scripter %}
<script type="text/javascript" src="./static/assets/js/crossfilter/crossfilter.js"></script>
<script type="text/javascript" src="./static/assets/js/d3/d3.js" charset="utf-8"></script>
<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>
<script type="text/javascript" src="./static/assets/js/queue/queue.js"></script>
<script src='./static/assets/js/graphsFordringer.js' type='text/javascript' charset="utf-8"></script>
<script type="text/javascript">
queue().defer(d3.json, "{{creditNumbers|safe}}").await(makeGraphs);
</script>
{% endblock %}
The errors that gets thrown in the web-browser implies that none of the javascript files get loaded. One of them is for example that queue is not a defined function.
What is also apparent is that the "{{creditNumbers|safe}}" variable does load to "/CreditHistory/10216". So, in short the variable loading seems to break the javascript loading. Not that I have found reference to similar issues in the documentation, so that probably is not what is happening.
EDIT:
It now seems that I have misunderstood the entire situation. It looks like it is the way that the jinja2 template variable is declared in the app.py file that is the root cause.
The #app.routecode that is failing is;
#app.route('/KundeFordringer/<int:KundeNr>')
def fordringer(KundeNr):
jsonSti = "/CreditHistory/"+str(KundeNr)
return render_template("fordringer.html", creditNumbers=jsonSti)
However, if I change the code to the following, it works fine;
#app.route('/KundeFordringer')
def fordringer():
return render_template("fordringer.html", creditNumbers="/CreditHistory/10216")
As mentioned previously, viewing the source code from the web browser, one could see that the "/CreditHistory/10216"was loaded when using the first #app.route declaration. But apparently something is, never the less, off with that way of doing it.
Any help would be greatly appreciated
The loading of the javascript files is relative to the current url.
Basically if you are browsing
http://mywebsite.com/KundeFordringer/456
Then the browser is going to try to load those files:
http://mywebsite.com/KundeFordringer/456/static/assets/js/crossfilter/crossfilter.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/d3/d3.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/dc.js/dc.js
http://mywebsite.com/KundeFordringer/456/static/assets/js/queue/queue.js
What you want is probably
http://mywebsite.com/static/assets/js/crossfilter/crossfilter.js
http://mywebsite.com/static/assets/js/d3/d3.js
http://mywebsite.com/static/assets/js/dc.js/dc.js
http://mywebsite.com/static/assets/js/queue/queue.js
Their might be a problem either with your script tags:
<script type="text/javascript" src="./static/assets/js/dc.js/dc.js"></script>
That needs to be renamed
<script type="text/javascript" src="/static/assets/js/dc.js/dc.js"></script>
Or a problem with your static_url_path.