I'm working on DjangoCMS app, which includes its custom javascript file, but I have a problem with using jQuery after using templatetag render_block.
After creating a new project here is my project structure:
project/
apps/
myapp/
static/
js/
custom.js
templates/
base.html
header.html
menu.html
__init__.py
settings.py
urls.py
base.html
{% load cms_tags menu_tags sekizai_tags staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>{% block title %}This is my new project home page{% endblock title %}</title>
</head>
<body>
<div>
{% include "header.html" %}
{% show_menu 0 100 100 100 "menu.html" %}
</div>
{% block content %}{% endblock content %}
{% render_block "js" %}
{% addtoblock 'js' %}
<script type='text/javascript' src="{% static "js/bootstrap.min.js" %}"></script>
<script type='text/javascript' src="{% static "js/custom.js" %}"></script>
{% endaddtoblock 'js' %}
</body>
</html>
project/apps/myapp/templates/myapp/home.html
{% extends CMS_TEMPLATE %}
{% load cms_tags sekizai_tags staticfiles %}
{% block title %}Home{% endblock title %}
{% block content %}{% endblock content %}
There is no content in home.html, yet. But the content from base.html renders properly. The problem is in custom.js which uses jQuery.
custom.js
$(document).ready(function(){
alert("Hi");
});
Alert message never pop up, and I get message "undefined is not a function". The main problem that bothers me is that jQuery is included in my source code, but I can't use it.
source code
<html>
...
<body>
....
<script>
var _jQuery = window.jQuery || undefined;
var _$ = window.$ || undefined;
</script>
<script src="/static/cms/js/libs/jquery.min.js"></script>
<script src="/static/cms/js/libs/class.min.js"></script>
<script src="/static/cms/js/modules/jquery.ui.custom.js"></script>
<script src="/static/cms/js/modules/jquery.ui.nestedsortable.js"></script>
<script src="/static/cms/js/modules/cms.base.js"></script>
<script src="/static/cms/js/modules/cms.modal.js"></script>
<script src="/static/cms/js/modules/cms.sideframe.js"></script>
<script src="/static/cms/js/modules/cms.clipboard.js"></script>
<script src="/static/cms/js/modules/cms.plugins.js"></script>
<script src="/static/cms/js/modules/cms.structureboard.js"></script>
<script src="/static/cms/js/modules/cms.toolbar.js"></script>
...
<script type='text/javascript' src="/static/js/custom.js"></script>
</body>
</html>
Obviously {% render_block "js" %} works fine, but I found that because of it, CMS.$ will be passed for $. Because of that I added:
<script> $ = CMS.$ </script>
on the top of my addtoblock:
{% addtoblock 'js' %}
<script>$=CMS.$</script>
<script type='text/javascript' src="{% static "js/bootstrap.min.js" %}"></script>
<script type='text/javascript' src="{% static "js/custom.js" %}"></script>
{% endaddtoblock 'js' %}
My problem with alert was resolved, but Bootstrap still reports that ther is no jQuery:
Bootstrap's JavaScript requires jQuery
Adding jQuery in addtoblock can resolve the problem, but then there will be two same jQuery files in my source code and that is unnecessary.
What am I missing here?
A quick glance at the bootstrap source tells me they check for
jQuery, not$. Try changing your<script>$ = CMS.$</script>to<script>jQuery = CMS.$</script>.However, be aware that the CMS jQuery will only be loaded if the toolbar is active, as in, only for logged-in staff users.