I am using Django-compress to compress my css and js files. Relevant snippets as follows.
settings
COMPRESS = True
COMPRESS_VERSION = True
COMPRESS_CSS = {
'css_all': {
'source_filenames': (CSS_ROOT + 'main.css',
CSS_ROOT + 'jquery-ui-1.7.1.custom.css',
CSS_ROOT + 'ui.daterangepicker.css',),
'output_filename': 'css/all_compressed.r?.css',
}
}
COMPRESS_JS = {
'js_all': {
'source_filenames': (JS_ROOT + 'daterangepicker.jQuery.js',
JS_ROOT + 'jquery-ui-1.7.1.custom.min.js',
JS_ROOT + 'jquery-1.3.1.min.js',),
'output_filename': 'js/all_compressed.r?.js',
}
}
COMPRESS_AUTO = True
template
{% load compressed %}
{% compressed_css 'css_all' %}
{% compressed_js 'js_all' %}
My CSS is loading fine but not the javascript. However, When I manually enter the JS sources in my template like this:
<script type="text/javascript" src="{{ JS_ROOT }}/js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="{{ JS_ROOT }}/js/jquery-ui-1.7.1.custom.min.js"</script>
<script type="text/javascript" src="{{ JS_ROOT }}/js/daterangepicker.jQuery.js"></script>
I am able to get my javascript date widget working.
Could this be something to do with Django-compress messing the javascript code when it tries to compress it?
Django-compress is searching for CSS and JS files in MEDIA_ROOT so im sure there is a problem. Also u can specify prefix in extra_context
Related
As you can see in the code below, I have imported a <script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script> to my Index.html.
But there are Django variables in that JS file. like: {{ sizes }} and {{ urlsPosts }}, they go from Views.py to the Index.html.
Unfortunately Django doesn't see these variables in the JS file if I keep the JS as a separate file.
If I copy paste the JS right to the HTML without separating - everything works well.
How can I include these Django variables into the separate Js file?
Index.html:
<html>
{% load static %}
{% include 'head.html' %}
<body>
<header>
</header>
</body>
<footer>
<script type="text/javascript" src="{% static 'js/posts_lazy_loading.js' %}"></script>
</footer>
</html>
Views.py:
def index(request):
posts = Post.objects.all()
sizes = ''
urlsPosts = ''
for i in range(0, len(posts)):
if i == len(posts):
sizes = sizes + str(posts[i].thumbnail.width) + 'x'
sizes = sizes + str(posts[i].thumbnail.height)
urlsPosts = urlsPosts + posts[i].thumbnail.url
else:
sizes = sizes + str(posts[i].thumbnail.width) + 'x'
sizes = sizes + str(posts[i].thumbnail.height) + ' '
urlsPosts = urlsPosts + posts[i].thumbnail.url + ' '
return render(request,'index.html',{'posts':posts, 'sizes':sizes, 'urlsPosts':urlsPosts)
posts_lazy_loading.js:
var images = document.getElementsByClassName('cover_main_page'),
posts = document.getElementsByClassName('post'),
descriptions = document.getElementsByClassName('description'),
description_height = descriptions[0].clientHeight;
post_content = document.getElementsByClassName('post_content'),
loading = document.getElementsByClassName('dots_portoflio'),
sizes = "{{ sizes }}",
sizeslist = sizes.split(" "),
urlsPosts = "{{ urlsPosts }}",
urlslist = urlsPosts.split(' '),
ratios = [],
viewport_width = document.documentElement.clientWidth,
newwidth = 0,
margin = 3, //each post has 3vw margin left and 3vw margin right
mobile = 0,
mobilewidth = 94;
.... a lot of code here ....
Yup, django will generate this line as follows:
It won't open the JS as this will ask the browser to load the JS, to use django inside your JS, you have one of two options
Use {%include 'JSFILE'%} but in this case, your JS file shall be in the templates folder
Put the JS code itself in your HTML template.
This thread here discussed using variables in inline JavaScript in templates. If I have separate .js files containing scripts, sitting in static folder, such as following:
utils.js
const createButton = (buttonCount) => {
containerId = "myContainerId"
container = document.getElementById(containerId)
for (var i = 0; i < buttonCount; i++) {}
newButton = document.createElement("button")
newButton.value = "Test"
newButton.id = "testButton" + i
container.appendChild(newButton)
}
}
createButton(buttonCount)
mytemplate.html
{% extends "base.html" %}
{% load static %}
{% block title %}Testpage{% endblock %}
{% block content-main %}
<link href="{% static "css/mycss.css" %}" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.0/css/bulma.css" />
<div id="myContainerId"></div>
<script src="{% static 'js/utils.js' %}"> </script>
{% endblock %}
If I have a variable buttonCount passed into this template via a view function's context, how do I pass it to the utils.js file to be called by function createButton()?
views.py
def button_view(request):
...
buttonCount = 5
return render(request, 'mytemplate.html', {'buttonCount': buttonCount})
There can be a few ways:
Using Input Field
<input id="buttonCount" value = "{{buttonCount}}" style="display:none;">
Then read value of element with id= buttonCount in utils.js.
Inline Script **Not Suggested,Use Document.onload instead.
<script>
set_button_count({{buttonCount}});
</script>
But this will create a problem when your utils.js is not loaded yet.
document.onload
Place the script source in <head></head>
<script src="{% static 'js/utils.js' %}" defer> </script>
<script>
document.addEventListener('onload',function(
{set_button_count({{buttonCount}});
})
</script>
set_button_count() is to be placed in utils.js
Defer will ask browser to only fire document load when utils.js
is complete and it will be fetched and loaded after the document is
loaded.
Warning: Inline scripts are to be used with strict CSP (Content Security Policy).Any inline script can be given a src as nonce.
CSP can be done on Server Side on apache or Nginx which are very common web server/reverse proxy or you can also mention the same in HTML if you don't have control on that.
<meta http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self' 'nonce-{{nonce}}';">
and this nonce can be generated something like this:
import random,base64
def usersession_processor(request):
user = request.user
unbaked_nonce = '%32x' % random.getrandbits(16*8)
unbaked_nonce = unbaked_nonce.encode('utf-8')
baked_nonce = base64.b64encode(unbaked_nonce)
baked_nonce = baked_nonce.decode('utf-8')
Then <script src="{{nonce}}"></script> can be used for safe inlines.
I don't think this is recommended but you could do something like this if you're using the django template context. Put the script at the bottom of the page and include the buttoncount as a Django Templating Language variable. I don't think it's recommended to mix Django template variables with javascript though.
You can put a new block in your 'base.html' file, at the bottom inside the body tag like this:
{% block inline_javascript %}
{% enblock inline_javascript %}
Then inside the page you want the function to run on you put the script inside the same tags at the bottom of that page outside the 'block content' like:
{% block inline_javascript %}
<script>
const createButton = ({{ buttonCount }}) => {
containerId = "myContainerId"
container = document.getElementById(containerId)
for (var i = 0; i < {{ buttonCount }}; i++) {}
newButton = document.createElement("button")
newButton.value = "Test"
newButton.id = "testButton" + i
container.appendChild(newButton)
}
}
</script>
{% enblock inline_javascript %}
Hi i have been facing this issue for over a long time. I can able to found at the place,it is due to the ng-app in the html page. However i have the proper food module in js. What could the be the cause of this error? any idea? my code
INDEX.HTML
<!DOCTYPE html>
<html ng-app="food">
<head>
<title>Scratchpad</title>
<!-- Viewport mobile tag for sensible mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--
Stylesheets and Preprocessors
==============================
You can always bring in CSS files manually with `<link>` tags, or asynchronously
using a solution like AMD (RequireJS). Or, if you like, you can take advantage
of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, stylesheets from your `assets/styles` folder are included
here automatically (between STYLES and STYLES END). Both CSS (.css) and LESS (.less)
are supported. In production, your styles will be minified and concatenated into
a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your CSS files
+ Import stylesheets from other directories
+ Use a different or additional preprocessor, like SASS, SCSS or Stylus
-->
<!--Twitter Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!--STYLES-->
<link rel="stylesheet" href="/styles/importer.css">
<!--STYLES END-->
</head>
<body>
<nav class = "navbar navbar-default" role = "navigation">
<div class = "container-fluid">
<div class = "navbar-header">
<a class = "navbar-brand" ui-sref = "scratchpad">FoodForShare</a>
</div>
</div>
</nav>
<p>SAMPLE PAGE</p>
<div class = "container">
<div ui-view></div>
</div>
<!--
Client-side Javascript
========================
You can always bring in JS files manually with `script` tags, or asynchronously
on the client using a solution like AMD (RequireJS). Or, if you like, you can
take advantage of Sails' conventional asset pipeline (boilerplate Gruntfile).
By default, files in your `assets/js` folder are included here
automatically (between SCRIPTS and SCRIPTS END). Both JavaScript (.js) and
CoffeeScript (.coffee) are supported. In production, your scripts will be minified
and concatenated into a single file.
To customize any part of the built-in behavior, just edit `tasks/pipeline.js`.
For example, here are a few things you could do:
+ Change the order of your scripts
+ Import scripts from other directories
+ Use a different preprocessor, like TypeScript
-->
<script src="/js/dependencies/sails.io.js"></script>
<script src="/js/bower_components/angular/angular.min.js"></script>
<script src="/js/bower_components/angular-route/angular-route.min.js"></script>
<script src="/js/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/js/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/js/main.js"></script>
<script src="/js/routes.js"></script>
<script src="/js/service/crud.js"></script>
</body>
</html>
MAIN.JS
/**
* Defines module-scratchpadModule for the application
*#dependencies: ui-router , Angular - resource
*#states: 2 Parent states and 1 Child state
*#Controllers: Controllers for listing, viewing and adding a scratch
*#Factory Service: Notes for the angular resource
*
*
*
*
*/
var foodshareModule= angular.module('food',['ngRoute','ngResource']);
console.log("Main file getting included");
foodshareModule.controller("personController", function($scope) {
console.log($scope);
$scope.firstName = "John";
$scope.lastName = "Doe";
console.log($scope.firstName);
console.log($scope.lastName);
});
foodshareModule.controller('scratchListController', function($scope,$state,Notes){
console.log("working");
$scope.scratchpad =Food.query();
$scope.deleteScratch = function (scratch,flag) {
if(flag === 0) { //Checks if Bulk delete or single delete
if(confirm("You Clicked DELETE !! Are you sure ?")) {
scratch.$delete(function() { //Single delete
window.location.href = 'http://localhost:1337';
});
}
}
else { //Bulk delete
scratch.$delete(function() {
window.location.href = 'http://localhost:1337';
});
}
}
$scope.emptyScratchpad = function () {
var ask = false;
if (confirm ("You are about Empty Scratchpad. Sure ????")) {
ask = true;
}
if(ask === true) {
for (var i = 0; i < $scope.scratchpad.length; i++) {
$scope.deleteScratch($scope.scratchpad[i],1);
}
}
}
})
foodshareModule.factory('Food', function($resource) {
return $resource('http://localhost:1337/Food:id', { id: '#_id' }, {
update: {
method: 'PUT'
}
});
});
ERROR:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=food&p1=TypeError%…calhost%3A1337%2Fjs%2Fbower_components%2Fangular%2Fangular.min.js%3A17%3A1)
you have not included ngResource script file. ngResource doesnt come pre bundled with angular.js
<script src="path-to-js/angular-resource.min.js"></script>
My home page had some inline javascript that was mixed up with some blade syntax e.g.
<script type="text/javascript">
#if(Auth::user())
if(path.indexOf('/user/' + {{Auth::user()->id}} ) != -1) {
$( "#tabs" ).tabs();
};
#endif
</script>
It worked until I wanted to move the javascript to an external file.js. I got error whenever blade syntax was added. Is there a way I can fuse blade syntax in my javascript files.js? I tried renaming to file.blade.js with no luck...
Although the accepted solution will work, this is a most definitely an antipattern.
If I saw this not being the one who wrote it, I would be extremely confused to what's going on.
My suggestion is in your PHP file, have a block, which gets all of the values that you'll need in your external files, then call the external files.
So in your PHP file you would have something like:
<script>
var userID = "{{ Auth::user()->id }}";
var isUser = "{{ Auth::user() }}"
</script>
{{ HTML::script('path/to/js/file.js') }}
And in your javascript file:
if(isUser)
{
if(path.indexOf('/user/' + userID ) != -1) {
$( "#tabs" ).tabs();
};
}
you can try this save your javascript file in app/views folder and rename it to xxx.blade.php , yes .blade.php because Blade Engine will parse it only if its .blade.php and use #include('your javascript filename') to include the javascript file parsed by Blade, it will work.
I was doing the same than #BrandonRomano, but I found a better approach. Sending directly the value from PHP to JS vars using:
PHP-Vars-To-Js-Transformer
PHP:
JavaScript::put([
'foo' => 'bar',
'user' => User::first(),
'age' => 29
]);
JS:
console.log(foo); // bar
console.log(user); // User Obj
console.log(age); // 29
You can set a namespace like:
console.log(server.foo)
You are outputing string from PHP, so you have to enclose that string in '
<script type="text/javascript">
#if(Auth::user())
if(path.indexOf('/user/' + '{{Auth::user()->id}}' ) != -1) {
$( "#tabs" ).tabs();
};
#endif
</script>
I'm working with mustache.js for the first time. All the examples I'm finding seem to talk about putting everything inline, but I want my templates in external files so they can be used in multiple places. How do I do that? (I've got jQuery in my stack, if that makes a difference.)
So say I have:
template.html
{{title}} spends {{calc}}
data.js
var data = { title: "Joe", calc: function() { return 2 + 4; } };
index.html
<script type="text/javascript" src="data.js"></script>
<div id="target"></div>
<script type="text/javascript">
var template = ?????? // how do I attach the template?
var html = Mustache().to_html(template, data);
$('#target')[0].innerHTML = html;
</script>
template = $('.template').val();
Where your template is in the DOM...
<textarea class="template">
<h1>{{header}}</h1>
{{#bug}}
{{/bug}}
{{#items}}
{{#first}}
<li><strong>{{name}}</strong></li>
{{/first}}
{{#link}}
<li>{{name}}</li>
{{/link}}
{{/items}}
{{#empty}}
<p>The list is empty.</p>
{{/empty}}
</textarea>
You could also render multiple templates directly into your page...
<script id="yourTemplate" type="text/x-jquery-tmpl">
{{tmpl "#yourTemplate"}}
<div>Something: ${TemplateValue}</div>
</script>