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.
Related
So I was trying to add an audio recording function to my website developed with django.
I wanted to do something similar as https://github.com/addpipe/simple-web-audio-recorder-demo so I started by trying to run it without modification.
I took the same html as in the git linked above, put the js/ folder in my static/ folder, and simply changed the following lines (index.html, line 32-33)
<script src="js/WebAudioRecorder.min.js"></script>
<script src="js/app.js"></script>
for
{% load static %}
<script src={% static "js/WebAudioRecorder.min.js" %}></script>
<script src={% static "js/app.js" %}></script>
These js files load correctly, but the problem is that when I click record on my website, I get a "GET /myapp/record/js/WebAudioRecorderWav.min.js HTTP/1.1" 404 error in my django server.
WebAudioRecorderWav.min.js is called within WebAudioRecorder.min.js. I tried to use the {% load static %} trick in the js file, but it doesn’t work.
What would be the correct way to work around this?
Thanks in advance.
You should use the workerDir setting to set the correct path to the other imported js files. Probably your recorder is initialised in app.js, where you cannot use template tags like {% static %}. The best way is to create a global variable in your template before loading app.js:
In your HTML template:
<script>var jsFilesPath = "{% static 'js/' %}"</script>
<script src="{% static 'js/app.js' %}"></script>
In your app.js:
if (typeof jsFilesPath !== "undefined") {
audioRecorder = new WebAudioRecorder(sourceNode, {
workerDir: jsFilesPath // must end with slash
});
}
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 bunch of canvases that needs to be rendered. I don't want put the
JavaScript code in a python loop, because I feel it's bad practice
home.html
{% load staticfiles %}
<head>
<script type="text/javascript" src="{% static
'canvas/canvasrender.js' %}"></script>
</head>
{% for canvas in user_canvas_set %}
<canvas class = "canvas" id="{{canvas.id}}" width="400" height="200"
canvas_post= ""{{canvas.canvas_post}}"" >
Your browser does not support the HTML5 canvas tag.</canvas>
**<script>
canvasrenderNP.canvaswrite("{{canvas.id}}","{{canvas.canvas_post}}")
</script>**
{% endfor %}
I made a custom function that returns an array of the users canvas ids, because I use the canvas id as the id for the canvas element.
home.html
<script>
alert("{{user_canvas_ids}}")
</script>
I get the desired output:
[247, 248, 251, 252]
Now when I put this in a static file
canvasrender.js
alert("{{user_canvas_ids}}")
then load it into
home.html
{% load staticfiles %}
<head>
<script type="text/javascript" src="{% static
'canvas/canvasrender.js' %}"></script>
</head>
output:
"{{user_canvas_ids}}"
I am confused to as what is going on. I thought that the script tag inserts the js file in between the "<script> </script>"
I know I can make a element like so and get the attribute, but I feel like that is not good practice, or is it fine?
<p id="canvas_ids" canvas_ids ="{{user_canvas_ids}}"> </p >
Is there anything else I can do so that I can avoid writing JavaScript code
in the HTML file?
Why this is not a duplicate question. It does not have anything about why the linked js file in the html page can not keep reference to the python variable. But if the JavaScript is coded in the html page it can
As you mentioned in your own comment, you can save user_canvas_id in a js variable in home.html and access it in your js file. Something like this:
<head>
<script>var user_canvas_id = "{{ user_canvas_id }}"</script>
<script type="text/javascript" src="{% static 'canvas/canvasrender.js' %}"></script>
</head>
I am confused to as what is going on. I thought that the script tag inserts the js file in between the "<script> </script>"
Kinda, but this is done client-side, by the browser who has no idea about the special meaning of curly braces in Django templates.
And static in the context of Django means just that: That Django serves that file as-is, without running it through the template engine. (Which wouldn't help here anyway, as for the JavaScript file in isolation, the value of user_canvas_ids would be unknown, so the template engine couldn't substitute anything useful for it.)
I AM getting the following error:
ReferenceError: Can't find variable: gettext
I have added the following in my urls.py:
js_info_dict = { 'domain': 'djangojs', 'packages': ('my_project_name',), }
urlpatterns += patterns('', (r'^jsi18n/$', 'django.views.i18n.javascript_catalog', js_info_dict), )
I marked the string for localization as :
var lingualText = gettext("Are you sure you want to delete the photo?");
var statusConfirm = confirm(lingualText);
I have added the following line in my template:
<script type="text/javascript" src="{% url django.views.i18n.javascript_catalog %}"></script>
To generate the language file for the text inside javascript file, I use the following command:
python /usr/bin/django-admin.py makemessages -d djangojs -l de
I am able to generate the djangojs.po file for the desired language. And I also get all the strings marked in the JS file. When I see the output in Firebug, I see the above error i.e.:
ReferenceError: Can't find variable: gettext
Can anybody tell me where am I going wrong? Am I having the problem with the path for jsi18n ?
Thanks in advance.
getext() is provided by the {% url django.views.i18n.javascript_catalog %} script, so make sure it is included before your own code is, e.g.
<html>
<head>
<script type="text/javascript" src="{% url django.views.i18n.javascript_catalog %}"></script>
<!-- gettext() is now available -->
<script src="{{ STATIC_URL }}my_script_using_gettext.js"></script>
...
i have a web application that has javscript interspersed through the page. What happens is that safari will dump the source of the javascript code instead of executing it. I can reproduce this consistently.
The page is a mashup of different forms of content:
it loads flash videos using osflv and is generated via a php script on the server side. In addition the page also contains calls to Google Map's API to display a map. The content is placed in separate tabs using javascript to provide tab interaction.
I am also using mootools, and not sure if that is potentially causing issues.
Here are the javascript includes:
<script type="text/javascript" src="/js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/js/sifr.js"></script>
<script type="text/javascript" src="/js/sifr-debug.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/alerts.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/autocompleter.js"></script>
<script type="text/javascript" src="/js/observer.js"></script>
<script charset='ISO-8859-1' src='/js/rac.js' language='javascript'></script>
rac.js comes from osflv, common.js and alerts.js are custom javascript code that includes custom classes and functions used to either display or manipulate data in the page.
This block of code executes in the page just fine:
<script type="text/javascript">
var whitney = { src: '/flash/whitney.swf'};
sIFR.activate(whitney);
sIFR.replace(whitney, { selector: 'h6#propertyHeadline', wmode:'transparent',css: {'.sIFR-root': {'color': '#1ca9b9' }}});
</script>
This code also executes just fine:
<script language='javascript'>
var src = '/player';
if(!DetectFlashVer(9, 0, 0) && DetectFlashVer(8, 0, 0))
src = 'player8';
AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', 520, 'height', 440, 'src', src, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'id', 'flvPlayer', 'allowFullScreen', 'true', 'movie', src, 'FlashVars','movie=media/orig/4b845109d99d0.flv&fgcolor=0x1CA9B9&bgcolor=0x000000&autoload=off&volume=70');
</script>
This is the final snippet of code that is embedded in the html towards the bottom of the page before the end of the body tag, Safari will randomly spit out the src code in the browser at any point beyond the good maps script include:
<script src="http://maps.google.com/maps?file=api&v=2&key=googlemapsapikeyblockedout" type="text/javascript"></script>
<script type="application/javascript">
function InitPropertyDashboardTabs(){
mytabs = new TabPanel('DashboardTabPanel');
initializeGallery();
initializeSiteplan();
initializeMap('address blocked out');
}
var map = null;
var geocoder = null;
function initializeSiteplan()
{
var flashvars = {PropertyId:1,BasePath:'/',wmode:'transparent'};
var params = {wmode: 'transparent'};
var attributes = {id: 'SWFSitePlan',name: 'SWFSitePlan'};
swfobject.embedSWF("/flash/FloorplanViewer/FloorplanViewer.swf", "SiteplanFlash", "915", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
}
function initializeGallery()
{
var params = {wmode: 'transparent'};..... (more code)
This is what the page with the js dump
(source: oxid8.com)
this is what the page should look like:
(source: oxid8.com)
First, you shouldn't use the language attribute, it's deprecated.
The only thing I can see is that you use application/javascript instead of text/javascript in your HTML (there's a difference between what you specify in your HTML and the MIME-type servers use when sending a Javascript file), but I cannot reproduce any errors on Chromium/Linux with a simple test case like
<!DOCTYPE html>
<html>
<head>
<title>dkdkd</title>
</head>
<body>
<script type="application/javascript">
var i=0;
</script>
</body>
</html>
(Perhaps you can try this, too.)
Just in case: is the script element closed properly? Is all Javascript correct, i.e. does it pass JSLint?
Perhaps you can paste the full source of the HTML page (preferably on something like Pastebin), so we can have a closer look.
I guess I'll give this a shot. I was having a similar problem on some pages that used TinyMCE (javascript or even parts of my html were being displayed on the page)
MY solution was to upgrade the version of TinyMCE that I was using. v3.3 has an overhauled Webkit handler.
The issue so far as I can tell was that TinyMCE was injecting (poorly) additional blocks of javascript into the page.
This (and a handful of similar blocks) is always injected into <head>
<script type="text/javasript" src="http://www.example.com/javascript/rte/langs/en.js" onload="tinemce.dom.ScriptLoader._onLoad(this,'http://www.example.com/javascript/rte/langs/en.js', 0);">
Which, when onload fired, injected the following block into a random location in the DOM, mangling whatever it was placed on top of.
<script type="javascript" src="http://www.example.com/javascript/rte/langs/en.js">
The result of that, as seen in the Webkit Developer Tools was to turn
<td class="tab" nowrap="">
into:
<td class="ta<script stype="text=""javascript"" src="http://www.example.com/javascript/rte/langs/en.js"> "b" nowrap=>"
Since that's clearly not valid markup the resulting garbage was output.
Upgrading my install of TinyMCE from the previous stable to v3.3rc1 fixed the issue.TinyMCE Changelog references a total Webkit overhaul.
edit: By random I really mean random. It inserts the script tag in a different location each time, sometimes breaking content, sometimes not.