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.
Related
I want to use some **Boostrap** elements into the **django admin** interface.
For that purpose, I have overided the *admin/base.html* template. I want to add the links to bootstrap javascripts (the two lines of code you have to put just before the `` in order to use bootstrap) into that template.
As it is out of any `{% block %}` in the original *admin/base.html*, is there a nice way to do that without copying the entire section ?
in your admin/base.html file add bootstrap style and js scripts using CDN as below;
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
I hope this will help you as it works for me. Please try and if you have any queries related to this please add a comment.
Getting started with Bootstrap
I followed angular2 tutorial https://angular.io/docs/ts/latest/tutorial/.
I didnt want it run under node.js lite-server, but under django.
I managed to finish it and its working BUT: everytime I import any angular module eg. in index.html:
System.import('static/dist/js/main')
.then(null, console.error.bind(console));
or in main.ts:
import {AppComponent} from './app.component'
or everywhere, javascript application is trying to load some js resource like static/dist/js/main file which doesnt exist of course, because the compiled file is named main.js not main.
When I add the extensions '.js' like:
System.import('static/dist/js/main.js')
.then(null, console.error.bind(console));
or
import {AppComponent} from './app.component.js'
It suddenly works, but ts to js compiler (npm run tsc) is throwing error (even throught its compiling) and my IDE is underlining imports as errors.
This is my full index.html:
{% verbatim %}
<html>
<head>
<base href="/">
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="static/node_modules/es6-shim/es6-shim.min.js"></script>
<script src="static/node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="static/node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="static/node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="static/node_modules/systemjs/dist/system.src.js"></script>
<script src="static/node_modules/rxjs/bundles/Rx.js"></script>
<script src="static/node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="static/node_modules/angular2/bundles/router.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('static/dist/js/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
{% endverbatim %}
I checked this Angular2 Typescript app throws 404 on components when js extension not specified but it didnt helped me.
Does anyone have an idea, please?
Assuming you have configured tsc to output your code to the 'static/dist/js' folder you should be able to configure Systemjs like this:
<script>
System.defaultJSExtensions = true;
System.config({
baseURL: "./static/dist/js"
});
System.import("main")
</script>
I have a large php application that I am converting to ember.js. In my php application I used to have separate css and js files which was loaded when the specific routes get called. what the best way to accomplish this in ember.js or is there any other best practice for that. Right now I am loading all the js and css files in my index.html file.
<link type="text/css" rel="stylesheet" href="assets/css/gumby.css" media="all" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global.css" media="all" />
<link type="text/css" rel="stylesheet" href=assets/css/tooltipster.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/about.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/admin.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global_print.css" media="print" />
js files:
<script src="assets/js/libs/jquery-1.9.0.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/account.js"></script>
<script src="js/message.js"></script>
<script src="js/user.js"></script>
<script src="js/inquiry.js"></script>
I saw this tutorial http://madhatted.com/2013/6/29/lazy-loading-with-ember and also looked ember-cli. It will be really helpful for me if people share what they are doing for their application. Thanks in advance.
Typically you can take two paths to preprocess your assets: minify, compress, uglify, etc.
You can do it with the back-end you are using. As examples here, you have Rails using sprockets for its asset pipeline, or PHP's Assetic.
If you don't want to rely on your back-end for this task, you can opt to do it using any front-end build tool. There are a few here, the most popular option for ember-cli these days seems to be broccoli, which comes set up by default. Other choices could be gulp or grunt. All these options involve using your terminal to build your application, using a configuration file as a central point (Brocfile.js, Gruntfile.js, etc.)
It's mostly a matter of personal preference. As an example, I'd probably go with Rails asset pipeline for small projects, while I'd use ember-cli and broccoli if I'd be working on something bigger.
i an doing exactly the same Django admin datepicker calendar and clock img
and i am suffering with the same problem but it was working perfectly fine with django 1.4 but when i updated it to django 1.5 it is giving me this error
'adminmedia' is not a valid tag library: Template library adminmedia not found, tried django.templatetags.adminmedia,django.contrib.staticfiles.templatetags.adminmedia,django.contrib.admin.templatetags.adminmedia,django.contrib.humanize.templatetags.adminmedia,jobpost.templatetags.adminmedia,crispy_forms.templatetags.adminmedia,tinymce.templatetags.adminmedia,haystack.templatetags.adminmedia
here is my code:
{% load adminmedia %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<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.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"> </script>
<script type="text/javascript">
window.__admin_media_prefix__ = "{% filter escapejs %}{% admin_media_prefix %}{% endfilter %}";
</script>
<script type = “text/javascript” src=”../jscripts/tiny_mce/tiny_mce.js”></script>
<script>
by doing this i am showing image of calender widget from /static/admin/img/icon_calender.jpg.
but admin media option is deprecated in django version 1.5 or later so then i replace this with static media option and here is the new code:
{% load staticfiles %}
{% load i18n %}
{% load crispy_forms_tags %}
{% block content %}
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="/my_admin/jsi18n/"></script>
<script type="text/javascript" src="/media/admin/js/core.js"></script>
{{ form.media }}
<link rel="stylesheet" type="text/css" href="/static/admin/css/forms.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/base.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/static/admin/css/widgets.css"/>
<link href="{% static 'admin/css/login.css' %}" rel="stylesheet">
and it look like this:
my calender icon is gone. can anyone tell me whats the alternative of this problem in version 1.5
help will be appreciated
The response is right here, in the 1.5 release notes: https://docs.djangoproject.com/en/dev/releases/1.5-beta-1/#miscellaneous
The {% admin_media_prefix %} became deprecated, you must remove it from your templates. (Included every {% load adminmedia %}, which causes the exception). There must be a setting which replace this tag I guess.
so django 1.5 was giving me nightmare so i resolved my problem by using direct jquery datpicker here is the jquery datepicker
all i had to do is change the id which is a little bit tricky in django .for example if your date field name is start_date then id will be formtools_start_date . and for this kind of datepicker you don't even need any icon to show.. this helped me i hope this will help those also whoever upgraded their django version.
I just had this problem today - not being able to load admin base.css. I upgraded Django for my site from v1.2 to v1.5 and encountered the issue. I found that the href is /static/admin/css/base.css and could not find out how to change it. So I did these:
Copied site-packages/django/contrib/admin/static/admin/* to my Django project's static directory so it would be like
top/
static/
admin/
css/
js
images
Editted urls.py, added the following line in the urlpatterns = patterns('',...
(r'^static/(?P.*)$','django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes':True}),
That's it. It worked.
I'm using django 1.3
I'm using a base.html template which my pages inherit from. Everything works fine except for one page (which has a form on it).
That page is trying to call the CSS from /links/addlink/css/site.css but this is the wrong location. It is in /static/css/site.css
In my base.html I have <link rel="stylesheet" href="{{ STATIC_URL }}css/site.css" type="text/css" charset="utf-8" />
If I create a completely seperate template and use the full path like <link rel="stylesheet" href="http://127.0.0.1:8000/static/css/site.css" type="text/css" charset="utf-8" /> then my page renders correctly.
What is wrong?
You are not using RequestContextin your view.
See here: Referring to static files in templates