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
Related
I already have a Django project with many apps and one of them is demo_app. I have some views and templates added to the demo app but I want to start using tailwind in the demo_app templates. I have seen that to add tailwind I need to create the theme app using tailwind but I want to add it to the already existing demo_app. How can I do that?
You can create the theme app just like the documentation says and add the tags to your existing app. I followed the process in this link. The js config in the app already looks for the tailwind tags in other apps. The tags I used are
{% load static tailwind_tags %} and {% tailwind_css %}. I added them to the html template in my existing app.
{% load static tailwind_tags %} at the top of the template and {% tailwind_css %} in the <head>
What I did that worked for me was install tailwind-cli in the static folder of my Django app, check out the tailwind-cli installation guide Tailwind Documentation. And then load the CSS in the HTML template. Below is how I referenced the tailwind CSS.
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'main.css' %}" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold">
Hello, world!
</h1>
</body>
</html>
I am using below bootstrap nav in my new website.
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h
When i am changing active tab( tab1 to tab2), it's still showing earlier active tab's contents.
Is there any way to resolve the issue.
Thanks in advance.
Have you included all of the Bootstrap assets? You might be missing bootstrap.min.js and/or jquery.
Are there any errors in your JS console?
Make sure you have all of these CDNs linked (or that you've downloaded these files locally and linked them in your HTML):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Bootstrap 4 Docs
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.
I have an Ember application running with hadlebars. I have several ember templates in my HTML page, but I ran into a slight dilemma - I can't escape an HTML code within script tag. I am looking to insert a non-working raw HTML into script tag for illustrative purposes. Will it be of help by using .hbs file method? I would prefer not to use .hbs method.
<script type="text/x-handlebars" data-template-name="name">
<html>
<head>
so on....
</head>
</html>
</script>
Thank you.
You can do this exactly the same way you would do it in normal HTML: escape the HTML entities:
<script type="text/x-handlebars" data-template-name="name">
<html>
<head>
so on....
</head>
</html>
</script>
I am trying to implement the instafeed tutorial to just show some instagram pictures.
I am working on PyCharm using Django.
Here is my folder hierarchy:
/test_project/js/instafeed.min.js
I have a suspicion that I am not referencing the 'src' correctly. I had 'Cannot resolve directory' warnings before, but I got them to disappear by playing around with the Source preferences.
Here's the HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
</style>
<script type="text/javascript" src="/js/instafeed.min.js"></script>
<script type="text/javascript">
var feed = new Instafeed({
get: 'tagged',
tagName: 'awesome',
clientId: 'b8dacdbf587f41798d8dfb03e3f7a29',
useHTTP: true
});
feed.run();
</script>
</head>
<body>
<div id="instafeed">
</div>
</body>
</html>
I used the 'useHTTP:true' because I saw on another answer that this needs to be set to true to work on a local machine. I've looked at how the code was used in other tutorials and implementations, but I don't see how my code is any different.
Thanks for the help!
Instafeed needs jQuery (the documentation says that you don't need, but i got some errors without it), so make sure you have both libs loaded correctly.
Try with this:
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdn.lukej.me/instafeed.js/1.2.0/instafeed.min.js"></script>