I am trying to integrate tinymce with django using these steps, however I can't. All I see in my admin panel is a simple TextField.
It seems there is something wrong with my settings.py file because in the code of the admin page I get this:
<script type="text/javascript">window.__admin_media_prefix__ = "/static/admin/";</script>
<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.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/tiny_mce/tiny_mce.js"></script>
Shouldn't tiny_mce.js source file exist in static/admin directory? What am I doing wrong?
First - look at this code throught Firebug (or something else, as you wish), maybe .js code doesn't linked with that page, then you will see 404 page there. Also, if everything correct you must check javascript errors, maybe there some dependencies fails.
And I'm sure, that you connect all needed code inn your .py files.
Related
I am having some weird problem with using popover in my django app. When using the css and js of a latest version of bootstrap it simply does not work. When I use link to 3.4.1 version I found in some tutorial everything works just fine. I'm attaching code that doesn't work and the one that does.
Did popover function got removed in latest bootstrap?
Works (3.5.1):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Toggle popover
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Does not work (4.5.x):
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
Toggle popover
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
You are missing popper.js.
Note that the bootstrap bundle js include the popper.js library. Try to load this one from CDN instead of bootstrap.js.
Require order :
Jquery
Popper
Bootstrap
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'm working on adding tinyMCE to the admin change_form and returning the error:
Uncaught ReferenceError: tinyMCE is not defined
It looks like the source has loaded correctly in the developer tools. I'm not sure what's causing the error.
From change_form.html
{{ media }}
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.1.6/jquery.tinymce.min.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode: "textareas",
theme: "simple"
});
</script>
I wanna add mathjax script into my template
</script>
<script type="text/javascript" src="{% static "MathJax-2.4-latest/MathJax.js?config=TeX-AMS_HTML-full.js" %}"></script>
But django encode '?' to '%3F' and '=' to '%3D'(In firefox console), So I get a incorrect url. If I use "http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
as my "src" attribution value, it's correct. And firefix console can show '?' and '=' correctly.
Okay, I solved the problem myself. It should place "?config=xxx" out of "%}". It looks like
<script type="text/javascript" src="{% static "MathJax-2.4-latest/MathJax.js" %}?config=TeX-AMS_HTML-full">
</script>
I have created a MVC 3 site using Kendo. When I go into Debug mode the Kendo controls render with no problem. When I public the project to my IIS7 server the controls do not render. Here is what I have in the layout file to reference the kendo javascript files and other javascript files.
<script src="#Url.Content("~/Scripts/common.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/json2.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/jquery.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.web.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/kendo/2013.1.319/kendo.culture.en-US.min.js")" type="text/javascript"></script>